tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

added the mechanism for sort by, added total results and made it all look nice in one row

Browse Source
This commit is contained in:
zach
2026-03-16 14:39:55 -04:00
parent 2f17912949
commit ee9f7a2561
4 changed files with 116 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/CardGrid.astro
View File

@@ -16,18 +16,8 @@ import BackToTop from "./BackToTop.astro"
</div>
<div class="col-sm-12 col-md-10 mt-0">
<div class="d-flex flex-row align-items-center mb-2">
<div id="sortBy" class="mb-2 d-flex align-items-center justify-content-start small d-none">
<button class="btn btn-sm btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Price: High to Low</a></li>
<li><a class="dropdown-item" href="#">Price: Low to High</a></li>
<li><a class="dropdown-item" href="#">Set: Newest to Oldest</a></li>
<li><a class="dropdown-item" href="#">Set: Oldest to Newest</a></li>
<li><a class="dropdown-item" href="#">Card Number: Ascending</a></li>
<li><a class="dropdown-item" href="#">Card Number: Descending</a></li>
</ul>
<div id="totalResults"></div>
</div>
<div id="sortBy"></div>
<div id="totalResults"></div>
<div id="activeFilters"></div>
</div>
<div id="cardGrid" aria-live="polite" class="row g-xxl-3 g-2 row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-xxxl-5"></div>
@@ -57,6 +47,55 @@ import BackToTop from "./BackToTop.astro"
<script is:inline>
(function () {
// ── Sort dropdown ─────────────────────────────────────────────────────────
// Plain JS toggle — no dependency on Bootstrap's Dropdown JS initialising.
// Uses event delegation so it works after OOB swaps repopulate #sortBy.
document.addEventListener('click', (e) => {
const sortBy = document.getElementById('sortBy');
// Toggle the menu when the button is clicked
const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
if (btn) {
e.preventDefault();
e.stopPropagation();
const menu = btn.nextElementSibling;
menu.classList.toggle('show');
btn.setAttribute('aria-expanded', menu.classList.contains('show'));
return;
}
// Handle sort option selection
const opt = e.target.closest('#sortBy .sort-option');
if (opt) {
e.preventDefault();
const menu = opt.closest('.dropdown-menu');
const btn2 = menu?.previousElementSibling;
menu?.classList.remove('show');
if (btn2) btn2.setAttribute('aria-expanded', 'false');
const sortInput = document.getElementById('sortInput');
if (sortInput) sortInput.value = opt.dataset.sort;
document.getElementById('sortLabel').textContent = opt.dataset.label;
document.querySelectorAll('.sort-option').forEach(o => o.classList.remove('active'));
opt.classList.add('active');
const start = document.getElementById('start');
if (start) start.value = '0';
document.getElementById('searchform').dispatchEvent(
new Event('submit', { bubbles: true, cancelable: true })
);
return;
}
// Click outside — close any open sort menu
const menu = document.querySelector('#sortBy .dropdown-menu.show');
if (menu) {
menu.classList.remove('show');
const btn3 = menu.previousElementSibling;
if (btn3) btn3.setAttribute('aria-expanded', 'false');
}
});
// ── Global helpers ────────────────────────────────────────────────────────
window.copyImage = async function(img) {
try {
@@ -174,7 +213,6 @@ import BackToTop from "./BackToTop.astro"
}
// ── Fire card-modal:swapped so the partial's script can init the chart ────
// Deferred one rAF so the canvas has real dimensions before Chart.js measures it.
function initChartAfterSwap(modal) {
const canvas = modal.querySelector('#priceHistoryChart');
if (!canvas) return;