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

12
src/pages/partials/cards.astro
View File

@@ -122,21 +122,21 @@ const facets = searchResults.results.slice(1).map((result: any) => {
<div id="facetContainer" hx-swap-oob="true">
<div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
<button type="reset" form="" class="btn btn-secondary btn-sm me-2">Clear</button>
<button type="submit" form="searchform" class="btn btn-secondary btn-sm">Apply Filters</button>
<button type="reset" data-bs-dismiss="offcanvas" class="btn btn-danger me-2">Clear</button>
<button type="submit" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-success">Apply Filters</button>
</div>
{facets.map((facet) => (
<div class="mt-2 mb-4 facet-group row align-items-center justify-content-between">
<div class="h6 m-0 col-auto">{facetNames(facet.field_name)}</div>
<div class="fs-5 m-0 col-auto pb-1 border-bottom border-light-subtle">{facetNames(facet.field_name)}</div>
{(facet.counts.length > 20) &&
<input class="facet-filter form-control col-auto me-3" type="text" id={`filter_${facet.field_name}`} placeholder="Search..." />
}
<div class="facet-list col-11 mt-2">
{facet.counts.map((count:any) => (
<div class="facet-item form-check" data-facet-value={count.value.toLowerCase()}>
<label class="form-check-label">
<div class="facet-item form-check form-switch" data-facet-value={count.value.toLowerCase()}>
<label class="form-check-label fs-7">
<input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
{count.value} ({count.count})
{count.value} <span class="badge text-bg-light align-baseline">{count.count}</span>
</label>
</div>
))}