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

setup (but did not apply) holofoil styling and added new seticon for perfect order set

Browse Source
This commit is contained in:
Zach Harding
2026-03-18 13:31:56 -04:00
parent b06e24d382
commit bc99be51ea
37 changed files with 2827 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -190,13 +190,26 @@ const altSearchUrl = (card: any) => {
<!-- Card image column -->
<div class="col-sm-12 col-md-3">
<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'});"
/>
<!-- card-image-wrap gives the modal image shimmer effects
without the hover lift/scale that image-grow has in main.scss -->
<div
class="card-image-wrap rounded-4"
data-energy={card?.energyType}
data-rarity={card?.rarityName}
data-variant={card?.variant}
data-name={card?.productName}
>
<img
src={`/cards/${card?.productId}.jpg`}
class="card-image w-100 img-fluid rounded-4"
alt={card?.productName}
crossorigin="anonymous"
onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"
/>
</div>
<span class="position-absolute top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span>
<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>
@@ -266,9 +279,9 @@ const altSearchUrl = (card: any) => {
</div>
<div class={`alert rounded p-2 flex-fill d-flex flex-column mb-0 ${attributes?.volatilityClass}`}>
<h6 class="mb-auto d-flex justify-content-between align-items-start">
<span>Volatility</span>
<span class="me-1">Volatility</span>
<span
class="volatility-info"
class="volatility-info float-end mt-0"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-container="body"