cleaned up css and made sorted active filters to the top

This commit is contained in:
zach
2026-03-09 14:25:18 -04:00
parent 68bed6ff8e
commit 7482cb9e9c
3 changed files with 145 additions and 209 deletions

View File

@@ -122,7 +122,19 @@ const facetNames = (name:string) => {
}
const facets = searchResults.results.slice(1).map((result: any) => {
return result.facet_counts[0];
const facet = result.facet_counts[0];
if (!facet) return facet;
// Sort: checked items first, then alphabetically
facet.counts = facet.counts.sort((a: any, b: any) => {
const aChecked = filters[facet.field_name]?.includes(a.value) ?? false;
const bChecked = filters[facet.field_name]?.includes(b.value) ?? false;
if (aChecked && !bChecked) return -1;
if (!aChecked && bChecked) return 1;
return a.value.localeCompare(b.value);
});
return facet;
});
---
@@ -234,11 +246,11 @@ const facets = searchResults.results.slice(1).map((result: any) => {
</div>
<div class="h5 my-0">{card.productName}</div>
<div class="d-flex flex-row lh-1 mt-1 justify-content-between">
<div class="text-secondary flex-grow-1 d-none d-md-flex">{card.setName}</div>
<div class="text-secondary">{card.number}</div>
<div class="text-secondary flex-grow-1 d-none d-lg-flex">{card.setName}</div>
<div class="text-body-tertiary">{card.number}</div>
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
</div>
<div>{card.variant}</div><span class="d-none">{card.productId}</span>
<div class="text-body-tertiary">{card.variant}</div><span class="d-none">{card.productId}</span>
</div>
))}