added missing rarities to rarityicon component, updated mobile grid enhancements, moved search to sticky bar at the top
This commit is contained in:
zach
@@ -1,12 +1,18 @@
|
||||
@import '_bootstrap';
|
||||
|
||||
.copy-small {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.75rem;
|
||||
opacity: .87;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.copy-small {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
aspect-ratio: 5/7;
|
||||
aspect-ratio: 23/32;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@@ -17,16 +23,25 @@
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.rarity-icon svg {
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
display: inline-block;
|
||||
height: .8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
color: hsl(122, 39%, 49%);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.price-label {
|
||||
font-size: 0.825rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.price-label:nth-of-type(n+2) {
|
||||
|
||||
@@ -39,14 +39,14 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
|
||||
---
|
||||
{pokemon.map((card) => (
|
||||
<div class="col">
|
||||
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
|
||||
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
|
||||
<div class="h6 my-0">{card.productName}</div>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="copy-small">{card.number}</div>
|
||||
<RarityIcon rarity={card.rarityName} />
|
||||
</div>
|
||||
<div class="copy-small">{card.set?.setName}</div>
|
||||
<div class="row row-cols-5 gx-1 mt-1">
|
||||
<div class="copy-small d-none d-lg-block">{card.set?.setName}</div>
|
||||
<div class="row row-cols-5 gx-1">
|
||||
{card.prices
|
||||
.slice()
|
||||
.sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
const { query } = Astro.props;
|
||||
|
||||
---
|
||||
|
||||
<div class="row mb-5">
|
||||
<div class="col-md-3 display-sm-none">
|
||||
<div class="h5 d-none">Inventory management placeholder</div>
|
||||
<form method="GET">
|
||||
<div>
|
||||
<input type="text" name="q" class="form-control w-100 mb-2" placeholder="Search cards..." value={query} />
|
||||
</div>
|
||||
<div>
|
||||
<input type="submit" class="btn btn-primary mb-2" value="Search" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-9 mt-0">
|
||||
<div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">
|
||||
|
||||
3
src/components/CardModal.astro
Normal file
3
src/components/CardModal.astro
Normal file
@@ -0,0 +1,3 @@
|
||||
---
|
||||
|
||||
---
|
||||
@@ -14,6 +14,9 @@ import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
|
||||
import secretrare from "/src/svg/rarity/rare_secret.svg?raw";
|
||||
import blackwhiterare from "/src/svg/rarity/black_white_rare.svg?raw";
|
||||
import raresecret from "/src/svg/rarity/rare_secret.svg?raw";
|
||||
import rarebreak from "/src/svg/rarity/rare_break.svg?raw";
|
||||
import artrare from "/src/svg/rarity/art_rare.svg?raw";
|
||||
import specialartrare from "/src/svg/rarity/special_art_rare.svg?raw";
|
||||
|
||||
const { rarity } = Astro.props;
|
||||
|
||||
@@ -33,6 +36,9 @@ const rarityMap = {
|
||||
"Secret Rare": secretrare,
|
||||
"Black White Rare": blackwhiterare,
|
||||
"Shiny Holo Rare": raresecret,
|
||||
"Rare BREAK": rarebreak,
|
||||
"Art Rare": artrare,
|
||||
"Special Art Rare": specialartrare,
|
||||
};
|
||||
|
||||
const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
---
|
||||
import '/src/assets/css/main.scss';
|
||||
const { query } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="sticky border-bottom">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center gap-3 p-2">
|
||||
<h5>Placeholder for search input/filters</h5>
|
||||
<form method="GET">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="my-2 flex-grow-1 me-2">
|
||||
<input type="text" name="q" class="form-control w-100" placeholder="Search cards..." value={query} />
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<input type="submit" class="btn btn-primary w-100" value="Search" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,18 +0,0 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import { db } from "../../db";
|
||||
|
||||
export const GET: APIRoute = async ({ url }) => {
|
||||
const page = Number(url.searchParams.get("page") ?? 0);
|
||||
const PAGE_SIZE = 256;
|
||||
|
||||
const cards = await db.query.cards.findMany({
|
||||
where: { productLineName: "pokemon" },
|
||||
limit: PAGE_SIZE,
|
||||
offset: page * PAGE_SIZE,
|
||||
with: { prices: true }
|
||||
});
|
||||
|
||||
return new Response(JSON.stringify(cards), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
};
|
||||
4
src/svg/rarity/art_rare.svg
Normal file
4
src/svg/rarity/art_rare.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.41 1.75V4.41H13.432C14.3654 4.41 14.832 3.95267 14.832 3.038C14.832 2.63667 14.7107 2.324 14.468 2.1C14.2254 1.86667 13.894 1.75 13.474 1.75H12.41ZM15.112 9.436L13.068 6.16H12.41V9.436H10.254V0H13.516C14.5707 0 15.4154 0.28 16.05 0.84C16.694 1.4 17.016 2.128 17.016 3.024C17.016 4.368 16.442 5.29667 15.294 5.81L17.688 9.436H15.112Z" fill="white"/>
|
||||
<path d="M3.346 5.768H5.614L5.516 5.432C5.24533 4.51733 5.02133 3.738 4.844 3.094C4.676 2.45 4.57333 2.03467 4.536 1.848L4.48 1.568C4.40533 2.08133 4.06 3.36933 3.444 5.432L3.346 5.768ZM6.706 9.436L6.132 7.504H2.828L2.254 9.436H0L3.15 0H5.866L9.016 9.436H6.706Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 720 B |
@@ -1,4 +1,4 @@
|
||||
<svg width="35" height="11" viewBox="0 0 35 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 35 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.7285 10.7275V0H30.1599C30.9631 0 31.6562 0.14492 32.2394 0.434759C32.8261 0.721106 33.2783 1.13317 33.5961 1.67094C33.9139 2.20522 34.0727 2.83903 34.0727 3.57235C34.0727 4.31616 33.9104 4.94822 33.5856 5.46853C33.2608 5.98535 32.7999 6.37995 32.2028 6.65233C31.6056 6.92122 30.8985 7.05566 30.0813 7.05566H27.279V5.01282H29.5994C29.9905 5.01282 30.3171 4.96218 30.579 4.86092C30.8444 4.75615 31.0451 4.59901 31.1813 4.38949C31.3175 4.17648 31.3856 3.9041 31.3856 3.57235C31.3856 3.24061 31.3175 2.96649 31.1813 2.74998C31.0451 2.52998 30.8444 2.36586 30.579 2.2576C30.3136 2.14586 29.9871 2.08998 29.5994 2.08998H28.3214V10.7275H25.7285ZM31.768 5.82472L34.4394 10.7275H31.6109L28.9918 5.82472H31.768Z" fill="white"/>
|
||||
<path d="M12.6707 10.7275L9.54883 0H12.414L14.0326 7.02947H14.1217L15.9707 0H18.3069L20.1559 7.04519H20.2449L21.8687 0H24.7287L21.6121 10.7275H19.1135L17.1807 4.22187H17.0969L15.164 10.7275H12.6707Z" fill="white"/>
|
||||
<path d="M0 10.7275V0H4.4733C5.27647 0 5.94869 0.113491 6.48995 0.340473C7.03471 0.567456 7.44328 0.885232 7.71566 1.2938C7.99153 1.70237 8.12946 2.17554 8.12946 2.71331C8.12946 3.12188 8.04391 3.4868 7.8728 3.80807C7.70169 4.12584 7.46598 4.38949 7.16566 4.59901C6.86535 4.80854 6.51789 4.9552 6.12329 5.03901V5.14377C6.5563 5.16472 6.95614 5.28171 7.3228 5.49472C7.69296 5.70774 7.98978 6.00456 8.21327 6.38519C8.43676 6.76233 8.54851 7.20931 8.54851 7.72613C8.54851 8.30232 8.40184 8.81739 8.10851 9.27136C7.81518 9.72183 7.3909 10.078 6.83566 10.3399C6.28043 10.5983 5.60647 10.7275 4.81377 10.7275H0ZM2.59284 8.63755H4.19568C4.7579 8.63755 5.17171 8.53105 5.4371 8.31803C5.70599 8.10502 5.84043 7.8082 5.84043 7.42756C5.84043 7.15169 5.77583 6.91423 5.64662 6.71519C5.51742 6.51265 5.33409 6.35725 5.09663 6.249C4.85917 6.13726 4.57457 6.08138 4.24283 6.08138H2.59284V8.63755ZM2.59284 4.41044H4.02806C4.31092 4.41044 4.56235 4.3633 4.78235 4.26902C5.00234 4.17473 5.17345 4.03854 5.29567 3.86045C5.42139 3.68235 5.48424 3.46759 5.48424 3.21617C5.48424 2.85649 5.35679 2.57363 5.10187 2.3676C4.84695 2.16157 4.50298 2.05856 4.06997 2.05856H2.59284V4.41044Z" fill="white"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.7556 1.75V4.41H11.7776C12.7109 4.41 13.1776 3.95267 13.1776 3.038C13.1776 2.63667 13.0563 2.324 12.8136 2.1C12.5709 1.86667 12.2396 1.75 11.8196 1.75H10.7556ZM13.4576 9.436L11.4136 6.16H10.7556V9.436H8.59961V0H11.8616C12.9163 0 13.7609 0.28 14.3956 0.84C15.0396 1.4 15.3616 2.128 15.3616 3.024C15.3616 4.368 14.7876 5.29667 13.6396 5.81L16.0336 9.436H13.4576Z" fill="white"/>
|
||||
<path d="M2.156 1.75V4.41H3.178C4.11133 4.41 4.578 3.95267 4.578 3.038C4.578 2.63667 4.45667 2.324 4.214 2.1C3.97133 1.86667 3.64 1.75 3.22 1.75H2.156ZM4.858 9.436L2.814 6.16H2.156V9.436H0V0H3.262C4.31667 0 5.16133 0.28 5.796 0.84C6.44 1.4 6.762 2.128 6.762 3.024C6.762 4.368 6.188 5.29667 5.04 5.81L7.434 9.436H4.858Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 827 B After Width: | Height: | Size: 804 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
11
src/svg/rarity/rare_break.svg
Normal file
11
src/svg/rarity/rare_break.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2589)"/>
|
||||
<path d="M17 12V3H20.1397C20.7034 3 21.1752 3.09521 21.5551 3.28564C21.9375 3.47607 22.2243 3.74268 22.4154 4.08545C22.6091 4.42822 22.7059 4.8252 22.7059 5.27637C22.7059 5.61914 22.6458 5.92529 22.5257 6.19482C22.4056 6.46143 22.2402 6.68262 22.0294 6.8584C21.8186 7.03418 21.5748 7.15723 21.2978 7.22754V7.31543C21.6017 7.33301 21.8824 7.43115 22.1397 7.60986C22.3995 7.78857 22.6078 8.0376 22.7647 8.35693C22.9216 8.67334 23 9.04834 23 9.48193C23 9.96533 22.8971 10.3975 22.6912 10.7783C22.4853 11.1563 22.1875 11.4551 21.7978 11.6748C21.4081 11.8916 20.935 12 20.3787 12H17ZM18.8199 10.2466H19.9449C20.3395 10.2466 20.6299 10.1572 20.8162 9.97852C21.0049 9.79981 21.0993 9.55078 21.0993 9.23145C21.0993 9 21.0539 8.80078 20.9632 8.63379C20.8725 8.46387 20.7439 8.3335 20.5772 8.24268C20.4105 8.14893 20.2108 8.10205 19.9779 8.10205H18.8199V10.2466ZM18.8199 6.7002H19.8272C20.0257 6.7002 20.2022 6.66064 20.3566 6.58154C20.511 6.50244 20.6311 6.38818 20.7169 6.23877C20.8051 6.08936 20.8493 5.90918 20.8493 5.69824C20.8493 5.39648 20.7598 5.15918 20.5809 4.98633C20.402 4.81348 20.1605 4.72705 19.8566 4.72705H18.8199V6.7002Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_295_2589" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.203125" stop-color="#BFBFBF"/>
|
||||
<stop offset="0.505208" stop-color="white"/>
|
||||
<stop offset="0.822917" stop-color="#798194"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg width="30" height="13" viewBox="0 0 30 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 30 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2587)"/>
|
||||
<path d="M21.3173 5.74881C21.2926 5.43482 21.1828 5.19077 20.9878 5.01665C20.7952 4.83968 20.52 4.75119 20.1621 4.75119C19.9251 4.75119 19.7276 4.78687 19.5696 4.85823C19.4117 4.92959 19.2932 5.02807 19.2142 5.15366C19.1352 5.2764 19.0945 5.4177 19.092 5.57755C19.0871 5.70885 19.1093 5.82445 19.1586 5.92436C19.2105 6.02426 19.2845 6.11275 19.3808 6.18982C19.4795 6.26403 19.598 6.32969 19.7363 6.38677C19.8745 6.44386 20.03 6.49382 20.2028 6.53663L20.8545 6.7079C21.2297 6.80209 21.5604 6.92769 21.8468 7.08468C22.1356 7.24167 22.3775 7.42864 22.5725 7.64558C22.77 7.86251 22.9193 8.11227 23.0205 8.39486C23.1217 8.67745 23.1736 8.99429 23.176 9.34539C23.1736 9.89914 23.0526 10.3744 22.8132 10.7712C22.5737 11.1679 22.2294 11.4719 21.7801 11.6832C21.3333 11.8944 20.794 12 20.1621 12C19.5277 12 18.9747 11.8901 18.5033 11.6703C18.0318 11.4505 17.6652 11.1166 17.4036 10.6684C17.1419 10.2203 17.0074 9.65366 17 8.9686H18.7551C18.7699 9.25119 18.8353 9.48668 18.9513 9.67507C19.0673 9.86346 19.2265 10.0062 19.4289 10.1032C19.6338 10.2003 19.8708 10.2488 20.1398 10.2488C20.3867 10.2488 20.5965 10.2103 20.7693 10.1332C20.9446 10.0561 21.0791 9.9491 21.1729 9.81208C21.2667 9.67507 21.3148 9.51808 21.3173 9.3411C21.3148 9.17555 21.2704 9.03425 21.184 8.91722C21.0976 8.79734 20.9643 8.69458 20.7841 8.60894C20.6064 8.52046 20.3793 8.43911 20.1028 8.36489L19.3105 8.15081C18.6538 7.97669 18.1367 7.69553 17.759 7.30733C17.3814 6.91627 17.1938 6.3882 17.1962 5.72312C17.1938 5.18078 17.3197 4.70552 17.5739 4.29734C17.8282 3.88915 18.1799 3.57089 18.6292 3.34253C19.0784 3.11418 19.5906 3 20.1658 3C20.7533 3 21.263 3.1156 21.695 3.34681C22.1294 3.57517 22.4663 3.89629 22.7058 4.31018C22.9452 4.72407 23.0674 5.20362 23.0723 5.74881H21.3173Z" fill="white"/>
|
||||
<path d="M24.1017 11.8887V3.11989H27.2341C27.8019 3.11989 28.2918 3.24834 28.7041 3.50523C29.1188 3.75928 29.4384 4.11465 29.6631 4.57136C29.8877 5.02521 30 5.55328 30 6.15557C30 6.7607 29.8852 7.2902 29.6557 7.74405C29.4286 8.19505 29.104 8.54472 28.6819 8.79305C28.2598 9.04139 27.7587 9.16556 27.1786 9.16556H25.2458V7.49572H26.8379C27.1144 7.49572 27.3452 7.44006 27.5303 7.32874C27.7179 7.21741 27.8599 7.06185 27.9561 6.86204C28.0524 6.65937 28.1005 6.42388 28.1005 6.15557C28.1005 5.8844 28.0524 5.65033 27.9561 5.45338C27.8599 5.25357 27.7179 5.09943 27.5303 4.99096C27.3427 4.88249 27.1119 4.82826 26.8379 4.82826H25.9345V11.8887H24.1017Z" fill="white"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
5
src/svg/rarity/special_art_rare.svg
Normal file
5
src/svg/rarity/special_art_rare.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg viewBox="0 0 25 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.3774 1.80603V4.46603H20.3994C21.3328 4.46603 21.7994 4.0087 21.7994 3.09403C21.7994 2.6927 21.6781 2.38003 21.4354 2.15603C21.1928 1.9227 20.8614 1.80603 20.4414 1.80603H19.3774ZM22.0794 9.49203L20.0354 6.21603H19.3774V9.49203H17.2214V0.0560303H20.4834C21.5381 0.0560303 22.3828 0.33603 23.0174 0.89603C23.6614 1.45603 23.9834 2.18403 23.9834 3.08003C23.9834 4.42403 23.4094 5.3527 22.2614 5.86603L24.6554 9.49203H22.0794Z" fill="white"/>
|
||||
<path d="M10.3134 5.82403H12.5814L12.4834 5.48803C12.2127 4.57336 11.9887 3.79403 11.8114 3.15003C11.6434 2.50603 11.5407 2.0907 11.5034 1.90403L11.4474 1.62403C11.3727 2.13736 11.0274 3.42536 10.4114 5.48803L10.3134 5.82403ZM13.6734 9.49203L13.0994 7.56003H9.79541L9.22141 9.49203H6.96741L10.1174 0.0560303H12.8334L15.9834 9.49203H13.6734Z" fill="white"/>
|
||||
<path d="M5.81 0.476V2.492C5.054 2.05333 4.27 1.834 3.458 1.834C3.094 1.834 2.814 1.90867 2.618 2.058C2.43133 2.20733 2.338 2.39867 2.338 2.632C2.338 2.86533 2.45467 3.07533 2.688 3.262C2.92133 3.43933 3.27133 3.63067 3.738 3.836C4.02733 3.96667 4.26533 4.08333 4.452 4.186C4.648 4.27933 4.86733 4.41467 5.11 4.592C5.362 4.76 5.558 4.942 5.698 5.138C5.84733 5.32467 5.97333 5.558 6.076 5.838C6.17867 6.118 6.23 6.42133 6.23 6.748C6.23 7.59733 5.91733 8.288 5.292 8.82C4.66667 9.34267 3.836 9.604 2.8 9.604C1.68933 9.604 0.784 9.408 0.084 9.016V6.846C0.933333 7.462 1.83867 7.77 2.8 7.77C3.12667 7.77 3.39733 7.686 3.612 7.518C3.82667 7.34067 3.934 7.112 3.934 6.832C3.934 6.73867 3.92 6.65 3.892 6.566C3.864 6.482 3.81267 6.40267 3.738 6.328C3.66333 6.25333 3.58867 6.19267 3.514 6.146C3.44867 6.09 3.346 6.02933 3.206 5.964C3.07533 5.88933 2.96333 5.82867 2.87 5.782C2.77667 5.73533 2.63667 5.67 2.45 5.586C2.27267 5.502 2.128 5.43667 2.016 5.39C1.40933 5.11 0.919333 4.76467 0.546 4.354C0.182 3.94333 0 3.39733 0 2.716C0 1.904 0.298667 1.25067 0.896 0.756001C1.49333 0.252 2.31933 0 3.374 0C4.31667 0 5.12867 0.158667 5.81 0.476Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Reference in New Issue
Block a user