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

more card styling changes, moved card and cardgrid to componenets, added placeholder for filters/search

Browse Source
This commit is contained in:
zach
2026-02-16 18:06:22 -05:00
parent e4e4e6607a
commit 6aa98d696f
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,19 @@
@import '_bootstrap'; @import '_bootstrap';
.copy-small { .copy-small {
font-size: 0.8rem; font-size: 0.9rem;
opacity: .87;
} }
.rarity-icon svg { .rarity-icon svg {
height: 16px; height: 14.5px;
width: auto; width: auto;
display: inline-block; display: inline-block;
} }
.price-label { .price-label {
color: hsl(122, 39%, 49%); color: hsl(122, 39%, 49%);
font-size: 0.825rem;
} }
.price-label:nth-of-type(n+2) { .price-label:nth-of-type(n+2) {

22
src/pages/pokemon.astro
View File

@@ -10,7 +10,7 @@ import { db } from '../db';
//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256); //const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
const pokemon = await db.query.cards.findMany({ const pokemon = await db.query.cards.findMany({
where: { productLineName: "pokemon" }, where: { productLineName: "pokemon" },
limit: 32, limit: 320,
with: { with: {
prices: true, prices: true,
} }
@@ -23,24 +23,20 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
<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"> <div class="row">
<div class="col-sm-12 col-md-2"> <div class="col-sm-12 col-md-3">
<div class="h5">Inventory management placeholder</div> <div class="h5">Inventory management placeholder</div>
</div> </div>
<div class="col-sm-12 col-md-10"> <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"> <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
{pokemon.map((card) => ( {pokemon.map((card) => (
<div class="col"> <div class="col">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" /> <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
<div class="row row-cols-2"> <div class="col-auto h6 my-0">{card.productName}</div>
<div class="col-auto h6">{card.productName}</div> <div class="d-flex justify-content-between">
<div class="col-auto ms-auto copy-small">{card.number}</div> <div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div> </div>
<div class="row justify-content-end"> <div class="row row-cols-5 gx-1 mt-1">
<div class="col-auto ms-auto">
<RarityIcon rarity={card.rarityName} />
</div>
</div>
<div class="row row-cols-5 gx-0 mt-1">
{card.prices {card.prices
.slice() .slice()
.sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition)) .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
@@ -48,7 +44,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
arr.findIndex(p => p.condition === price.condition) === index arr.findIndex(p => p.condition === price.condition) === index
) )
.map((price) => ( .map((price) => (
<div class="col copy-small p price-label"> <div class="col p price-label">
{price.condition.split(' ').map((w) => w[0]).join('')} {price.condition.split(' ').map((w) => w[0]).join('')}
<br />${price.marketPrice} <br />${price.marketPrice}
</div> </div>