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: (
|
$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,16 +69,12 @@ 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;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------
|
/* --------------------------------------------------
|
||||||
Navbar & Icons
|
Navbar & Icons
|
||||||
@@ -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;
|
||||||
@@ -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,10 +496,9 @@ $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;
|
||||||
@@ -573,28 +506,10 @@ $tiers: (
|
|||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-nav-prev:active:not(:disabled),
|
&:active:not(:disabled) { transform: translateY(0); }
|
||||||
.card-nav-next:active:not(:disabled) {
|
&:disabled { cursor: not-allowed; }
|
||||||
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% {
|
|
||||||
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="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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user