2024-03-03 12:43:35 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Responsive Grid</title>
|
2024-03-03 14:30:52 +01:00
|
|
|
<!-- 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">
|
|
|
|
|
|
2024-03-03 12:43:35 +01:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-container {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
2024-03-03 13:46:34 +01:00
|
|
|
gap: 10px;
|
|
|
|
|
padding: 10px;
|
2024-03-03 12:43:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-item {
|
|
|
|
|
border: 1px solid #ccc;
|
2024-03-03 13:46:34 +01:00
|
|
|
padding: 10px;
|
2024-03-03 12:43:35 +01:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-item img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2024-03-03 14:16:12 +01:00
|
|
|
/* Style to display paragraphs inline */
|
|
|
|
|
.grid-item p {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 0; /* Remove default margin */
|
|
|
|
|
}
|
2024-03-03 14:30:52 +01:00
|
|
|
.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;
|
|
|
|
|
}
|
2024-03-03 12:43:35 +01:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-03-03 14:16:12 +01:00
|
|
|
<div class="search-container">
|
|
|
|
|
<input type="text" id="searchInput" onkeyup="searchFunction()" placeholder="Search...">
|
|
|
|
|
</select>
|
2024-03-03 14:30:52 +01:00
|
|
|
<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>
|
2024-03-03 14:16:12 +01:00
|
|
|
<!-- Add more buttons for other text values if needed -->
|
|
|
|
|
</div>
|
2024-03-03 12:43:35 +01:00
|
|
|
|
2024-03-03 14:16:12 +01:00
|
|
|
<div class="grid-container" id="gridContainer">
|
2024-03-03 12:43:35 +01:00
|
|
|
|
|
|
|
|
{% for i in set_list %}
|
|
|
|
|
|
|
|
|
|
<div class="grid-item">
|
2024-03-03 13:46:34 +01:00
|
|
|
<center><img src="/static/sets/{{ i['set_num'] }}/cover.jpg" style="height: 150px; width: auto;" alt="Image"></center>
|
2024-03-03 14:16:12 +01:00
|
|
|
<h2 class='set_name'>{{ i['name'] }}</h2>
|
|
|
|
|
<p><b>Set:</b></p><p class='set_id'>{{ i['set_num'] }}</p>
|
2024-03-03 13:46:34 +01:00
|
|
|
<br>
|
2024-03-03 14:16:12 +01:00
|
|
|
<p><b>Year: </b></p><p class='set_year'>{{ i['year'] }}</p>
|
2024-03-03 13:46:34 +01:00
|
|
|
<br>
|
2024-03-03 14:16:12 +01:00
|
|
|
<p><b>Parts:</b></p><p class='set_parts'>{{ i['num_parts'] }}</p>
|
2024-03-03 13:46:34 +01:00
|
|
|
<br>
|
2024-03-03 14:16:12 +01:00
|
|
|
<p><b>Inventory:</b> <a href="/{{ i['set_num'] }}">Link</a></p>
|
2024-03-03 12:43:35 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
</div>
|
2024-03-03 14:16:12 +01:00
|
|
|
<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();
|
|
|
|
|
|
2024-03-03 14:30:52 +01:00
|
|
|
// Remove digits after hyphen if present
|
|
|
|
|
textA = textA.replace(/-\d+$/, '').trim();
|
|
|
|
|
textB = textB.replace(/-\d+$/, '').trim();
|
2024-03-03 14:16:12 +01:00
|
|
|
// 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>
|
2024-03-03 12:43:35 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
