<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Overview</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
}
.grid-item {
display: flex;
flex-direction: column; /* Arrange content vertically */
}
.card {
height: 100%;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
padding-bottom:40px; /* Height of the footer */
}
/* Adjust height for smaller screens */
@media (max-width: 768px) {
.card {
height: auto; /* Let the height adjust dynamically */
}
.grid-item {
height: auto; /* Let the height adjust dynamically */
overflow: visible; /* Allow content to overflow if necessary */
}
}
.grid-item img {
max-width: 100%;
height: auto;
display: block;
}
.card p {
margin: 0; /* Remove default margin */
}
.card-footer {
position:absolute;
bottom:0;
width:90%;
height:40px; /* Height of the footer */
}
.button {
background-color: black;
border-color: black;
}
.button.button-clear,
.button.button-outline {
background-color: transparent;
color: black;
}
.button.button-clear {
border-color: transparent;
}
.search-container {
padding: 10px;
}
</style>
</head>
<body>
<div class="search-container">
<input type="text" id="searchInput" onkeyup="searchFunction()" placeholder="Search...">
</select>
<center>
<button class="button button-outline" onclick="dynamicSort('set_id')">Sort by ID</button>
<button class="button button-outline" onclick="dynamicSort('set_year')">Sort by Year</button>
<button class="button button-outline" onclick="dynamicSort('set_parts')">Sort by Parts</button>
<button class="button button-outline" onclick="dynamicSort('set_name')">Sort by Name</button>
</center>
<!-- Add more buttons for other text values if needed -->
</div>
<div class="grid-container" id="gridContainer">
{% for i in set_list %}
<div class="grid-item">
<div class="card">
<div class="card-image">
<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="wrapper" style="min-height: 120px;display:flex;flex-direction:column;">
<div class="card-content" style="display: flex;flex-direction: column;flex: 1;">
<p class="title">
<span class="set_id">{{ i['set_num'] }}</span> <span class="set_name">{{ i['name'] }}</span>
</p>
<p class="subtitle"style="margin-bottom:auto;">
Theme - <span class='set_year'>{{ i['year'] }}</span>
</p>
<div style="margin:auto auto 0 0;">
<b>Parts:</b>
<span class='set_parts'>{{ i['num_parts'] }}</span>
</div>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
<a style="color: #363636;" href="/{{ i['set_num'] }}">Inventory</a>
</span>
</p>
<p class="card-footer-item">
<span>
<a style="color: #363636;" href="/{{ i['set_num'] }}">Instructions</a>
</span>
</p>
</footer>
</div>
</div>
</div>
{% endfor %}
</div>
<script>
function searchFunction() {
var input, filter, gridContainer, gridItems, i, txtValue;
input = document.getElementById('searchInput');
filter = input.value.toUpperCase();
gridContainer = document.getElementById('gridContainer');
gridItems = gridContainer.getElementsByClassName('grid-item');
for (i = 0; i < gridItems.length; i++) {
txtValue = gridItems[i].textContent || gridItems[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
gridItems[i].style.display = "";
} else {
gridItems[i].style.display = "none";
}
}
}
function sortFunction() {
var sortSelect, sortValue, gridContainer, gridItems, sortedItems, i;
sortSelect = document.getElementById('sortSelect');
sortValue = sortSelect.value;
gridContainer = document.getElementById('gridContainer');
gridItems = gridContainer.getElementsByClassName('grid-item');
sortedItems = Array.from(gridItems);
if (sortValue === 'alphabetical') {
sortedItems.sort(function(a, b) {
var textA = a.textContent.trim().toUpperCase();
var textB = b.textContent.trim().toUpperCase();
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
});
}
// Remove existing items
while (gridContainer.firstChild) {
gridContainer.removeChild(gridContainer.firstChild);
}
// Append sorted items
for (i = 0; i < sortedItems.length; i++) {
gridContainer.appendChild(sortedItems[i]);
}
}
var sortOrder = 'asc';
function dynamicSort(className) {
var gridContainer, gridItems, sortedItems, i;
gridContainer = document.getElementById('gridContainer');
gridItems = gridContainer.getElementsByClassName('grid-item');
sortedItems = Array.from(gridItems);
sortedItems.sort(function(a, b) {
var textA = a.getElementsByClassName(className)[0].textContent.trim();
var textB = b.getElementsByClassName(className)[0].textContent.trim();
// Remove digits after hyphen if present
textA = textA.replace(/-\d+$/, '').trim();
textB = textB.replace(/-\d+$/, '').trim();
// If text1 is an integer, parse it as a number
if (!isNaN(textA) && !isNaN(textB)) {
var result = parseInt(textA) - parseInt(textB);
// Toggle result based on current sort order
return sortOrder === 'asc' ? result : -result;
}
// If text1 is not an integer, treat it as a string
else {
textA = textA.toUpperCase();
textB = textB.toUpperCase();
var result = textA.localeCompare(textB);
// Toggle result based on current sort order
return sortOrder === 'asc' ? result : -result;
}
});
// Reverse sort order for next click
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
// Remove existing items
while (gridContainer.firstChild) {
gridContainer.removeChild(gridContainer.firstChild);
}
// Append sorted items
for (i = 0; i < sortedItems.length; i++) {
gridContainer.appendChild(sortedItems[i]);
}
}
</script>
</body>
</html>