FrederikBaerentsen/BrickTracker
4
4
Fork 3
Code Issues 9 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Added formatting for better seperation of minifigs and tables

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-12-28 08:36:49 +01:00
parent 5f22300170
commit 37a6fd2127
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
templates/base.html
View File

@ -14,6 +14,12 @@
<style> <style>
.title-image {
object-fit: cover;
width: 100%;
height: 200px;
}
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE" content: " \25B4\25BE"
} }
@ -28,6 +34,7 @@ table.sortable tbody tr:nth-child(2n+1) td {
display: none; display: none;
} }
table { table {
width: 100%; /* Ensure the table takes full width of its container */ width: 100%; /* Ensure the table takes full width of its container */
@ -246,8 +253,8 @@ background-color: white;
<div class="container"> <div class="container">
<center> <center>
<h1 class="title">{{ tmp }} - {{ title }}</h1> <h1 class="title is-2 mt-4">{{ tmp }} - {{ title }}</h1>
<img class="lightbox-trigger" id="cover" style='height: 150px; width: auto; object-fit: contain' src="/static/sets/{{ tmp }}.jpg" alt="{{ tmp }} - {{ title }}"> <img class="lightbox-trigger title-image mb-5" id="cover" style='height: 150px; width: auto; object-fit: contain' src="/static/sets/{{ tmp }}.jpg" alt="{{ tmp }} - {{ title }}">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}

19
templates/table.html
View File

@ -1,14 +1,14 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div style="overflow-x:auto;"> <div style="overflow-x:auto;border-radius: 10px;border: 1px #ccc solid; box-shadow:0 0.5em 1em -0.125em hsla(221deg,14%,4%,0.1),0 0px 0 1px hsla(221deg,14%,4%,0.02);" >
<table id="data" class="table tablemobile sortable"> <table id="data" class="table tablemobile sortable">
<thead> <thead>
<tr> <tr>
<th class="sorttable_nosort" style="width:65px;">Image</th> <th class="sorttable_nosort" style="width:65px;">Image</th>
<th class="hidden-mobile name-class">Name</th> <th class="hidden-mobile name-class">Name</th>
<th class="hidden-mobile">Color</th> <th class="hidden-mobile">Color</th>
<th >Qty</th> <th style="text-align:center">Qty</th>
<th class="sorttable_nosort" style="text-align:center;">Missing</th> <th class="sorttable_nosort" style="text-align:center;">Missing</th>
</tr> </tr>
</thead> </thead>
@ -58,11 +58,12 @@
</table> </table>
</div> </div>
{% if minifig_list | length > 0 %} <div style="margin: 2rem 0; padding: 2rem; border-bottom: 2px solid #eee;"></div>
<h1 id="minifigs" class="title">Minifigs</h1> {% if minifig_list | length > 0 %}
<h1 id="minifigs" class="title is-2 ">Minifigs</h1>
{% for fig in minifig_list %} {% for fig in minifig_list %}
<h2 class="subtitle">{{ fig[2] }} ({{ fig[0] }})</h2> <h2 class="subtitle is-4 mt-4 ">{{ fig[2] }} ({{ fig[0] }})</h2>
<div style="display: flex; justify-content: center;"> <div style="display: flex; justify-content: center;">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
@ -75,15 +76,15 @@
</div> </div>
</div> </div>
<div class="center-table" > <div class="center-table" style="overflow-x:auto;border-radius: 10px;border: 1px #ccc solid; box-shadow:0 0.5em 1em -0.125em hsla(221deg,14%,4%,0.1),0 0px 0 1px hsla(221deg,14%,4%,0.02);" >
<table id="data" class="table"> <table id="data" class="table tablemobile sortable">
<thead> <thead>
<tr> <tr>
<th class="fixed-width"></th> <th class="fixed-width sorttable_nosort"></th>
<th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th> <th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
<th class="fixed-width hidden-mobile">Color</th> <th class="fixed-width hidden-mobile">Color</th>
<th class="fixed-width" style="text-align: center;">Qty</th> <th class="fixed-width" style="text-align: center;">Qty</th>
<th class="fixed-width" style="text-align: center;">Missing</th> <th class="fixed-width sorttable_nosort" style="text-align: center;">Missing</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>