moved facets to offcanvas, added button to search bar to open and stylized
This commit is contained in:
zach
@@ -16,7 +16,7 @@ import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
|
||||
<div class="col-12 col-md-7">
|
||||
<h4 class="mt-3">Welcome!</h4>
|
||||
<p class="mt-2">
|
||||
This single-page web applictation is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.</p>
|
||||
This single-page web application is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.</p>
|
||||
</p>
|
||||
<p class="my-2">
|
||||
If you would like to join the waitlist, please enter your email address. You will receive an email with instructions on how to access the app when it becomes available.
|
||||
@@ -25,7 +25,7 @@ import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
|
||||
If you aren't interested in joining the waitlist, that is okay too! Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 offset-md-1 mx-2">
|
||||
<div class="col-12 col-md-4 offset-md-1">
|
||||
<WaitlistAstro />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,7 @@ const conditionAttributes = (price: any) => {
|
||||
const current = price?.marketPrice;
|
||||
const low = price?.lowestPrice;
|
||||
const high = price?.highestPrice;
|
||||
const median = price?.medianPrice;
|
||||
|
||||
if (current === null || low === null || high === null) return "—";
|
||||
|
||||
@@ -73,8 +74,8 @@ const conditionAttributes = (price: any) => {
|
||||
if (range <= 0) return "Low";
|
||||
|
||||
const position = (Number(current) - Number(low)) / range;
|
||||
if (position > 0.75) return "High";
|
||||
if (position > 0.46) return "Medium";
|
||||
if (position > 0.76) return "High";
|
||||
if (position > 0.49) return "Medium";
|
||||
return "Low";
|
||||
})();
|
||||
|
||||
@@ -103,8 +104,10 @@ const ebaySearchUrl = (card: any) => {
|
||||
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<div class="container-fluid">
|
||||
<span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{card?.variant}</span>
|
||||
<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 border-md-start col-auto">{card?.number}</div>
|
||||
<div class="text-secondary col-auto">{card?.variant}</div>
|
||||
</div>
|
||||
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
@@ -113,9 +116,9 @@ const ebaySearchUrl = (card: any) => {
|
||||
<div class="card mb-2 border-0">
|
||||
<div class="row g-4">
|
||||
<div class="col-sm-12 col-md-3">
|
||||
<p class="text-secondary">{card?.set?.setName}</p>
|
||||
<div class="position-relative"><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 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 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?.setName}</div>
|
||||
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,16 +123,19 @@ if (start === 0) {
|
||||
{(start === 0) &&
|
||||
|
||||
<div id="facetContainer" hx-swap-oob="true">
|
||||
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
|
||||
<div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
|
||||
<button type="" form="" class="btn btn-secondary btn-sm me-2">Clear</button>
|
||||
<button type="submit" form="searchform" class="btn btn-secondary btn-sm">Apply Filters</button>
|
||||
</div>
|
||||
{facets.map((facet) => (
|
||||
<div class="mb-4 facet-group">
|
||||
<div class="h5">{facetNames(facet.field_name)}</div>
|
||||
<div class="mt-2 mb-4 facet-group row align-items-center justify-content-between">
|
||||
<div class="h6 m-0 col-auto">{facetNames(facet.field_name)}</div>
|
||||
{(facet.counts.length > 20) &&
|
||||
<input class="facet-filter" type="text" id={`filter_${facet.field_name}`} placeholder="search..." />
|
||||
<input class="facet-filter form-control col-auto me-3" type="text" id={`filter_${facet.field_name}`} placeholder="Search..." />
|
||||
}
|
||||
<div class="facet-list">
|
||||
<div class="facet-list col-11 mt-2">
|
||||
{facet.counts.map((count) => (
|
||||
<div class="facet-item" data-facet-value={count.value.toLowerCase()}>
|
||||
<div class="facet-item form-check" data-facet-value={count.value.toLowerCase()}>
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
|
||||
{count.value} ({count.count})
|
||||
@@ -142,7 +145,6 @@ if (start === 0) {
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
|
||||
</div>
|
||||
|
||||
<script define:vars={{ totalHits, filters, facets }} is:inline>
|
||||
|
||||
@@ -3,7 +3,6 @@ import Layout from '../layouts/Main.astro';
|
||||
import Search from '../components/Search.astro';
|
||||
import CardGrid from "../components/CardGrid.astro";
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
export const prerender = false;
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user