From 6824d224c0b6abc08c53fcbd232b634629d54972 Mon Sep 17 00:00:00 2001 From: zach Date: Tue, 17 Feb 2026 07:44:41 -0500 Subject: [PATCH] moved code to components for grid/cards added stickyfilter.astro --- src/assets/css/_bootstrap.scss | 2 +- src/assets/css/main.scss | 11 ++++-- src/components/RarityIcon.astro | 6 ++-- src/layouts/Layout.astro | 1 - src/pages/pokemon.astro | 62 +++++---------------------------- 5 files changed, 22 insertions(+), 60 deletions(-) diff --git a/src/assets/css/_bootstrap.scss b/src/assets/css/_bootstrap.scss index d251a04..f4eef0f 100644 --- a/src/assets/css/_bootstrap.scss +++ b/src/assets/css/_bootstrap.scss @@ -31,7 +31,7 @@ // @import 'bootstrap/scss/forms'; @import 'bootstrap/scss/grid'; // @import 'bootstrap/scss/list-group'; -// @import 'bootstrap/scss/modal'; +@import 'bootstrap/scss/modal'; // @import 'bootstrap/scss/navbar'; // @import 'bootstrap/scss/offcanvas'; // @import 'bootstrap/scss/pagination'; diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 8046131..328e52a 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -5,9 +5,16 @@ opacity: .87; } +.sticky { + background-color: hsl(195, 4%, 22%); + position: sticky; + z-index: 1000; + top: 0; +} + .rarity-icon svg { - height: 14.5px; - width: auto; + height: .9rem; + line-height: .9rem; display: inline-block; } diff --git a/src/components/RarityIcon.astro b/src/components/RarityIcon.astro index bc39bae..63cb976 100644 --- a/src/components/RarityIcon.astro +++ b/src/components/RarityIcon.astro @@ -26,10 +26,10 @@ const rarityMap = { "Double Rare": doubleRare, "Promo": promo, "Special Illustration Rare": specialIllusRare, - "Ultra Rare": ultrarare, // Ultra Rare and Holo Rare use the same icon + "Ultra Rare": ultrarare, }; -const svg = rarityMap[rarity] ?? ""; +const svg = rarityMap[rarity as keyof typeof rarityMap] ?? ""; --- - +
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 478d8ab..0762abb 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -6,7 +6,6 @@ - Rigid's app thing diff --git a/src/pages/pokemon.astro b/src/pages/pokemon.astro index 6a2e8ec..182dd07 100644 --- a/src/pages/pokemon.astro +++ b/src/pages/pokemon.astro @@ -1,61 +1,17 @@ --- import Layout from '../layouts/Main.astro'; -import RarityIcon from "../components/RarityIcon.astro"; - -//import { eq } from 'drizzle-orm'; -import { db } from '../db'; -//import * as schema from '../db/schema.ts'; - -// Get some sample Pokemon data from the database -//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256); -const pokemon = await db.query.cards.findMany({ - where: { productLineName: "pokemon" }, - limit: 320, - with: { - prices: true, - } -}); - -const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"]; +import CardGrid from "../components/CardGrid.astro"; +import Card from "../components/Card.astro"; +import StickyFilter from '../components/StickyFilter.astro'; --- +

Rigid's app thing

-
-
-
Inventory management placeholder
-
-
-
- {pokemon.map((card) => ( -
- {card.productName} -
{card.productName}
-
-
{card.number}
- -
-
- {card.prices - .slice() - .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition)) - .filter((price, index, arr) => - arr.findIndex(p => p.condition === price.condition) === index - ) - .map((price) => ( -
- {price.condition.split(' ').map((w) => w[0]).join('')} -
${price.marketPrice} -
- ))} -
-
- ))} - -
-
-
- + + +
- + + \ No newline at end of file