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

moved facets to offcanvas, added button to search bar to open and stylized

Browse Source
This commit is contained in:
zach
2026-02-28 20:47:32 -05:00
parent 89a670523b
commit bfcbab2fd4
9 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/partials/card-modal.astro
View File

@@ -66,6 +66,7 @@ const conditionAttributes = (price: any) => {
const current = price?.marketPrice;
const low = price?.lowestPrice;
const high = price?.highestPrice;
const median = price?.medianPrice;
if (current === null || low === null || high === null) return "—";
@@ -73,8 +74,8 @@ const conditionAttributes = (price: any) => {
if (range <= 0) return "Low";
const position = (Number(current) - Number(low)) / range;
if (position > 0.75) return "High";
if (position > 0.46) return "Medium";
if (position > 0.76) return "High";
if (position > 0.49) return "Medium";
return "Low";
})();
@@ -103,8 +104,10 @@ const ebaySearchUrl = (card: any) => {
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content">
<div class="modal-header border-0">
<div class="container-fluid">
<span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{card?.variant}</span>
<div class="container-fluid row align-items-center">
<div class="h4 card-title pe-2 col-sm-12 col-md-auto mb-sm-1">{card?.productName}</div>
<div class="text-secondary border-md-start col-auto">{card?.number}</div>
<div class="text-secondary col-auto">{card?.variant}</div>
</div>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
@@ -113,9 +116,9 @@ const ebaySearchUrl = (card: any) => {
<div class="card mb-2 border-0">
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<p class="text-secondary">{card?.set?.setName}</p>
<div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="position-relative mt-1"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="d-flex flex-row justify-content-between mt-2">
<div class="p text-secondary">{card?.set?.setName}</div>
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
</div>
</div>