diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 25cbdac..56ae574 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -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 { - z-index: 100; + &: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), @@ -220,12 +215,18 @@ $tiers: ( color: rgba(255, 255, 255, 0.87); } } - } + } + + /* 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,72 +478,64 @@ $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 { - transition: all 0.2s ease-in-out; - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 36px; - padding: 0.375rem 0.5rem; -} + transition: all 0.2s ease-in-out; + display: inline-flex; + align-items: center; + 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 { - min-width: 40px; - padding: 0.5rem; - } + .card-nav-prev, + .card-nav-next { + min-width: 40px; + padding: 0.5rem; + } } -/* 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); } \ No newline at end of file diff --git a/src/pages/partials/card-modal.astro b/src/pages/partials/card-modal.astro index c2b0722..e464d58 100644 --- a/src/pages/partials/card-modal.astro +++ b/src/pages/partials/card-modal.astro @@ -123,7 +123,7 @@ const ebaySearchUrl = (card: any) => {
{card?.productName}
{card?.number}
-
{card?.variant}
+
{card?.variant}
+
@@ -176,8 +176,8 @@ const ebaySearchUrl = (card: any) => { const attributes = conditionAttributes(price); return (
-
-
+
+
Market Price

${price.marketPrice}

@@ -195,7 +195,7 @@ const ebaySearchUrl = (card: any) => {

{attributes?.volatility}

-
+
Latest Sales
@@ -215,11 +215,11 @@ const ebaySearchUrl = (card: any) => {
- TCGPlayer - + TCGPlayer +
-
Prices last changed: {timeAgo(calculatedAt)}
+
Prices last changed: {timeAgo(calculatedAt)}
diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro index 865855f..1d8c1e2 100644 --- a/src/pages/partials/cards.astro +++ b/src/pages/partials/cards.astro @@ -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) => {
{card.productName}
-
{card.setName}
-
{card.number}
+
{card.setName}
+
{card.number}
-
{card.variant}
{card.productId} +
{card.variant}
{card.productId}
))}