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

cleaned up css and made sorted active filters to the top

Browse Source
This commit is contained in:
zach
2026-03-09 14:25:18 -04:00
parent 68bed6ff8e
commit 7482cb9e9c
3 changed files with 145 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
/* -------------------------------------------------- /* --------------------------------------------------
Bootstrap overrides Bootstrap Overrides
-------------------------------------------------- */ -------------------------------------------------- */
$grid-breakpoints: ( $grid-breakpoints: (
@@ -21,22 +21,20 @@ $container-max-widths: (
xxxl: 1840px xxxl: 1840px
) !default; ) !default;
@import "_bootstrap"; @import "_bootstrap";
/* -------------------------------------------------- /* --------------------------------------------------
Root Variables Root Variables
-------------------------------------------------- */ -------------------------------------------------- */
:root { :root {
--total: 11; /* Number of items in the energy wheel */ --total: 11;
--radius: 40px; /* Circle radius */ --radius: 40px;
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* -------------------------------------------------- /* --------------------------------------------------
Layout Layout
-------------------------------------------------- */ -------------------------------------------------- */
@@ -71,15 +69,11 @@ html {
top: 50%; top: 50%;
left: 50%; left: 50%;
--angle: calc(360deg / var(--total) * var(--i)); --angle: calc(360deg / var(--total) * var(--i));
transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
transform: &:first-of-type {
rotate(var(--angle))
translateX(var(--radius))
rotate(calc(-1 * var(--angle)));
}
.energy-wheel-item:first-of-type {
z-index: 100; z-index: 100;
}
} }
/* -------------------------------------------------- /* --------------------------------------------------
@@ -143,7 +137,8 @@ html {
transition: box-shadow 350ms ease, transform 350ms ease; transition: box-shadow 350ms ease, transform 350ms ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
&:is(:hover, :focus) { &:hover,
&:focus {
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-0.9rem) scale(1.02); transform: translateY(-0.9rem) scale(1.02);
} }
@@ -165,8 +160,9 @@ html {
} }
/* -------------------------------------------------- /* --------------------------------------------------
Navigation Tabs Navigation Tabs & Tier Colors
-------------------------------------------------- */ -------------------------------------------------- */
.nav-link { .nav-link {
font-weight: 600; font-weight: 600;
color: rgba(255, 255, 255, 0.67); color: rgba(255, 255, 255, 0.67);
@@ -193,7 +189,6 @@ html {
} }
} }
/* Tiered Colors */
$tiers: ( $tiers: (
nm: rgba(156, 204, 102, 1), nm: rgba(156, 204, 102, 1),
lp: rgba(211, 225, 86, 1), lp: rgba(211, 225, 86, 1),
@@ -221,11 +216,17 @@ $tiers: (
} }
} }
} }
/* price-row alert left borders */
.nav-#{$name} div.alert-secondary {
border-left: 3px solid $color;
}
} }
/* -------------------------------------------------- /* --------------------------------------------------
Misc UI Elements Misc UI
-------------------------------------------------- */ -------------------------------------------------- */
.dark-callout { .dark-callout {
@media (min-width: 768px) { @media (min-width: 768px) {
background-color: rgba(44, 48, 59, 1); background-color: rgba(44, 48, 59, 1);
@@ -243,27 +244,18 @@ $tiers: (
cursor: pointer; cursor: pointer;
} }
/* Icon sizing */ /* Icon Sizes */
.small-icon svg { .small-icon svg { max-height: 16px; width: 100%; margin-top: -0.25rem; }
width: 100%; .medium-icon svg { max-height: 32px; width: 100%; margin-left: -0.25rem; }
max-height: 16px;
margin-top: -0.25rem;
}
.medium-icon svg { /* Masked Image */
width: 100%;
max-height: 32px;
margin-left: -0.25rem;
}
/* Black silhouette overlay */
.masked-image { .masked-image {
z-index: 1000; z-index: 1000;
opacity: 1; opacity: 1;
filter: brightness(0); filter: brightness(0);
} }
/* Decorative background elements */ /* Decorative Background */
.starburst, .starburst,
.whos-that-pokemon { .whos-that-pokemon {
mix-blend-mode: lighten; mix-blend-mode: lighten;
@@ -275,12 +267,16 @@ $tiers: (
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
/* SVG sizes */ /* SVG Generic Sizes */
.energy-icon svg, .energy-icon svg,
.rarity-icon-large svg, .rarity-icon-large svg,
.set-icon svg, .edition-icon svg { .set-icon svg,
width: 2.5rem; .edition-icon svg {
width: 2rem;
z-index: 999; z-index: 999;
@media (min-width: 1024px) {
width: 2.5rem;
}
} }
.rarity-icon-large svg, .rarity-icon-large svg,
@@ -288,12 +284,14 @@ $tiers: (
margin-bottom: -0.25rem; margin-bottom: -0.25rem;
} }
.filter-icon svg { .filter-icon svg,
.search-button {
width: 2rem; width: 2rem;
fill: rgba(255,255,255,0.87); fill: rgba(255,255,255,0.87);
stroke: rgba(255,255,255,0.87); stroke: rgba(255,255,255,0.87);
} }
/* Form states */
.form-check-input:checked { .form-check-input:checked {
background-color: var(--bs-success); background-color: var(--bs-success);
border-color: var(--bs-success-border-subtle); border-color: var(--bs-success-border-subtle);
@@ -304,12 +302,7 @@ $tiers: (
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
} }
.search-button { /* Back to Top */
width: 2rem;
fill: rgba(255,255,255,0.87);
stroke: rgba(255,255,255,0.87);
}
#btn-back-to-top { #btn-back-to-top {
position: fixed; position: fixed;
bottom: 5vh; bottom: 5vh;
@@ -319,7 +312,7 @@ $tiers: (
.top-icon svg { .top-icon svg {
width: 2rem; width: 2rem;
height:2rem; height: 2rem;
fill: var(--bs-info-bg-subtle); fill: var(--bs-info-bg-subtle);
stroke: var(--bs-info-bg-subtle); stroke: var(--bs-info-bg-subtle);
} }
@@ -329,15 +322,6 @@ $tiers: (
stroke: var(--bs-info-border-subtle); stroke: var(--bs-info-border-subtle);
} }
.energy-icon svg {
margin-top: -0.25rem;
margin-right: -0.25rem;
}
.set-icon svg {
margin-left: -0.25rem;
}
.shadow-filter { .shadow-filter {
filter: filter:
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
@@ -347,39 +331,26 @@ $tiers: (
/* -------------------------------------------------- /* --------------------------------------------------
Pricing Pricing
-------------------------------------------------- */ -------------------------------------------------- */
.price-row { .price-row {
position: relative; position: relative;
margin-top: -1.25rem; margin-top: -1.25rem;
border-radius: 0.33rem; border-radius: 0.33rem;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(156, 204, 102, 1) 21%, map-get($tiers, nm) 21%,
rgba(211, 225, 86, 1) 42%, map-get($tiers, lp) 42%,
rgba(255, 238, 87, 1) 63%, map-get($tiers, mp) 63%,
rgba(255, 201, 41, 1) 74%, map-get($tiers, hp) 74%,
rgba(255, 167, 36, 1) 85% map-get($tiers, dmg) 85%
); );
} }
$tiers: (
nm: rgba(156, 204, 102, 1),
lp: rgba(211, 225, 86, 1),
mp: rgba(255, 238, 87, 1),
hp: rgba(255, 201, 41, 1),
dmg: rgba(255, 167, 36, 1)
);
@each $name, $color in $tiers {
.nav-#{$name} div.alert-secondary {
border-left: 3px solid $color;
}
}
.inventory-button { .inventory-button {
margin-bottom: -2rem;
margin-right: -0.25rem;
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-bottom: -2rem;
margin-right: -0.25rem;
border-radius: 0.33rem; border-radius: 0.33rem;
background-color: hsl(262, 47%, 55%); background-color: hsl(262, 47%, 55%);
color: #fff; color: #fff;
@@ -396,6 +367,7 @@ $tiers: (
font-size: 0.9rem !important; font-size: 0.9rem !important;
} }
/* Price Label */
.price-label { .price-label {
font-size: 0.69rem; font-size: 0.69rem;
font-weight: 600; font-weight: 600;
@@ -404,37 +376,21 @@ $tiers: (
border-radius: 0.33rem 0 0 0.33rem; border-radius: 0.33rem 0 0 0.33rem;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
@media (min-width: 768px) { @media (min-width: 768px) { font-size: 0.72rem; }
font-size: 0.72rem; @media (min-width: 996px) { font-size: 0.75rem; }
} @media (min-width: 1200px) { font-size: 0.8rem; }
@media (min-width: 996px) { @media (min-width: 1600px) { font-size: 1rem; }
font-size: 0.75rem;
}
@media (min-width: 1200px) {
font-size: 0.8rem;
}
@media (min-width: 1600px) {
font-size: 1rem;
}
&:nth-of-type(2) { &:nth-of-type(2) { background-color: hsl(66, 70%, 61%); }
background-color: hsl(66, 70%, 61%); &:nth-of-type(3) { background-color: hsl(54, 100%, 67%); }
} &:nth-of-type(4) { background-color: hsl(45, 100%, 58%); }
&:nth-of-type(3) { &:last-of-type { background-color: hsl(36, 100%, 57%); border-radius: 0.33rem; }
background-color: hsl(54, 100%, 67%);
}
&:nth-of-type(4) {
background-color: hsl(45, 100%, 58%);
}
&:last-of-type {
background-color: hsl(36, 100%, 57%);
border-radius: 0.33rem;
}
} }
/* -------------------------------------------------- /* --------------------------------------------------
Search Search
-------------------------------------------------- */ -------------------------------------------------- */
@media (max-width: 768px) { @media (max-width: 768px) {
.search-box, .search-box,
.search-button { .search-button {
@@ -449,7 +405,7 @@ $tiers: (
line-height: 2rem; line-height: 2rem;
} }
/* Sticky (mobile-bottom / desktop-top) search bar */ /* Sticky Search Bar */
.search-bar { .search-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -461,7 +417,6 @@ $tiers: (
@media (min-width: 768px) { @media (min-width: 768px) {
position: sticky; position: sticky;
top: 0; top: 0;
float: right;
min-width: 45vw; min-width: 45vw;
max-width: 45vw; max-width: 45vw;
transform: rotate(0); transform: rotate(0);
@@ -474,71 +429,48 @@ $tiers: (
} }
/* -------------------------------------------------- /* --------------------------------------------------
Circles (Header, Buttons, etc.) Circles
-------------------------------------------------- */ -------------------------------------------------- */
/* Shared Circle Styles */
%circle-base { %circle-base {
width: 1rem;
height: 1rem;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
margin: 0 auto; margin: 0 auto;
--a: 8deg; border: 1px solid hsl(210, 11%, 15%);
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%; mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
transition: 0.4s; transition: 0.4s;
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a)); transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a, 8deg));
} }
/* Red */ .redCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); }
.redCircle { .yellowCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); }
@extend %circle-base; .greenCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); }
width: 1rem;
height: 1rem;
border: 1px solid hsl(210, 11%, 15%);
background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%));
}
/* Yellow */
.yellowCircle {
@extend %circle-base;
width: 1rem;
height: 1rem;
border: 1px solid hsl(210, 11%, 15%);
background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%));
}
/* Green */
.greenCircle {
@extend %circle-base;
width: 1rem;
height: 1rem;
border: 1px solid hsl(210, 11%, 15%);
background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%));
}
/* Circle Hover Effect */
.yellowCircle:hover,
.redCircle:hover, .redCircle:hover,
.yellowCircle:hover,
.greenCircle:hover, .greenCircle:hover,
.blueCircle:hover { .blueCircle:hover {
--i: -1, 1; --i: -1, 1;
mask-position: 0 0; mask-position: 0 0;
} }
.nav-icon { /* --------------------------------------------------
width: 1.85rem; Buttons
height: 1.85rem; -------------------------------------------------- */
}
.btn-warning>span, .btn-warning>svg.nav-icon { .btn-warning > span,
.btn-warning > svg.nav-icon {
fill: var(--bs-warning-border-subtle); fill: var(--bs-warning-border-subtle);
stroke: var(--bs-warning-border-subtle); stroke: var(--bs-warning-border-subtle);
color: var(--bs-warning-border-subtle); color: var(--bs-warning-border-subtle);
} }
.btn.btn-warning:hover>span, .btn.btn-warning:hover>svg.nav-icon { .btn.btn-warning:hover > span,
.btn.btn-warning:hover > svg.nav-icon {
fill: var(--bs-warning-bg-subtle); fill: var(--bs-warning-bg-subtle);
stroke: var(--bs-warning-bg-subtle); stroke: var(--bs-warning-bg-subtle);
color: var(--bs-warning-border-subtle);
} }
.btn-outline-success svg.nav-icon { .btn-outline-success svg.nav-icon {
@@ -546,13 +478,15 @@ $tiers: (
stroke: var(--bs-success); stroke: var(--bs-success);
} }
.btn.btn-outline-success:hover, .btn.btn-outline-success:hover>svg.nav-icon { .btn.btn-outline-success:hover,
.btn.btn-outline-success:hover svg.nav-icon {
fill: var(--bs-success-border-subtle); fill: var(--bs-success-border-subtle);
stroke: var(--bs-success-border-subtle); stroke: var(--bs-success-border-subtle);
color: var(--bs-success-border-subtle);
} }
/* Card Modal Navigation Styles */ /* --------------------------------------------------
Card Modal Navigation
-------------------------------------------------- */
.card-nav-prev, .card-nav-prev,
.card-nav-next { .card-nav-next {
@@ -562,39 +496,20 @@ $tiers: (
justify-content: center; justify-content: center;
min-width: 36px; min-width: 36px;
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
} will-change: opacity;
.card-nav-prev:hover:not(:disabled), &:hover:not(:disabled) {
.card-nav-next:hover:not(:disabled) {
background-color: var(--bs-secondary); background-color: var(--bs-secondary);
border-color: var(--bs-secondary); border-color: var(--bs-secondary);
color: white; color: white;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
&:active:not(:disabled) { transform: translateY(0); }
&:disabled { cursor: not-allowed; }
} }
.card-nav-prev:active:not(:disabled),
.card-nav-next:active:not(:disabled) {
transform: translateY(0);
}
.card-nav-prev:disabled,
.card-nav-next:disabled {
cursor: not-allowed;
}
/* Optional: Add keyboard indicator hint */
.modal-header {
position: relative;
}
/* Smooth fade in/out for disabled state */
.card-nav-prev,
.card-nav-next {
will-change: opacity;
}
/* Touch-friendly sizing on mobile */
@media (max-width: 768px) { @media (max-width: 768px) {
.card-nav-prev, .card-nav-prev,
.card-nav-next { .card-nav-next {
@@ -603,15 +518,24 @@ $tiers: (
} }
} }
/* Optional: Add a subtle animation when swiping */ /* --------------------------------------------------
Swipe Animation
-------------------------------------------------- */
@keyframes swipe-feedback { @keyframes swipe-feedback {
0% { 0% { transform: scale(1); }
transform: scale(1); 50% { transform: scale(0.95); }
} 100% { transform: scale(1); }
50% { }
transform: scale(0.95);
} /* --------------------------------------------------
100% { Input Fix (Safari)
transform: scale(1); -------------------------------------------------- */
} input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1rem;
width: 1rem;
display: block;
background-repeat: no-repeat;
background-size: 1rem;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
} }

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

@@ -123,7 +123,7 @@ const ebaySearchUrl = (card: any) => {
<div class="container-fluid row align-items-center"> <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="h4 card-title pe-2 col-sm-12 col-md-auto mb-sm-1">{card?.productName}</div>
<div class="text-secondary col-auto">{card?.number}</div> <div class="text-secondary col-auto">{card?.number}</div>
<div class="text-secondary col-auto">{card?.variant}</div> <div class="text-light col-auto">{card?.variant}</div>
</div> </div>
<div class="d-flex gap-2 align-items-center"> <div class="d-flex gap-2 align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary card-nav-prev d-none" title="Previous card (← or swipe right)" aria-label="Previous card"> <button type="button" class="btn btn-sm btn-outline-secondary card-nav-prev d-none" title="Previous card (← or swipe right)" aria-label="Previous card">
@@ -145,30 +145,30 @@ const ebaySearchUrl = (card: any) => {
<div class="row g-4"> <div class="row g-4">
<div class="col-sm-12 col-md-3"> <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'});"><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><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 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><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="d-flex flex-column flex-lg-row justify-content-between mt-2">
<div class="p text-secondary">{card?.set?.setCode}</div> <div class="text-secondary">{card?.set?.setCode}</div>
<div class="p text-secondary">Illustrator: {card?.Artist}</div> <div class="text-secondary">Illus<span class="d-none d-lg-inline">trator</span>: {card?.Artist}</div>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-7"> <div class="col-sm-12 col-md-7">
<ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist"> <ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button> <button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-lg-inline">Near Mint</span><span class="d-lg-none">NM</span></button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button> <button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-lg-inline">Lightly Played</span><span class="d-lg-none">LP</span></button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button> <button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-lg-inline">Moderately Played</span><span class="d-lg-none">MP</span></button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button> <button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-lg-inline">Heavily Played</span><span class="d-lg-none">HP</span></button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button> <button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-lg-inline">Damaged</span><span class="d-lg-none">DMG</span></button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button> <button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-lg-inline">Inventory</span><span class="d-lg-none">+/-</span></button>
</li> </li>
</ul> </ul>
<div class="tab-content" id="myTabContent"> <div class="tab-content" id="myTabContent">
@@ -176,8 +176,8 @@ const ebaySearchUrl = (card: any) => {
const attributes = conditionAttributes(price); const attributes = conditionAttributes(price);
return ( return (
<div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0"> <div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
<div class="d-block gap-1 d-md-flex"> <div class="d-block gap-1 d-lg-flex">
<div class="d-flex flex-row flex-md-column gap-1 col-12 col-md-2 mb-0"> <div class="d-flex flex-row flex-lg-column gap-1 col-12 col-lg-2 mb-1">
<div class="alert alert-secondary rounded p-2 flex-fill mb-1"> <div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Market Price</h6> <h6>Market Price</h6>
<p class="pb-0">${price.marketPrice}</p> <p class="pb-0">${price.marketPrice}</p>
@@ -195,7 +195,7 @@ const ebaySearchUrl = (card: any) => {
<p class="pb-0 small">{attributes?.volatility}</p> <p class="pb-0 small">{attributes?.volatility}</p>
</div> </div>
</div> </div>
<div class="d-flex flex-column gap-1 col-12 col-md-10 mb-0 me-2"> <div class="d-flex flex-column gap-1 col-12 col-lg-10 mb-0 me-2 clearfix">
<div class="alert alert-secondary rounded p-2 mb-1"> <div class="alert alert-secondary rounded p-2 mb-1">
<h6>Latest Sales</h6> <h6>Latest Sales</h6>
</div> </div>
@@ -215,11 +215,11 @@ const ebaySearchUrl = (card: any) => {
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5"> <div class="col-sm-12 col-md-2 mt-0 mt-md-5">
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a> <a class="btn btn-outline-light mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> <span class="d-none d-lg-inline">TCGPlayer</span></a>
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a> <a class="btn btn-outline-light mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
</div> </div>
</div> </div>
<div class="text-end my-0"><small class="text-body-secondary">Prices last changed: {timeAgo(calculatedAt)}</small></div> <div class="text-end my-0"><small class="text-body-tertiary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
</div> </div>
</div> </div>
</div> </div>

20
src/pages/partials/cards.astro
View File

@@ -122,7 +122,19 @@ const facetNames = (name:string) => {
} }
const facets = searchResults.results.slice(1).map((result: any) => { const facets = searchResults.results.slice(1).map((result: any) => {
return result.facet_counts[0]; const facet = result.facet_counts[0];
if (!facet) return facet;
// Sort: checked items first, then alphabetically
facet.counts = facet.counts.sort((a: any, b: any) => {
const aChecked = filters[facet.field_name]?.includes(a.value) ?? false;
const bChecked = filters[facet.field_name]?.includes(b.value) ?? false;
if (aChecked && !bChecked) return -1;
if (!aChecked && bChecked) return 1;
return a.value.localeCompare(b.value);
});
return facet;
}); });
--- ---
@@ -234,11 +246,11 @@ const facets = searchResults.results.slice(1).map((result: any) => {
</div> </div>
<div class="h5 my-0">{card.productName}</div> <div class="h5 my-0">{card.productName}</div>
<div class="d-flex flex-row lh-1 mt-1 justify-content-between"> <div class="d-flex flex-row lh-1 mt-1 justify-content-between">
<div class="text-secondary flex-grow-1 d-none d-md-flex">{card.setName}</div> <div class="text-secondary flex-grow-1 d-none d-lg-flex">{card.setName}</div>
<div class="text-secondary">{card.number}</div> <div class="text-body-tertiary">{card.number}</div>
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span> <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
</div> </div>
<div>{card.variant}</div><span class="d-none">{card.productId}</span> <div class="text-body-tertiary">{card.variant}</div><span class="d-none">{card.productId}</span>
</div> </div>
))} ))}