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>
))}