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

Working on better frontpage

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-04-14 20:37:25 +02:00
parent d2934ddf47
commit 3ca1a1a8bd
1 changed files with 361 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
templates/frontpage.html
View File

@ -33,19 +33,19 @@
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(20%, 32%)); /* Between 33% and 50% width */
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
gap: 10px;
padding: 10px;
}
.grid-item {
height: 300px;
display: flex;
flex-direction: column; /* Arrange content vertically */
}
.card {
height: 100%;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
@ -57,7 +57,9 @@
.card {
height: auto; /* Let the height adjust dynamically */
}
.grid-container {
grid-template-columns: 100%; /* On mobile, set width to 100% */
}
.grid-item {
height: auto; /* Let the height adjust dynamically */
overflow: visible; /* Allow content to overflow if necessary */
@ -109,47 +111,49 @@
<button class="button button-outline" onclick="dynamicSort('s_col')">Sort by Collected</button>
<button class="button button-outline" onclick="dynamicSort('s_check')">Sort by Checked</button>
</center>
<button id="toggleButton">Toggle Visibility</button>
<center>
<button class="button button-outline" id="toggleButton">Show Collected</button>
<button class="button button-outline" id="toggleButton2">Show Checked</button>
</center>
<!-- Add more buttons for other text values if needed -->
</div>
<center>
<div class="grid-container" id="gridContainer">
{% for i in set_list %}
<div class="grid-item">
<div class="card" style="display: flex;flex-direction: column;">
<div class="card-image">
<div class="grid-item" style="">
<div class="card" style="">
<div class="columns" style="">
<div class="column is-two-thirds" style="text-align: left;">
<b class="is-size-5">
<span class="set_id">{{ i['set_num'] }}</span> <span class="set_name">{{ i['name'] }}</span>
</b>
</div>
<div class="column" style="text-align: left;">
<div class="is-size-5">
<b>Parts:</b>
<span class='set_parts'>{{ i['num_parts'] }}</span>
</div>
</div>
</div>
<div class="columns" style="">
<div class="column is-one-third">
<figure class="image is-4by3">
<a href="/{{ i['set_num'] }}">
<img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i['set_num'] }}/cover.jpg" alt="Image">
</a>
</figure>
</div>
<div class="card-content" style="padding:0;margin: 0 auto;height:100%; max-height:inherit;display: flex;flex-direction: column;">
<div style="">
<b class="is-size-5" style="width: 100%;">
<span class="set_id">{{ i['set_num'] }}</span> <span class="set_name">{{ i['name'] }}</span>
</b>
<p class="is-size-7">
{{ i['theme_id'] }} (<span class='set_year'>{{ i['year'] }}</span>)
</p>
</div>
<span style="display:block; height: 10px;"></span>
<div style="display: flex;flex-direction: column;margin-top:auto;">
<div class="is-size-6" style="margin:auto auto 0 0;">
<b>Parts:</b>
<span class='set_parts'>{{ i['num_parts'] }}</span>
</div>
<span style="display:block; height: 10px;"></span>
{% for j in json_file[i['set_num']]['unit'] %}
<div class="column is-one-thid" style="border: 1px blue dashed;">
<p>
{{ j }}
</p>
<div class="is-size-7" >
<label class="checkbox" >
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
@ -181,9 +185,7 @@
</div>
</div>
</div>
{% endfor %}
<footer class="card-footer" style="">
<p class="card-footer-item">
@ -200,10 +202,11 @@
</footer>
</div>
</div>
</div>
{% endfor %}
</div>
</center>
<script>
function searchFunction() {
var input, filter, gridContainer, gridItems, i, txtValue;
@ -256,6 +259,7 @@ function sortFunction() {
var sortOrder = 'asc';
function dynamicSort(className) {
console.log(className);
var gridContainer, gridItems, sortedItems, i;
gridContainer = document.getElementById('gridContainer');
gridItems = gridContainer.getElementsByClassName('grid-item');
@ -348,7 +352,6 @@ $.ajax({
});
});
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('toggleButton');
let isHidden = true; // Initially, only show checked grid items
@ -381,6 +384,38 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('toggleButton2');
let isHidden = true; // Initially, only show checked grid items
// Initialize visibility based on isHidden
updateVisibility();
toggleButton.addEventListener('click', function() {
// Toggle visibility and update grid items
isHidden = !isHidden;
updateVisibility();
});
function updateVisibility() {
// Get all grid items
const gridItems = document.querySelectorAll('.grid-item');
// Iterate over each grid item
gridItems.forEach(function(item) {
// Check if the corresponding checkbox is checked
const checkbox = item.querySelector('.s_check');
if (isHidden || (checkbox && checkbox.checked)) {
// Show the grid item if it's hidden or the checkbox is checked
item.style.display = 'block';
} else {
// Hide the grid item if the checkbox is not checked
item.style.display = 'none';
}
});
}
});
</script>
</body>