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

moved facets to offcanvas, added button to search bar to open and stylized

Browse Source
This commit is contained in:
zach
2026-02-28 20:47:32 -05:00
parent 89a670523b
commit bfcbab2fd4
9 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -123,16 +123,19 @@ if (start === 0) {
{(start === 0) &&
<div id="facetContainer" hx-swap-oob="true">
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
<div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
<button type="" 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>
</div>
{facets.map((facet) => (
<div class="mb-4 facet-group">
<div class="h5">{facetNames(facet.field_name)}</div>
<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>
{(facet.counts.length > 20) &&
<input class="facet-filter" type="text" id={`filter_${facet.field_name}`} placeholder="search..." />
<input class="facet-filter form-control col-auto me-3" type="text" id={`filter_${facet.field_name}`} placeholder="Search..." />
}
<div class="facet-list">
<div class="facet-list col-11 mt-2">
{facet.counts.map((count) => (
<div class="facet-item" data-facet-value={count.value.toLowerCase()}>
<div class="facet-item form-check" data-facet-value={count.value.toLowerCase()}>
<label class="form-check-label">
<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})
@@ -142,7 +145,6 @@ if (start === 0) {
</div>
</div>
))}
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
</div>
<script define:vars={{ totalHits, filters, facets }} is:inline>