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

removed uneeded bg file and cleaned up card layout for breakpoints sm, md, lg, xl

Browse Source
This commit is contained in:
zach
2026-02-19 07:55:18 -05:00
parent 4cd670c9b8
commit 2ef9d3761d
6 changed files with 121 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Card.astro
View File

@@ -40,13 +40,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
{pokemon.map((card) => (
<div class="col">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
<div class="h6 my-0">{card.productName}</div>
<div class="d-flex justify-content-between align-items-end">
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>
<div class="copy-small d-none d-lg-block">{card.set?.setName}</div>
<div class="row row-cols-5 gx-1">
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
.slice()
.sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
@@ -54,11 +48,17 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
arr.findIndex(p => p.condition === price.condition) === index
)
.map((price) => (
<div class="col p price-label">
<div class="col price-label ps-xxl-2 ps-1">
{price.condition.split(' ').map((w) => w[0]).join('')}
<br />${formatPrice(price.marketPrice)}
</div>
))}
</div>
<div class="h5 my-0">{card.productName}</div>
<div class="d-flex flex-row lh-1">
<div class="copy-small d-none d-lg-flex flex-grow-1">{card.set?.setCode}</div>
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>
</div>
))}

2
src/components/CardGrid.astro
View File

@@ -7,7 +7,7 @@
<div class="h5 d-none">Inventory management placeholder</div>
</div>
<div class="col-sm-12 col-md-9 mt-0">
<div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">
<div class="row g-xxl-4 g-xl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">
<slot name="Card">
</div>
</div>

2
src/components/RarityIcon.astro
View File

@@ -44,4 +44,4 @@ const rarityMap = {
const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
---
<div class="rarity-icon" set:html={svg}></div>
<div class="rarity-icon ps-2" set:html={svg}></div>

4
src/components/StickyFilter.astro
View File

@@ -8,10 +8,10 @@ const { query } = Astro.props;
<form method="GET">
<div class="d-flex justify-content-between">
<div class="my-2 flex-grow-1 me-2">
<input type="text" name="q" class="form-control w-100" placeholder="Search cards..." value={query} />
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
</div>
<div class="my-2">
<input type="submit" class="btn btn-primary w-100" value="Search" />
<input type="submit" class="btn btn-primary w-100 search-button" value="Search" />
</div>
</div>
</form>