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

rearranged sort and filter on mobile into a flex col instead of row

Browse Source
This commit is contained in:
Zach Harding
2026-03-17 10:35:02 -04:00
parent ee9f7a2561
commit f72d479c1d
2 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardGrid.astro
View File

@@ -15,7 +15,7 @@ import BackToTop from "./BackToTop.astro"
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-10 mt-0"> <div class="col-sm-12 col-md-10 mt-0">
<div class="d-flex flex-row align-items-center mb-2"> <div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-2 w-100 justify-content-start">
<div id="sortBy"></div> <div id="sortBy"></div>
<div id="totalResults"></div> <div id="totalResults"></div>
<div id="activeFilters"></div> <div id="activeFilters"></div>

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

@@ -178,37 +178,36 @@ const facets = searchResults.results.slice(1).map((result: any) => {
</div> </div>
))} ))}
</div> </div>
<div id="sortBy" class="mb-2 d-flex align-items-center justify-content-start small" hx-swap-oob="true"> <div id="sortBy" class="d-flex flex-fill align-items-center me-auto" hx-swap-oob="true">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-sm btn-dark dropdown-toggle small" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button> <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"> <ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item sort-option small" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li> <li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li>
<li><a class="dropdown-item sort-option small" href="#" data-sort="releaseDate:asc,number:asc" data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li> <li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:asc,number:asc" data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li>
<li><a class="dropdown-item sort-option small" href="#" data-sort="marketPrice:desc" data-label="Price: High to Low">Price: High to Low</a></li> <li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:desc" data-label="Price: High to Low">Price: High to Low</a></li>
<li><a class="dropdown-item sort-option small" href="#" data-sort="marketPrice:asc" data-label="Price: Low to High">Price: Low to High</a></li> <li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:asc" data-label="Price: Low to High">Price: Low to High</a></li>
<li><a class="dropdown-item sort-option small" href="#" data-sort="number:asc" data-label="Card Number: Ascending">Card Number: Ascending</a></li> <li><a class="dropdown-item sort-option" href="#" data-sort="number:asc" data-label="Card Number: Ascending">Card Number: Ascending</a></li>
<li><a class="dropdown-item sort-option small" href="#" data-sort="number:desc" data-label="Card Number: Descending">Card Number: Descending</a></li> <li><a class="dropdown-item sort-option" href="#" data-sort="number:desc" data-label="Card Number: Descending">Card Number: Descending</a></li>
</ul> </ul>
</div> </div>
<span id="sortLabel" class="ms-2 text-secondary">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span> <span id="sortLabel" class="ms-1 text-secondary small">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span>
</div> </div>
<div id="totalResults" class="mb-2 ms-5 text-secondary small" hx-swap-oob="true"> <div id="totalResults" class="d-flex text-secondary small d-none align-items-center" hx-swap-oob="true">
{totalHits} {totalHits === 1 ? ' result' : ' results'} {totalHits} {totalHits === 1 ? ' result' : ' results'}
</div> </div>
<div id="activeFilters" class="mb-2 d-flex align-items-center small ms-auto" hx-swap-oob="true"> <div id="activeFilters" class="d-flex small ms-auto align-items-center" hx-swap-oob="true">
{(Object.entries(filters).length > 0) && {(Object.entries(filters).length > 0) &&
<span class="me-1 small">Filtered by:</span> <span class="me-1 small">Filtered by:</span>
<ul class="list-group list-group-horizontal"> <ul class="list-group list-group-horizontal">
{Object.entries(filters).map(([filter, values]) => ( {Object.entries(filters).map(([filter, values]) => (
values.map((value) => ( values.map((value) => (
<li data-facet={filter} data-value={value} class="list-group-item small remove-filter">{value}</li> <li data-facet={filter} data-value={value} class="list-group-item small p-2 remove-filter">{value}</li>
)) ))
))} ))}
</ul> </ul>
<span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters" id="clear-all-filters"></button></span> <span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters" id="clear-all-filters"></button></span>
} }
</div> </div>
<script define:vars={{ totalHits, filters, facets }} is:inline> <script define:vars={{ totalHits, filters, facets }} is:inline>
// Filter the facet values to make things like Set easier to find // Filter the facet values to make things like Set easier to find