From bfcbab2fd4695a6f664d9795fa3731cfe11b4aff Mon Sep 17 00:00:00 2001 From: zach Date: Sat, 28 Feb 2026 20:47:32 -0500 Subject: [PATCH] moved facets to offcanvas, added button to search bar to open and stylized --- src/assets/css/_bootstrap.scss | 2 +- src/assets/css/main.scss | 17 ++++++++++++++-- src/components/CardGrid.astro | 31 ++++++++++++++++++----------- src/components/Search.astro | 9 +++++++-- src/layouts/Main.astro | 2 +- src/pages/index.astro | 4 ++-- src/pages/partials/card-modal.astro | 15 ++++++++------ src/pages/partials/cards.astro | 16 ++++++++------- src/pages/pokemon.astro | 1 - 9 files changed, 63 insertions(+), 34 deletions(-) diff --git a/src/assets/css/_bootstrap.scss b/src/assets/css/_bootstrap.scss index 82f9ff7..adc82d3 100644 --- a/src/assets/css/_bootstrap.scss +++ b/src/assets/css/_bootstrap.scss @@ -33,7 +33,7 @@ // @import 'bootstrap/scss/list-group'; @import 'bootstrap/scss/modal'; @import 'bootstrap/scss/navbar'; -// @import 'bootstrap/scss/offcanvas'; +@import 'bootstrap/scss/offcanvas'; // @import 'bootstrap/scss/pagination'; // @import 'bootstrap/scss/placeholders'; // @import 'bootstrap/scss/popover'; diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 41f2d50..7adcc4b 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -57,7 +57,7 @@ Navbar & Icons -------------------------------------------------- */ .navbar { - background-color: hsl(358, 71%, 48%) !important; + background-color: var(--bs-danger) !important; } .sticky-top { @@ -245,6 +245,7 @@ $tiers: ( .rarity-icon-large svg, .set-icon svg { width: 2.5rem; + z-index: 999; } .rarity-icon-large svg, @@ -252,6 +253,18 @@ $tiers: ( margin-bottom: -0.25rem; } +.filter-icon svg { + width: 2rem; + fill: rgba(255,255,255,0.87); + stroke: rgba(255,255,255,0.87); +} + +.search-button { + width: 2rem; + fill: rgba(255,255,255,0.87); + stroke: rgba(255,255,255,0.87); +} + .energy-icon svg { margin-top: -0.25rem; margin-right: -0.25rem; @@ -374,7 +387,7 @@ $tiers: ( } .facet-list { - max-height: 240px; + max-height: 185px; overflow-y: auto; } diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro index 1417d69..56c3bdd 100644 --- a/src/components/CardGrid.astro +++ b/src/components/CardGrid.astro @@ -1,20 +1,27 @@ --- --- - -
-
-
Inventory management placeholder
+
+
+
Inventory management placeholder
+
+
+
Filters
+ +
+
-
-
-
- + \ No newline at end of file diff --git a/src/components/Search.astro b/src/components/Search.astro index eea8589..952e5b4 100644 --- a/src/components/Search.astro +++ b/src/components/Search.astro @@ -25,9 +25,14 @@ import { SignedIn } from "@clerk/astro/components"; diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro index f5a2a20..26a3ef1 100644 --- a/src/layouts/Main.astro +++ b/src/layouts/Main.astro @@ -46,7 +46,7 @@ import '/src/assets/css/main.scss'; // import 'bootstrap/js/dist/collapse'; // import 'bootstrap/js/dist/dropdown'; import 'bootstrap/js/dist/modal'; - // import 'bootstrap/js/dist/offcanvas'; + import 'bootstrap/js/dist/offcanvas'; // import 'bootstrap/js/dist/popover'; // import 'bootstrap/js/dist/scrollspy'; import 'bootstrap/js/dist/tab'; diff --git a/src/pages/index.astro b/src/pages/index.astro index d5445be..5e99e63 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -16,7 +16,7 @@ import { Waitlist as WaitlistAstro } from '@clerk/astro/components'

Welcome!

- This single-page web applictation is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.

+ This single-page web application is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.

If you would like to join the waitlist, please enter your email address. You will receive an email with instructions on how to access the app when it becomes available. @@ -25,7 +25,7 @@ import { Waitlist as WaitlistAstro } from '@clerk/astro/components' If you aren't interested in joining the waitlist, that is okay too! Feel free to play "Who's that Pokémon?" with the random Pokémon generator here. Refresh the page to see a new Pokémon!

-
+
diff --git a/src/pages/partials/card-modal.astro b/src/pages/partials/card-modal.astro index 25c93af..42e0a10 100644 --- a/src/pages/partials/card-modal.astro +++ b/src/pages/partials/card-modal.astro @@ -66,6 +66,7 @@ const conditionAttributes = (price: any) => { const current = price?.marketPrice; const low = price?.lowestPrice; const high = price?.highestPrice; + const median = price?.medianPrice; if (current === null || low === null || high === null) return "—"; @@ -73,8 +74,8 @@ const conditionAttributes = (price: any) => { if (range <= 0) return "Low"; const position = (Number(current) - Number(low)) / range; - if (position > 0.75) return "High"; - if (position > 0.46) return "Medium"; + if (position > 0.76) return "High"; + if (position > 0.49) return "Medium"; return "Low"; })(); @@ -103,8 +104,10 @@ const ebaySearchUrl = (card: any) => {
-
- {card?.productName}{card?.number}{card?.variant} +
+
{card?.productName}
+
{card?.number}
+
{card?.variant}
@@ -113,9 +116,9 @@ const ebaySearchUrl = (card: any) => {
-

{card?.set?.setName}

-
{card?.productName}
+
{card?.productName}
+
{card?.set?.setName}
Illustrator: {card?.Artist}
diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro index 7b1bb47..ce3ca06 100644 --- a/src/pages/partials/cards.astro +++ b/src/pages/partials/cards.astro @@ -123,16 +123,19 @@ if (start === 0) { {(start === 0) &&
- +
+ + +
{facets.map((facet) => ( -
-
{facetNames(facet.field_name)}
+
+
{facetNames(facet.field_name)}
{(facet.counts.length > 20) && - + } -
+
{facet.counts.map((count) => ( -
+
))} -