corrected visual/layout bugs on index and 404 pages, added backtotop and 404 analytics tracking
This commit is contained in:
zach
@@ -39,20 +39,15 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
|
||||
<p class="mb-0">Click the image to reveal.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-0 mx-auto position-relative overflow-hidden d-flex">
|
||||
<img class="whos-that-pokemon position-absolute" src="/404/lines.gif">
|
||||
<div class="p-0 ratio ratio-1x1 position-relative overflow-hidden d-flex justify-items-center">
|
||||
<img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif">
|
||||
|
||||
<div class="mx-auto d-flex flex-col-reverse flex-lg-row">
|
||||
<div class="ratio ratio-1x1 relative">
|
||||
<div class="d-flex flex-col-reverse flex-lg-row">
|
||||
<div class="">
|
||||
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
|
||||
|
||||
<!-- ✨ Name is placed in a data attribute for later use -->
|
||||
<img
|
||||
class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle"
|
||||
src={pokedexImage}
|
||||
alt={pokemonName}
|
||||
data-name={pokemonName}
|
||||
/>
|
||||
<img class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={pokedexImage} alt={pokemonName} data-name={pokemonName} onclick="dataLayer.push({'event': '404reveal','pokemonName': this.getAttribute('data-name')});"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,19 +13,19 @@ import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
|
||||
<div class="row mb-4" slot="page">
|
||||
<h1>Rigid's App Thing</h1>
|
||||
<h5 class="text-secondary">(working title)</h5>
|
||||
<div class="col-12 col-md-7">
|
||||
<div class="col-12 col-md-6 col-xl-7 mb-2">
|
||||
<h4 class="mt-3">Welcome!</h4>
|
||||
<p class="mt-2">
|
||||
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>
|
||||
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 closed beta is complete, the app will move into a more open beta.</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.
|
||||
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 to you.
|
||||
</p>
|
||||
<p class="my-2">
|
||||
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">
|
||||
<div class="col-12 col-md-6 col-xl-4 offset-xl-1">
|
||||
<WaitlistAstro />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -96,7 +96,7 @@ const conditionAttributes = (price: any) => {
|
||||
};
|
||||
|
||||
const ebaySearchUrl = (card: any) => {
|
||||
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`;
|
||||
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
|
||||
};
|
||||
---
|
||||
|
||||
@@ -106,7 +106,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<div class="modal-header border-0">
|
||||
<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?.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>
|
||||
@@ -118,7 +118,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<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 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">{card?.set?.setCode}</div>
|
||||
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,30 +148,30 @@ const ebaySearchUrl = (card: any) => {
|
||||
const attributes = conditionAttributes(price);
|
||||
return (
|
||||
<div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
|
||||
<div class="d-block gap-2 d-md-flex">
|
||||
<div class="d-block gap-1 d-md-flex">
|
||||
<div class="d-flex flex-row flex-md-column gap-1 col-12 col-md-2 mb-0">
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
|
||||
<h6>Market Price</h6>
|
||||
<p class="pb-0">${price.marketPrice}</p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
|
||||
<h6>Lowest Price</h6>
|
||||
<p class="pb-0">${price.lowestPrice}</p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
|
||||
<h6>Highest Price</h6>
|
||||
<p class="pb-0">${price.highestPrice}</p>
|
||||
</div>
|
||||
<div class={`alert alert-secondary rounded p-2 flex-fill mb-2 ${attributes?.volatilityClass}`}>
|
||||
<div class={`alert alert-secondary rounded p-2 flex-fill mb-1 ${attributes?.volatilityClass}`}>
|
||||
<h6>Volatility</h6>
|
||||
<p class="pb-0">{attributes?.volatility}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-1 col-12 col-md-10 mb-0 me-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-1">
|
||||
<h6>Latest Sales</h6>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 mb-1">
|
||||
<h6>Placeholder for graph</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -131,7 +131,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
|
||||
{(facet.counts.length > 20) &&
|
||||
<input class="facet-filter form-control col-auto me-3" type="text" id={`filter_${facet.field_name}`} placeholder="Search..." />
|
||||
}
|
||||
<div class="facet-list col-11 mt-2">
|
||||
<div class="facet-list col-12 mt-2">
|
||||
{facet.counts.map((count:any) => (
|
||||
<div class="facet-item form-check form-switch" data-facet-value={count.value.toLowerCase()}>
|
||||
<label class="form-check-label fs-7">
|
||||
@@ -204,7 +204,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
|
||||
<div class="text-secondary">{card.number}</div>
|
||||
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
|
||||
</div>
|
||||
<div>{card.variant}<span class="d-none">{card.productId}</span></div>
|
||||
<div>{card.variant}</div><span class="d-none">{card.productId}</span>
|
||||
</div>
|
||||
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user