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

moved code to components for grid/cards added stickyfilter.astro

Browse Source
This commit is contained in:
zach
2026-02-17 07:44:41 -05:00
parent 6aa98d696f
commit 6824d224c0
5 changed files with 22 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/_bootstrap.scss
View File

@@ -31,7 +31,7 @@
// @import 'bootstrap/scss/forms'; // @import 'bootstrap/scss/forms';
@import 'bootstrap/scss/grid'; @import 'bootstrap/scss/grid';
// @import 'bootstrap/scss/list-group'; // @import 'bootstrap/scss/list-group';
// @import 'bootstrap/scss/modal'; @import 'bootstrap/scss/modal';
// @import 'bootstrap/scss/navbar'; // @import 'bootstrap/scss/navbar';
// @import 'bootstrap/scss/offcanvas'; // @import 'bootstrap/scss/offcanvas';
// @import 'bootstrap/scss/pagination'; // @import 'bootstrap/scss/pagination';

11
src/assets/css/main.scss
View File

@@ -5,9 +5,16 @@
opacity: .87; opacity: .87;
} }
.sticky {
background-color: hsl(195, 4%, 22%);
position: sticky;
z-index: 1000;
top: 0;
}
.rarity-icon svg { .rarity-icon svg {
height: 14.5px; height: .9rem;
width: auto; line-height: .9rem;
display: inline-block; display: inline-block;
} }

6
src/components/RarityIcon.astro
View File

@@ -26,10 +26,10 @@ const rarityMap = {
"Double Rare": doubleRare, "Double Rare": doubleRare,
"Promo": promo, "Promo": promo,
"Special Illustration Rare": specialIllusRare, "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] ?? "";
--- ---
<span class="rarity-icon h-100" set:html={svg}></span> <div class="rarity-icon" set:html={svg}></div>

1
src/layouts/Layout.astro
View File

@@ -6,7 +6,6 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" as="style" />
<title>Rigid's app thing</title> <title>Rigid's app thing</title>
</head> </head>
<body> <body>

62
src/pages/pokemon.astro
View File

@@ -1,61 +1,17 @@
--- ---
import Layout from '../layouts/Main.astro'; import Layout from '../layouts/Main.astro';
import RarityIcon from "../components/RarityIcon.astro"; import CardGrid from "../components/CardGrid.astro";
import Card from "../components/Card.astro";
//import { eq } from 'drizzle-orm'; import StickyFilter from '../components/StickyFilter.astro';
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"];
--- ---
<Layout> <Layout>
<StickyFilter />
<div class="container"> <div class="container">
<h1 class="my-5">Rigid's app thing</h1> <h1 class="my-5">Rigid's app thing</h1>
<div class="row"> <CardGrid>
<div class="col-sm-12 col-md-3"> <Card slot="Card"></Card>
<div class="h5">Inventory management placeholder</div> </CardGrid>
</div>
<div class="col-sm-12 col-md-9">
<div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
{pokemon.map((card) => (
<div class="col">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
<div class="col-auto h6 my-0">{card.productName}</div>
<div class="d-flex justify-content-between">
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>
<div class="row row-cols-5 gx-1 mt-1">
{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) => (
<div class="col p price-label">
{price.condition.split(' ').map((w) => w[0]).join('')}
<br />${price.marketPrice}
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
</div> </div>
</Layout> </div>
</Layout>