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

Added modal and sort to minifigs and fixed img size (Fixed #4)

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-11-21 11:57:54 +01:00
parent e5e4d84a36
commit 69198ee0a2
1 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
templates/minifigs.html
View File

@ -8,8 +8,45 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE"
}
table.sortable tbody tr:nth-child(2n) td {
background: #ffffff;
}
table.sortable tbody tr:nth-child(2n+1) td {
background: #ecf0f1;
}
@media only screen and (max-width: 480px) {
/* horizontal scrollbar for tables if mobile screen */
img {
margin:0;
padding: 0;
display: block;
}
}
@media only screen and (min-width: 600px) {
img {
margin:0;
padding: 0;
height: 150px;
width: auto;
}
}
/* Modal Styles */
#lightbox-modal {
display: none;
@ -33,6 +70,8 @@
.lightbox-content {
max-width: 90%;
max-height: 90%;
height: auto;
width: auto;
position: absolute;
top: 50%;
left: 50%;
@ -98,19 +137,19 @@
</nav>
<center>
<div class="center-table">
<table id="data" class="table">
<table id="data" class="table sortable tablemobile">
<thead>
<tr>
<th class="fixed-width"></th>
<th>fig_num</th>
<th class="fixed-width sorttable_nosort"></th>
<th>Num.</th>
<th>Name</th>
<th>total_quantity</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
{% for brick in missing_list %}
<tr>
<td><img src="{{ '/static/minifigs/' + brick[0] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[1] }}" style="height: 150px; width: auto;margin:0;padding: 0;" loading="lazy">
<td><img src="{{ '/static/minifigs/' + brick[0] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[1] }}" loading="lazy">
</td>
<td>{{ brick[0] }}</td>
<td>{{ brick[1] }}</td>