cleaned up css and made sorted active filters to the top
This commit is contained in:
zach
@@ -1,5 +1,5 @@
|
||||
/* --------------------------------------------------
|
||||
Bootstrap overrides
|
||||
Bootstrap Overrides
|
||||
-------------------------------------------------- */
|
||||
|
||||
$grid-breakpoints: (
|
||||
@@ -21,22 +21,20 @@ $container-max-widths: (
|
||||
xxxl: 1840px
|
||||
) !default;
|
||||
|
||||
|
||||
@import "_bootstrap";
|
||||
|
||||
/* --------------------------------------------------
|
||||
Root Variables
|
||||
-------------------------------------------------- */
|
||||
:root {
|
||||
--total: 11; /* Number of items in the energy wheel */
|
||||
--radius: 40px; /* Circle radius */
|
||||
--total: 11;
|
||||
--radius: 40px;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Layout
|
||||
-------------------------------------------------- */
|
||||
@@ -71,15 +69,11 @@ html {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
--angle: calc(360deg / var(--total) * var(--i));
|
||||
transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
|
||||
|
||||
transform:
|
||||
rotate(var(--angle))
|
||||
translateX(var(--radius))
|
||||
rotate(calc(-1 * var(--angle)));
|
||||
}
|
||||
|
||||
.energy-wheel-item:first-of-type {
|
||||
&:first-of-type {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
@@ -143,7 +137,8 @@ html {
|
||||
transition: box-shadow 350ms ease, transform 350ms ease;
|
||||
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);
|
||||
transform: translateY(-0.9rem) scale(1.02);
|
||||
}
|
||||
@@ -165,8 +160,9 @@ html {
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Navigation Tabs
|
||||
Navigation Tabs & Tier Colors
|
||||
-------------------------------------------------- */
|
||||
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.67);
|
||||
@@ -193,7 +189,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
/* Tiered Colors */
|
||||
$tiers: (
|
||||
nm: rgba(156, 204, 102, 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 {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
@@ -243,27 +244,18 @@ $tiers: (
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Icon sizing */
|
||||
.small-icon svg {
|
||||
width: 100%;
|
||||
max-height: 16px;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
/* Icon Sizes */
|
||||
.small-icon svg { max-height: 16px; width: 100%; margin-top: -0.25rem; }
|
||||
.medium-icon svg { max-height: 32px; width: 100%; margin-left: -0.25rem; }
|
||||
|
||||
.medium-icon svg {
|
||||
width: 100%;
|
||||
max-height: 32px;
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
|
||||
/* Black silhouette overlay */
|
||||
/* Masked Image */
|
||||
.masked-image {
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
filter: brightness(0);
|
||||
}
|
||||
|
||||
/* Decorative background elements */
|
||||
/* Decorative Background */
|
||||
.starburst,
|
||||
.whos-that-pokemon {
|
||||
mix-blend-mode: lighten;
|
||||
@@ -275,12 +267,16 @@ $tiers: (
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
/* SVG sizes */
|
||||
/* SVG Generic Sizes */
|
||||
.energy-icon svg,
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg, .edition-icon svg {
|
||||
width: 2.5rem;
|
||||
.set-icon svg,
|
||||
.edition-icon svg {
|
||||
width: 2rem;
|
||||
z-index: 999;
|
||||
@media (min-width: 1024px) {
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rarity-icon-large svg,
|
||||
@@ -288,12 +284,14 @@ $tiers: (
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.filter-icon svg {
|
||||
.filter-icon svg,
|
||||
.search-button {
|
||||
width: 2rem;
|
||||
fill: rgba(255,255,255,0.87);
|
||||
stroke: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
/* Form states */
|
||||
.form-check-input:checked {
|
||||
background-color: var(--bs-success);
|
||||
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);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 2rem;
|
||||
fill: rgba(255,255,255,0.87);
|
||||
stroke: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
/* Back to Top */
|
||||
#btn-back-to-top {
|
||||
position: fixed;
|
||||
bottom: 5vh;
|
||||
@@ -319,7 +312,7 @@ $tiers: (
|
||||
|
||||
.top-icon svg {
|
||||
width: 2rem;
|
||||
height:2rem;
|
||||
height: 2rem;
|
||||
fill: var(--bs-info-bg-subtle);
|
||||
stroke: var(--bs-info-bg-subtle);
|
||||
}
|
||||
@@ -329,15 +322,6 @@ $tiers: (
|
||||
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 {
|
||||
filter:
|
||||
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
||||
@@ -347,39 +331,26 @@ $tiers: (
|
||||
/* --------------------------------------------------
|
||||
Pricing
|
||||
-------------------------------------------------- */
|
||||
|
||||
.price-row {
|
||||
position: relative;
|
||||
margin-top: -1.25rem;
|
||||
border-radius: 0.33rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(156, 204, 102, 1) 21%,
|
||||
rgba(211, 225, 86, 1) 42%,
|
||||
rgba(255, 238, 87, 1) 63%,
|
||||
rgba(255, 201, 41, 1) 74%,
|
||||
rgba(255, 167, 36, 1) 85%
|
||||
map-get($tiers, nm) 21%,
|
||||
map-get($tiers, lp) 42%,
|
||||
map-get($tiers, mp) 63%,
|
||||
map-get($tiers, hp) 74%,
|
||||
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 {
|
||||
margin-bottom: -2rem;
|
||||
margin-right: -0.25rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: -2rem;
|
||||
margin-right: -0.25rem;
|
||||
border-radius: 0.33rem;
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
color: #fff;
|
||||
@@ -396,6 +367,7 @@ $tiers: (
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
/* Price Label */
|
||||
.price-label {
|
||||
font-size: 0.69rem;
|
||||
font-weight: 600;
|
||||
@@ -404,37 +376,21 @@ $tiers: (
|
||||
border-radius: 0.33rem 0 0 0.33rem;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
@media (min-width: 996px) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (min-width: 768px) { font-size: 0.72rem; }
|
||||
@media (min-width: 996px) { font-size: 0.75rem; }
|
||||
@media (min-width: 1200px) { font-size: 0.8rem; }
|
||||
@media (min-width: 1600px) { font-size: 1rem; }
|
||||
|
||||
&:nth-of-type(2) {
|
||||
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%);
|
||||
}
|
||||
&:last-of-type {
|
||||
background-color: hsl(36, 100%, 57%);
|
||||
border-radius: 0.33rem;
|
||||
}
|
||||
&:nth-of-type(2) { 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%); }
|
||||
&:last-of-type { background-color: hsl(36, 100%, 57%); border-radius: 0.33rem; }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Search
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-box,
|
||||
.search-button {
|
||||
@@ -449,7 +405,7 @@ $tiers: (
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
/* Sticky (mobile-bottom / desktop-top) search bar */
|
||||
/* Sticky Search Bar */
|
||||
.search-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -461,7 +417,6 @@ $tiers: (
|
||||
@media (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
float: right;
|
||||
min-width: 45vw;
|
||||
max-width: 45vw;
|
||||
transform: rotate(0);
|
||||
@@ -474,71 +429,48 @@ $tiers: (
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Circles (Header, Buttons, etc.)
|
||||
Circles
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Shared Circle Styles */
|
||||
%circle-base {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
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%;
|
||||
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;
|
||||
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%));
|
||||
}
|
||||
.redCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); }
|
||||
.yellowCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); }
|
||||
.greenCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); }
|
||||
|
||||
/* 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,
|
||||
.yellowCircle:hover,
|
||||
.greenCircle:hover,
|
||||
.blueCircle:hover {
|
||||
--i: -1, 1;
|
||||
mask-position: 0 0;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 1.85rem;
|
||||
height: 1.85rem;
|
||||
}
|
||||
/* --------------------------------------------------
|
||||
Buttons
|
||||
-------------------------------------------------- */
|
||||
|
||||
.btn-warning>span, .btn-warning>svg.nav-icon {
|
||||
.btn-warning > span,
|
||||
.btn-warning > svg.nav-icon {
|
||||
fill: var(--bs-warning-border-subtle);
|
||||
stroke: 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);
|
||||
stroke: var(--bs-warning-bg-subtle);
|
||||
color: var(--bs-warning-border-subtle);
|
||||
}
|
||||
|
||||
.btn-outline-success svg.nav-icon {
|
||||
@@ -546,13 +478,15 @@ $tiers: (
|
||||
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);
|
||||
stroke: var(--bs-success-border-subtle);
|
||||
color: var(--bs-success-border-subtle);
|
||||
}
|
||||
|
||||
/* Card Modal Navigation Styles */
|
||||
/* --------------------------------------------------
|
||||
Card Modal Navigation
|
||||
-------------------------------------------------- */
|
||||
|
||||
.card-nav-prev,
|
||||
.card-nav-next {
|
||||
@@ -562,39 +496,20 @@ $tiers: (
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
will-change: opacity;
|
||||
|
||||
.card-nav-prev:hover:not(:disabled),
|
||||
.card-nav-next:hover:not(:disabled) {
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
color: white;
|
||||
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) {
|
||||
.card-nav-prev,
|
||||
.card-nav-next {
|
||||
@@ -603,15 +518,24 @@ $tiers: (
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: Add a subtle animation when swiping */
|
||||
/* --------------------------------------------------
|
||||
Swipe Animation
|
||||
-------------------------------------------------- */
|
||||
@keyframes swipe-feedback {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(0.95); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Input Fix (Safari)
|
||||
-------------------------------------------------- */
|
||||
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);
|
||||
}
|
||||
@@ -123,7 +123,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<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 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 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">
|
||||
@@ -145,30 +145,30 @@ const ebaySearchUrl = (card: any) => {
|
||||
<div class="row g-4">
|
||||
<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="d-flex flex-row justify-content-between mt-2">
|
||||
<div class="p text-secondary">{card?.set?.setCode}</div>
|
||||
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
|
||||
<div class="d-flex flex-column flex-lg-row justify-content-between mt-2">
|
||||
<div class="text-secondary">{card?.set?.setCode}</div>
|
||||
<div class="text-secondary">Illus<span class="d-none d-lg-inline">trator</span>: {card?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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 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 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 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 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 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>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
@@ -176,8 +176,8 @@ const ebaySearchUrl = (card: any) => {
|
||||
const attributes = conditionAttributes(price);
|
||||
return (
|
||||
<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-flex flex-row flex-md-column gap-1 col-12 col-md-2 mb-0">
|
||||
<div class="d-block gap-1 d-lg-flex">
|
||||
<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">
|
||||
<h6>Market Price</h6>
|
||||
<p class="pb-0">${price.marketPrice}</p>
|
||||
@@ -195,7 +195,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<p class="pb-0 small">{attributes?.volatility}</p>
|
||||
</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">
|
||||
<h6>Latest Sales</h6>
|
||||
</div>
|
||||
@@ -215,11 +215,11 @@ const ebaySearchUrl = (card: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<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-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={`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-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 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>
|
||||
|
||||
@@ -122,7 +122,19 @@ const facetNames = (name:string) => {
|
||||
}
|
||||
|
||||
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 class="h5 my-0">{card.productName}</div>
|
||||
<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">{card.number}</div>
|
||||
<div class="text-secondary flex-grow-1 d-none d-lg-flex">{card.setName}</div>
|
||||
<div class="text-body-tertiary">{card.number}</div>
|
||||
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
|
||||
</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>
|
||||
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user