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

created modal component, energy icon component; also included additional BS add-ons and vendor logos (for buttons)

Browse Source
This commit is contained in:
zach
2026-02-19 13:46:42 -05:00
parent df3f68a9b2
commit 493d0a72fa
22 changed files with 430 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/_bootstrap.scss
View File

@@ -23,16 +23,16 @@
// @import 'bootstrap/scss/badge';
// @import 'bootstrap/scss/breadcrumb';
// @import 'bootstrap/scss/button-group';
// @import 'bootstrap/scss/buttons';
// @import 'bootstrap/scss/card';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/card';
// @import 'bootstrap/scss/carousel';
// @import 'bootstrap/scss/close';
@import 'bootstrap/scss/close';
// @import 'bootstrap/scss/dropdown';
// @import 'bootstrap/scss/forms';
@import 'bootstrap/scss/grid';
// @import 'bootstrap/scss/list-group';
@import 'bootstrap/scss/modal';
// @import 'bootstrap/scss/navbar';
@import 'bootstrap/scss/navbar';
// @import 'bootstrap/scss/offcanvas';
// @import 'bootstrap/scss/pagination';
// @import 'bootstrap/scss/placeholders';
@@ -42,7 +42,7 @@
// @import 'bootstrap/scss/tables';
// @import 'bootstrap/scss/toasts';
// @import 'bootstrap/scss/tooltip';
// @import 'bootstrap/scss/transitions';
@import 'bootstrap/scss/transitions';
// Optional helpers
// @import 'bootstrap/scss/helpers';

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

@@ -30,6 +30,107 @@
// ----------------------
// Card
// ----------------------
.tcg-card {
cursor: pointer;
}
.modal-xl {
@media (min-width: 768px) {
max-width: 90vw;
}
@media (min-width: 1200px) {
max-width: 85vw;
}
@media (min-width: 1400px) {
max-width: 75vw;
}
}
.card-modal {
background-color: rgba(1, 11, 18, .8);
cursor: default;
}
.nav-link:hover, .nav-link:focus {
color: rgba(255, 255, 255, 0.87);
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: rgba(0, 0, 0, .94);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: rgba(0, 0, 0, .0);
}
.nav-link {
font-weight: 600;
color: rgba(255,255,255,67);
transition: margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
}
.nav-link:hover, .nav-link:focus {
color: rgba(0, 0, 0, 0.87);
}
.nav-link.nm, .nav-link.nm:hover, .nav-link.nm:focus {
border-bottom: 3px solid rgba(156, 204, 102, 1);
}
.nav-link.nm:hover, .nav-link.nm:focus {
background-color: rgba(156, 204, 102, .67);
}
.nav-link.nm.active {
background-color: rgba(156, 204, 102, 1);
border-bottom: 3px solid rgba(156, 204, 102, 1);
}
.nav-link.lp, .nav-link.lp:hover, .nav-link.lp:focus {
border-bottom: 3px solid rgba(211, 225, 86, 1);
}
.nav-link.lp:hover, .nav-link.lp:focus {
background-color: rgba(211, 225, 86, .67);
}
.nav-link.lp.active {
background-color: rgba(211, 225, 86, 1);
border-bottom: 3px solid rgba(211, 225, 86, 1);
}
.nav-link.mp, .nav-link.mp:hover, .nav-link.mp:focus {
border-bottom: 3px solid rgba(255, 238, 87, 1);
}
.nav-link.mp:hover, .nav-link.mp:focus {
background-color: rgba(255, 238, 87, .67);
}
.nav-link.mp.active {
background-color: rgba(255, 238, 87, 1);
border-bottom: 3px solid rgba(255, 238, 87, 1);
}
.nav-link.hp, .nav-link.hp:hover, .nav-link.hp:focus {
border-bottom: 3px solid rgba(255, 201, 41, 1);
}
.nav-link.hp:hover, .nav-link.hp:focus {
background-color: rgba(255, 201, 41, .67);
}
.nav-link.hp.active {
background-color: rgba(255, 201, 41, 1);
border-bottom: 3px solid rgba(255, 201, 41, 1);
}
.nav-link.dmg, .nav-link.dmg:hover, .nav-link.dmg:focus {
border-bottom: 3px solid rgba(255, 167, 36, 1);
}
.nav-link.dmg:hover, .nav-link.dmg:focus {
background-color: rgba(255, 167, 36, .67);
}
.nav-link.dmg.active {
background-color: rgba(255, 167, 36, 1);
border-bottom: 3px solid rgba(255, 167, 36, 1);
}
.dark-callout {
@media (min-width: 768px) {
background-color: rgba(44, 48, 59, 1);
}
}
.card-image {
aspect-ratio: 23/32;
object-fit: cover;
@@ -42,6 +143,12 @@
margin-top: -0.25rem;
}
.energy-icon svg {
width: 100%;
max-height: 16px;
margin-top: -0.25rem;
}
// ----------------------
// Pricing
// ----------------------
@@ -117,7 +224,7 @@
// Sticky Bar
// ----------------------
.sticky {
background-color: hsl(195, 4%, 22%);
background-color: hsl(205, 89%, 4%);
position: fixed;
bottom: 0;
width: 100%;

7
src/components/Card.astro
View File

@@ -4,6 +4,7 @@ import { isConditionalExpression } from 'typescript';
import { client } from '../db/typesense.ts';
import { db } from '../db';
import RarityIcon from './RarityIcon.astro';
import EnergyIcon from './EnergyIcon.astro';
//import * as schema from '../db/schema.ts';
const { query } = Astro.props;
@@ -38,7 +39,7 @@ const formatPrice = (price:any) => {
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{pokemon.map((card) => (
<div class="col">
<div class="col tcg-card" data-bs-toggle="modal" data-bs-target="#cardModal">
<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="row row-cols-5 gx-1 price-row mb-2">
{card.prices
@@ -55,8 +56,8 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
))}
</div>
<div class="h5 my-0">{card.productName}</div>
<div class="d-flex flex-row lh-1">
<div class="copy-small d-none d-lg-flex flex-grow-1">{card.set?.setCode}</div>
<div class="d-flex flex-row lh-1 mt-1">
<div class="copy-small flex-grow-1">{card.set?.setCode}</div>
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>

183
src/components/CardModal.astro
View File

@@ -1,3 +1,184 @@
---
import Card from '../components/Card.astro';
import ebay from "/vendors/ebay.svg?raw";
---
---
<!-- Modal -->
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content">
<div class="modal-header border-0">
<h4 class="card-title">Card title | <span class="text-secondary">Card Number</span> Energy</h4>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body pt-0">
<div class="container-fluid">
<div class="card mb-2 border-0">
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<h6 class="text-secondary">Set name | Set Symbol</h6>
<img src="/cards/noImage.webp" class="card-image img-fluid rounded" alt="...">
<div class="d-flex flex-row justify-content-between mt-2">
<div>Illustrator</div>
<div>Rarity</div>
</div>
</div>
<div class="col-sm-12 col-md-7">
<nav>
<div class="nav nav-tabs nav-sm-fill border-0" id="nav-tab" role="tablist">
<button class="nav-link nm active" id="nav-nm" 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 lp" id="nav-lp" 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 mp" id="nav-mp" 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 hp" id="nav-hp" 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 dmg" id="nav-dmg" 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>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-nm" role="tabpanel" aria-labelledby="nav-nm" tabindex="0">
<div class="row g-2 mt-2">
<div class="d-inline-flex flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
<div class="dark-callout rounded p-2 mb-2">
<h6>Market Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Lowest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Highest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Volatility</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2 flex-fill">
<h6>Latest Sales</h6>
<p></p>
</div>
</div>
<div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-lp" role="tabpanel" aria-labelledby="nav-lp" tabindex="0">
<div class="row g-2 mt-2">
<div class="d-flex flex-column mt-2 col-3">
<div class="dark-callout rounded p-2 mb-2">
<h6>Market Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Lowest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Highest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Volatility</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2 flex-fill">
<h6>Latest Sales</h6>
<p></p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-mp" role="tabpanel" aria-labelledby="nav-mp" tabindex="0">
<div class="row g-2 mt-2">
<div class="d-flex flex-column mt-2 col-3">
<div class="dark-callout rounded p-2 mb-2">
<h6>Market Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Lowest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Highest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Volatility</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2 flex-fill">
<h6>Latest Sales</h6>
<p></p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-hp" role="tabpanel" aria-labelledby="nav-hp" tabindex="0">
<div class="row g-2 mt-2">
<div class="d-flex flex-column mt-2 col-3">
<div class="dark-callout rounded p-2 mb-2">
<h6>Market Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Lowest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Highest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Volatility</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2 flex-fill">
<h6>Latest Sales</h6>
<p></p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-dmg" role="tabpanel" aria-labelledby="nav-dmg" tabindex="0">
<div class="row g-2 mt-2">
<div class="d-flex flex-column mt-2 col-3">
<div class="dark-callout rounded p-2 mb-2">
<h6>Market Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Lowest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Highest Price</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2">
<h6>Volatility</h6>
<p></p>
</div>
<div class="dark-callout rounded p-2 mb-2 flex-fill">
<h6>Latest Sales</h6>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-2">
<button type="button" class="btn btn-secondary mb-2 w-100"><img src="/vendors/tcgplayer.webp"> TCGPlayer</button>
<button type="button" class="btn btn-secondary mb-2 w-100"><span set:html={ebay} /></button>
</div>
</div>
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

33
src/components/EnergyIcon.astro Normal file
View File

@@ -0,0 +1,33 @@
---
import grass from "/src/svg/energy/grass.svg?raw";
import fairy from "/src/svg/energy/fairy.svg?raw";
import dark from "/src/svg/energy/dark.svg?raw";
import dragon from "/src/svg/energy/dragon.svg?raw";
import fire from "/src/svg/energy/fire.svg?raw";
import water from "/src/svg/energy/water.svg?raw";
import electric from "/src/svg/energy/electric.svg?raw";
import steel from "/src/svg/energy/steel.svg?raw";
import colorless from "/src/svg/energy/colorless.svg?raw";
import fighting from "/src/svg/energy/fighting.svg?raw";
import psychic from "/src/svg/energy/psychic.svg?raw";
const { energy } = Astro.props;
const energyMap = {
"Grass": grass,
"Fairy": fairy,
"Dark": dark,
"Dragon": dragon,
"Fire": fire,
"Water": water,
"Steel": steel,
"Colorless": colorless,
"Fighting": fighting,
"Psychic": psychic,
"Electric": electric,
};
const svg = energyMap[energy as keyof typeof energyMap] ?? "";
---
<div class="energy-icon ps-2" set:html={svg}></div>

2
src/components/StickyFilter.astro
View File

@@ -11,7 +11,7 @@ const { query } = Astro.props;
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
</div>
<div class="my-2">
<input type="submit" class="btn btn-primary w-100 search-button" value="Search" />
<input type="submit" class="w-100 search-button" value="Search" />
</div>
</div>
</form>

4
src/layouts/Main.astro
View File

@@ -16,7 +16,7 @@ import '/src/assets/css/main.scss';
<script>
// Import only what you need
// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
@@ -24,7 +24,7 @@ import '/src/assets/css/main.scss';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';
</script>

3
src/pages/pokemon.astro
View File

@@ -2,6 +2,7 @@
import Layout from '../layouts/Main.astro';
import CardGrid from "../components/CardGrid.astro";
import Card from "../components/Card.astro";
import CardModal from '../components/CardModal.astro';
import StickyFilter from '../components/StickyFilter.astro';
export const prerender = false;
@@ -20,6 +21,8 @@ const query = searchParams.get('q') || '*';
<CardGrid>
<Card slot="Card" query={query}></Card>
</CardGrid>
<CardModal>
</CardModal>
</div>
</div>
</Layout>

1
src/svg/energy/colorless.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

1
src/svg/energy/dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

1
src/svg/energy/dragon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

1
src/svg/energy/electric.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

1
src/svg/energy/fairy.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

1
src/svg/energy/fighting.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

1
src/svg/energy/fire.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

1
src/svg/energy/grass.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

1
src/svg/energy/psychic.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

1
src/svg/energy/steel.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

1
src/svg/energy/water.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB