added auth and made some sizeable updates to mobile layout
This commit is contained in:
zach
@@ -119,13 +119,13 @@ const ebaySearchUrl = (card: any) => {
|
||||
<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 d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" 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"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-3" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" 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?.Artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<ul class="nav nav-tabs nav-fill border-0 me-3" id="myTab" role="tablist">
|
||||
<ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link nm active" id="nm-tab" 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>
|
||||
</li>
|
||||
@@ -142,7 +142,7 @@ const ebaySearchUrl = (card: any) => {
|
||||
<button class="nav-link dmg" id="dmg-tab" 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>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
|
||||
<button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
@@ -150,35 +150,35 @@ 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="row g-2 mt-2">
|
||||
<div class="row row-cols-4 row-cols-md-1 mt-2 col-12 col-md-2">
|
||||
<div class="col alert alert-secondary rounded p-2 mb-2">
|
||||
<div class="d-block gap-2 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">
|
||||
<h6>Market Price</h6>
|
||||
<p>${price.marketPrice}</p>
|
||||
<p class="pb-0">${price.marketPrice}</p>
|
||||
</div>
|
||||
<div class="col alert alert-secondary rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
||||
<h6>Lowest Price</h6>
|
||||
<p>${price.lowestPrice}</p>
|
||||
<p class="pb-0">${price.lowestPrice}</p>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
||||
<h6>Highest Price</h6>
|
||||
<p>${price.highestPrice}</p>
|
||||
<p class="pb-0">${price.highestPrice}</p>
|
||||
</div>
|
||||
<div class={`col alert alert-secondary rounded p-2 mb-2 ${attributes?.volatilityClass}`}>
|
||||
<div class={`alert alert-secondary rounded p-2 flex-fill mb-2 ${attributes?.volatilityClass}`}>
|
||||
<h6>Volatility</h6>
|
||||
<p>{attributes?.volatility}</p>
|
||||
<p class="pb-0">{attributes?.volatility}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 col-12 col-md-10">
|
||||
<div class="col-12 alert alert-secondary rounded p-2 mb-2">
|
||||
</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">
|
||||
<h6>Latest Sales</h6>
|
||||
</div>
|
||||
<div class="col-12 alert alert-secondary rounded mb-1 py-2 ">
|
||||
<p class="h6">Placeholder for graph</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-secondary rounded p-2 mb-2">
|
||||
<h6>Placeholder for graph</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
||||
@@ -189,8 +189,8 @@ const ebaySearchUrl = (card: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank"><span set:html={ebay} /></a>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
|
||||
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>
|
||||
|
||||
Reference in New Issue
Block a user