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

mostly complete inventory dashboard/modal

Browse Source
This commit is contained in:
Zach Harding
2026-03-25 09:21:24 -04:00
parent 943bd33c9a
commit 91823174d2
2 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -412,6 +412,18 @@ $cond-text: (
stroke: var(--bs-info-border-subtle);
}
.delete-svg {
width: 1.25rem;
height: 1.25rem;
fill: var(--bs-danger);
stroke: var(--bs-danger);
}
.btn:hover .delete-svg {
fill: var(--bs-danger-border-subtle);
stroke: var(--bs-danger-border-subtle);
}
.shadow-filter {
filter:
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))

58
src/pages/dashboard.astro
View File

@@ -564,47 +564,45 @@ const totalGain = inventory.reduce((s, c) => s + gain(c) * c.qty, 0);
data-name={card.productName}
>
<img
src={`/cards/${card.productId}.jpg`}
src={`static/cards/${card.productId}.jpg`}
alt={card.productName}
loading="lazy"
decoding="async"
class="img-fluid rounded-4 w-100"
onerror="this.onerror=null;this.src='/cards/default.jpg';this.closest('.image-grow')?.setAttribute('data-default','true')"
onerror="this.onerror=null;this.src='static/cards/default.jpg';this.closest('.image-grow')?.setAttribute('data-default','true')"
/>
<span class="position-absolute top-50 start-0 d-inline medium-icon" style="z-index:4">
<FirstEditionIcon edition={card.variant} />
</span>
</div>
</div>
<div class="inv-grid-body">
<div class="inv-grid-main">
<div class="h5">{card.productName}</div>
<div class="inv-grid-meta">
<div class="p">{card.setName}</div>
</div>
<div class="d-flex flex-row justify-content-between my-1 align-items-center">
<div class="btn-group" role="group" aria-label="Quantity controls">
<button type="button" class="btn btn-outline-secondary btn-sm">−</button>
<button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
<button type="button" class="btn btn-outline-secondary btn-sm">+</button>
</div>
<div class="inv-grid-price">
<div class={`inv-grid-trend ${isGain ? "up" : "down"}`}>
<span class="inv-grid-arrow">{isGain ? "▲" : "▼"}</span>
<span class="h6">${market.toFixed(2)}</span>
</div>
<div class={`inv-grid-delta fs-6 ${isGain ? "up" : "down"}`}>
{isGain ? "+" : "-"}${Math.abs(diff).toFixed(2)} ({isGain ? "+" : "-"}{Math.abs(pct).toFixed(2)}%)
</div>
<div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
<div class="d-flex align-items-center gap-2">
<div class="btn-group" role="group" aria-label="Quantity controls">
<button type="button" class="btn btn-outline-secondary btn-sm">−</button>
<button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
<button type="button" class="btn btn-outline-secondary btn-sm">+</button>
</div>
</div>
<div class="btn-group" role="group" aria-label="Quantity controls">
<button type="button" class="btn btn-outline-secondary btn-sm">Edit</button>
<button type="button" class="btn btn-outline-danger btn-sm"><svg class="delete-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="var(--bs-danger)" width="1.25rem"><path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"/></svg></button>
</div>
</div>
</article>
<div class="d-flex flex-row mt-1">
<div class="p small text-secondary">{card.setName}</div>
</div>
<div class="d-flex flex-row mt-1">
<div class="h5">{card.productName}</div>
</div>
<div class="d-flex flex-row mt-1 justify-content-between align-items-baseline">
<div class={`inv-grid-trend small ${isGain ? "up" : "down"}`}>
<span class="inv-grid-arrow">{isGain ? "▲" : "▼"}</span>
<span class="h6 my-0">${market.toFixed(2)}</span>
</div>
<div class={`inv-grid-delta small ${isGain ? "up" : "down"}`}>
{isGain ? "+" : "-"}${Math.abs(diff).toFixed(2)}</br>{isGain ? "+" : "-"}{Math.abs(pct).toFixed(2)}%
</div>
</div>
</article>
</div>
);
})}
@@ -880,9 +878,7 @@ const totalGain = inventory.reduce((s, c) => s + gain(c) * c.qty, 0);
.inv-grid-delta,
.inv-list-delta {
margin-top: .2rem;
font-size: .86rem;
line-height: 1.15;
text-align: right;
}
.inv-grid-delta.up,