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

stylized filter offcanvas and added placeholder for active facets, added back to top button component

Browse Source
This commit is contained in:
zach
2026-03-01 20:04:35 -05:00
parent 752a4880e3
commit 516c223322
6 changed files with 96 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/CardGrid.astro
View File

@@ -1,12 +1,12 @@
---
import BackToTop from "./BackToTop.astro"
---
<div class="row mb-4">
<div class="col-md-3 display-sm-none">
<div class="h5 d-none">Inventory management placeholder</div>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Filters</h5>
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Filter by:</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body px-3 pt-0">
@@ -15,6 +15,15 @@
</div>
</div>
<div class="col-sm-12 col-md-9 mt-0">
<div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small">
<span class="me-1">Filtered by:</span>
<ul class="list-group list-group-horizontal">
<li class="list-group-item border-0">Filter 1</li>
<li class="list-group-item border-0">Filter 2</li>
<li class="list-group-item border-0">Filter 3</li>
</ul>
<span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters"></button></span>
</div>
<div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5">
</div>
<div id="notfound"></div>
@@ -25,4 +34,5 @@
<div class="modal-content">
</div>
</div>
</div>
</div>
<BackToTop>