corrected visual/layout bugs on index and 404 pages, added backtotop and 404 analytics tracking
This commit is contained in:
zach
@@ -2,7 +2,7 @@
|
||||
|
||||
---
|
||||
|
||||
<button type="button" class="btn btn-info p-2 rounded-circle" aria-label="Back to Top" id="btn-back-to-top">
|
||||
<button type="button" class="btn btn-info p-2 rounded-circle" aria-label="Back to Top" id="btn-back-to-top" onclick="dataLayer.push({'event': 'backToTop'});">
|
||||
<span class="top-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M232 64C201.1 64 176 89.1 176 120L176 320.6C172.8 322.6 169.6 324.8 166.5 327.1L144 344C123.9 359.1 112 382.8 112 408L112 427.5C112 480.5 141.1 529.2 187.7 554.3L196 558.8C217 570.1 240.4 576 264.3 576L400 576C461.9 576 512 525.9 512 464L512 368C512 332.7 483.3 304 448 304C445.2 304 442.4 304.2 439.7 304.5C428.7 285.1 407.9 272 384 272C378.7 272 373.5 272.7 368.5 273.9C357.7 253.7 336.5 240 312 240C303.5 240 295.4 241.7 288 244.7L288 120C288 89.1 262.9 64 232 64zM208 120C208 106.7 218.7 96 232 96C245.3 96 256 106.7 256 120L256 277.5C256 284.6 260.6 290.8 267.4 292.8C274.2 294.8 281.4 292.2 285.4 286.3C291.2 277.6 301 272 312.1 272C327.7 272 340.7 283.2 343.5 297.9C344.5 303 347.9 307.4 352.7 309.5C357.5 311.6 363 311.3 367.5 308.6C372.3 305.7 378 304 384.1 304C398.8 304 411.3 314 415 327.6C416.2 332 419.2 335.7 423.3 337.7C427.4 339.7 432.1 339.9 436.4 338.3C440 336.9 444 336.1 448.2 336.1C465.9 336.1 480.2 350.4 480.2 368.1L480.2 464.1C480.2 508.3 444.4 544.1 400.2 544.1L264.5 544.1C246 544.1 227.7 539.5 211.4 530.7L211.4 530.7L203.1 526.2C166.6 506.6 144 468.7 144 427.5L144 408C144 392.9 151.1 378.7 163.2 369.6L176 360L176 408C176 416.8 183.2 424 192 424C200.8 424 208 416.8 208 408L208 120z"/></svg></span>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -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