dashboard/inventory styling, fixed contact layout with new branding, consolidated all inline styles to main.scss
This commit is contained in:
Zach Harding
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from "../layouts/Main.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import BackToTop from "../components/BackToTop.astro";
|
||||
import FirstEditionIcon from "../components/FirstEditionIcon.astro";
|
||||
import { db } from '../db/index';
|
||||
import { inventory, skus } from '../db/schema';
|
||||
@@ -28,13 +29,14 @@ const totalGain = summary.totalGain || 0;
|
||||
---
|
||||
|
||||
<Layout title="Inventory Dashboard">
|
||||
|
||||
<div class="row g-0" style="min-height: calc(100vh - 120px)" slot="page">
|
||||
<div class="container-fluid container-sm mt-3" slot="page">
|
||||
<BackToTop />
|
||||
<div class="row mb-4">
|
||||
<aside class="col-12 col-md-2 border-end border-secondary bg-dark p-3 d-flex flex-column gap-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0 text-uppercase text-secondary fw-bold ls-wide" style="letter-spacing:.08em">Catalogs</h6>
|
||||
<button
|
||||
class="btn btn-sm btn-success fs-7"
|
||||
class="btn btn-purple-secondary fs-7"
|
||||
title="New catalog"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
@@ -44,7 +46,7 @@ const totalGain = summary.totalGain || 0;
|
||||
|
||||
<ul id="catalogList" class="list-group list-group-flush">
|
||||
<li
|
||||
class="list-group-item list-group-item-action bg-transparent text-light border-0 rounded px-2 py-2 d-flex align-items-center justify-content-between active"
|
||||
class="list-group-item list-group-item-action fw-semibold border-0 rounded p-2 d-flex align-items-center active"
|
||||
data-catalog="all"
|
||||
role="button"
|
||||
style="cursor:pointer"
|
||||
@@ -52,7 +54,7 @@ const totalGain = summary.totalGain || 0;
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
View all cards
|
||||
</span>
|
||||
<span class="badge rounded-pill text-bg-secondary small">{totalQty}</span>
|
||||
<span class="badge rounded-pill text-bg-secondary small ms-auto">{totalQty}</span>
|
||||
</li>
|
||||
|
||||
{["Case Cards", "Japanese Singles", "Bulk"].map((name) => (
|
||||
@@ -70,52 +72,58 @@ const totalGain = summary.totalGain || 0;
|
||||
<div class="mt-auto pt-3 border-top border-secondary small text-secondary">
|
||||
<div class="d-flex justify-content-between mb-1"><span>Total Cards</span><span class="text-light fw-semibold">{totalQty}</span></div>
|
||||
<div class="d-flex justify-content-between mb-1"><span>Market Value</span><span class="text-success fw-semibold">${totalValue.toFixed(0)}</span></div>
|
||||
<div class="d-flex justify-content-between"><span>Profit/Loss</span><span class={`fw-semibold ${totalGain >= 0 ? "text-success" : "text-danger"}`}>{totalGain >= 0 ? "+" : ""}${Math.abs(totalGain).toFixed(0)}</span></div>
|
||||
<div class="d-flex justify-content-between"><span>Gain/Loss</span><span class={`fw-semibold ${totalGain >= 0 ? "text-success" : "text-danger"}`}>{totalGain >= 0 ? "+" : ""}${Math.abs(totalGain).toFixed(0)}</span></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="col-12 col-md-10 p-4">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center mb-4">
|
||||
<!--div class="d-flex align-items-center gap-1">
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<button id="btnGrid" type="button" class="btn btn-sm btn-link text-secondary px-1 view-toggle-btn active" title="Images view">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3A1.5 1.5 0 0 1 15 10.5v3A1.5 1.5 0 0 1 13.5 15h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</svg>
|
||||
<span class="small ms-1">Images</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1.5rem" height="1.5rem" fill="currentColor"><path d="M351.6 220.4C349.7 258.3 381.1 288.3 418 286.5L527.6 281.1C593 275.5 589.7 214.9 589 162.5C593.9 90.4 588.4 39.6 502.4 44.6C391.5 42.2 352.5 36.7 354.5 164.3C353.4 183.3 352.4 202.4 351.5 220.3zM418.4 168.6L418.4 168.6C419.6 147.4 420.8 125.9 421.6 109.4C421.6 109.2 421.6 109.1 421.7 109C421.7 108.8 422 108.6 422.1 108.6C456.2 108.5 491.4 108.6 525.7 108.7C525.8 108.7 526 109 526.1 109.1L526.1 109.3C525.5 142.4 524.9 184.6 524.2 217.3L415.6 222.6C416.3 207.3 417.4 188.1 418.5 168.7zM301.4 112.5C303.3 74.7 272 44.6 235 46.4L125.4 51.8C40.8 58.8 69.2 164.2 63.1 222.4C62.4 258.3 91.2 288.3 127.5 288.3C159.4 288.3 198.3 288.3 231 288.3C298.6 286.3 297.2 220.3 298.5 168.6C299.6 149.6 300.6 130.5 301.5 112.6zM234.6 164.3C233.4 185.6 232.2 207 231.4 223.5C231.4 223.7 231.4 223.8 231.3 223.9C231.3 224 231.1 224.2 231.1 224.2L231 224.3C198.3 224.2 159.3 224.3 127.3 224.3C127.3 224.3 127.2 224.3 127.1 224.2C127 224.1 126.9 224 126.9 224L126.9 223.8C127.5 192.1 128.1 149.9 128.8 115.8L237.4 110.5C236.7 125.8 235.6 145 234.5 164.4zM63.6 404C64.5 421.9 65.5 441 66.6 460C68.2 512.2 65.9 577.1 134.1 579.7L237.6 579.7C273.9 579.7 302.7 549.7 302 513.9C301.7 498.8 301.4 480.4 301.1 461.9C301.8 409.5 305 348.9 239.7 343.3L130 338C93 336.2 61.7 366.2 63.6 404.1zM130.4 455.8C129.3 436.4 128.3 417.1 127.5 401.8L236.1 407.1C236.8 441.2 237.3 483.4 238 515C238 515.1 238 515.1 238 515.2C238 515.3 237.9 515.4 237.8 515.5C237.7 515.6 237.6 515.6 237.6 515.6C205.8 515.6 166.4 515.5 134 515.6C133.9 515.6 133.7 515.3 133.7 515.2C133.6 515.1 133.6 515 133.6 514.8C132.8 498.3 131.6 476.9 130.4 455.6L130.4 455.6zM523 578.1C560 579.9 591.3 549.8 589.4 512C588.5 494.1 587.5 475 586.4 456C585.9 381.4 580.2 328.2 490 336.3C457.9 336.4 439 336.3 415.4 336.3C379.1 336.3 350.3 366.3 351 402.1C351.3 417.2 351.6 435.6 351.9 454.1C351.2 506.5 348 567.1 413.3 572.7L523 578.1zM525.5 514.1L416.9 508.8C416.2 474.7 415.7 432.5 415 400.9L415 400.7C415 400.6 415.3 400.3 415.3 400.3C443.6 400.3 484.7 400.3 518.9 400.3C518.9 400.3 519 400.3 519.1 400.4C519.2 400.5 519.3 400.6 519.3 400.7C519.4 400.8 519.4 400.9 519.4 401.1C521.1 435.4 524 484.9 525.4 514.3z"/></svg>
|
||||
<span class="ms-1">Grid</span>
|
||||
</button>
|
||||
<button id="btnTable" type="button" class="btn btn-sm btn-link text-secondary px-1 view-toggle-btn" title="List view">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
<span class="small ms-1">List</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1.5rem" height="1.5rem" fill="currentColor" style="d-inline"><path d="M102.3 211.8C110.7 214 118.9 213.7 126.2 210C132.6 208 138.3 204 142.4 198.4C184.2 169.6 148.5 98.8 98.3 108.3C39.6 119.9 49.3 205.8 102.2 211.8zM114.4 375.6C114.4 375.6 114.8 375.5 116.2 375.3L116.5 375.2C169.2 368.9 178.6 283.3 120.1 271.7C69.9 262.3 34.2 332.9 76 361.8C80.1 367.4 85.9 371.4 92.3 373.4C99 376.6 106.8 377.6 114.5 375.5zM116.8 423.5C63.5 413.9 30 495.4 84.4 522.3C130.5 544.4 183.2 485.4 150.4 446.7C147.9 440.2 143.4 434.9 137.7 431.2C132.1 426.4 124.8 423.5 116.8 423.5zM352.8 508.4C423.1 503.6 491.2 499 561.5 501.8C579.2 502.5 594.1 488.8 594.8 471.1C595.5 453.4 581.7 438.6 564.1 437.9C490.4 435 416.4 439.9 344.2 444.8C310.8 447 277.8 449.3 245.4 450.7C227.7 451.4 214 466.4 214.8 484C215.5 501.7 230.5 515.4 248.1 514.6C283.8 513 318.6 510.7 352.8 508.4zM344 344.8L344.3 344.8C412.9 343.4 479.9 342.9 548.3 346.2C566 347 580.9 333.3 581.7 315.6C582.5 298 568.8 283 551.1 282.2C482.2 278.8 412.2 279.3 343.1 280.7C310.3 281.3 277.9 281.9 245.8 281.9C228.1 281.9 213.8 296.2 213.8 313.9C213.8 331.6 228.1 345.9 245.8 345.9C278.5 345.9 311.4 345.3 343.9 344.7zM444.8 187.4C480.8 186.5 519 181.7 551.8 187.6C569.2 190.7 585.8 179.1 588.9 161.7C592 144.3 580.4 127.7 563 124.6C484.4 115.2 408.3 126.5 331 129.9C301.8 131.9 273.7 133 246 131.4C228.4 130.3 213.2 143.8 212.2 161.4C213.8 217.2 300.2 190.8 335.5 193.7C372.2 191.2 408.7 188.4 444.8 187.4z"/></svg>
|
||||
<span class="ms-1">List</span>
|
||||
</button>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div class="vr opacity-25 mx-1"></div>
|
||||
|
||||
<a href="/pokemon" class="btn btn-sm btn-vendor">+ Add Card</a>
|
||||
<a href="/pokemon" class="btn btn-vendor">+ Add Card</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-light"
|
||||
class="btn btn-secondary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bulkImportModal"
|
||||
>Bulk Import</button>
|
||||
|
||||
<div class="ms-auto position-relative">
|
||||
<input
|
||||
id="inventorySearch"
|
||||
class="form-control form-control-sm bg-dark text-light border-secondary"
|
||||
placeholder="Search inventory…"
|
||||
style="min-width:200px; padding-right:2rem"
|
||||
/>
|
||||
<button
|
||||
id="clearSearch"
|
||||
type="button"
|
||||
class="btn btn-sm p-0 position-absolute top-50 end-0 translate-middle-y me-2 text-secondary d-none"
|
||||
style="line-height:1"
|
||||
aria-label="Clear search"
|
||||
>✕</button>
|
||||
<div class="input-group">
|
||||
<input type="hidden" name="start" id="start" value="0" />
|
||||
<input type="hidden" name="sort" id="sortInput" value="" />
|
||||
<input type="hidden" name="language" id="languageInput" value="all" />
|
||||
<input type="search" name="i" id="searchInput" class="form-control search-input" placeholder="Search your inventory" />
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-purple border-start-0"
|
||||
aria-label="search"
|
||||
onclick="
|
||||
const i = this.closest('form').querySelector('[name=i]').value;
|
||||
dataLayer.push({ event: 'view_inventory_results', search_term: i });
|
||||
if (window.location.pathname !== '/dashboard') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
sessionStorage.setItem('pendingSearch', 1);
|
||||
window.location.href = '/dashboard';
|
||||
}
|
||||
"
|
||||
>
|
||||
<svg aria-hidden="true" class="search-button d-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M503.7 304.9C520.3 80.3 214-44 100.9 169.4C-14.1 383.9 203.9 614.6 419.8 466.3C459.7 500.3 494.8 542.3 531.5 578.2C561.1 607.7 606.3 562.8 576.8 533L540 496.1C520.2 471.6 495.7 449.1 473.7 428.9C471.1 426.5 468.5 424.2 466 421.9C491.9 385.4 500.1 341 503.7 304.8zM236.1 129C334 92.1 452.1 198.1 440 298.6C440.5 404.9 335.6 462.2 244 445.8C99 407.1 100.3 178.9 236.2 129z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -199,8 +207,8 @@ const totalGain = summary.totalGain || 0;
|
||||
</div> -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="modal fade" id="newCatalogModal" tabindex="-1" aria-labelledby="newCatalogLabel" aria-modal="true" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content bg-dark text-light border border-secondary">
|
||||
@@ -282,288 +290,5 @@ const totalGain = summary.totalGain || 0;
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<Footer slot="footer" />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
||||
.view-toggle-btn {
|
||||
text-decoration: none;
|
||||
color: var(--bs-secondary-color) !important;
|
||||
}
|
||||
|
||||
.view-toggle-btn.active {
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
.view-toggle-btn.active svg,
|
||||
.view-toggle-btn:hover svg {
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
#catalogList .list-group-item.active {
|
||||
background-color: rgba(var(--bs-danger-rgb), .15) !important;
|
||||
color: rgba(var(--bs-danger-rgb), 1) !important;
|
||||
border-left: 2px solid var(--bs-danger) !important;
|
||||
}
|
||||
|
||||
#gridView {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.inv-grid-card {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inv-grid-media {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inv-grid-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: .85rem .15rem 0;
|
||||
}
|
||||
|
||||
.inv-grid-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.inv-grid-title {
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.05;
|
||||
font-weight: 500;
|
||||
margin-bottom: .4rem;
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.inv-grid-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .2rem;
|
||||
}
|
||||
|
||||
.inv-grid-submeta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .35rem;
|
||||
font-size: .9rem;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.inv-grid-price {
|
||||
min-width: 112px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
color: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
.inv-grid-trend,
|
||||
.inv-list-price-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: .35rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.inv-grid-value,
|
||||
.inv-list-price {
|
||||
font-size: 1.15rem;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.inv-grid-trend.up .inv-grid-arrow,
|
||||
.inv-list-price-line.up .inv-grid-arrow {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.inv-grid-trend.down,
|
||||
.inv-list-price-line.down {
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.inv-grid-delta,
|
||||
.inv-list-delta {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.inv-grid-delta.up,
|
||||
.inv-list-delta.up {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.inv-grid-delta.down,
|
||||
.inv-list-delta.down {
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.inv-grid-qty,
|
||||
.inv-list-qty {
|
||||
margin-top: .35rem;
|
||||
font-size: .9rem;
|
||||
color: #1ea7a1;
|
||||
}
|
||||
|
||||
.inv-grid-cart,
|
||||
.inv-list-cart {
|
||||
position: absolute;
|
||||
right: .35rem;
|
||||
bottom: .1rem;
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #4cb7b3;
|
||||
background: transparent;
|
||||
color: #38a9a5;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .15s ease;
|
||||
}
|
||||
|
||||
.inv-grid-cart:hover,
|
||||
.inv-list-cart:hover {
|
||||
background: rgba(76, 183, 179, .08);
|
||||
color: #2a9a96;
|
||||
}
|
||||
|
||||
#tableView {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.inv-list-wrap {
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.inv-list-table {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-hover-bg: transparent;
|
||||
--bs-table-color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inv-list-table tbody,
|
||||
.inv-list-table tr,
|
||||
.inv-list-table td {
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.inv-list-row + .inv-list-row .inv-list-cardcell {
|
||||
border-top: 1px solid rgba(0, 0, 0, .08) !important;
|
||||
}
|
||||
|
||||
.inv-list-cardcell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inv-list-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
min-height: 116px;
|
||||
padding: .8rem 4.5rem .8rem .35rem;
|
||||
background: #f3f3f3;
|
||||
border: 1px solid rgba(0, 0, 0, .08);
|
||||
border-radius: .35rem;
|
||||
}
|
||||
|
||||
.inv-list-thumb {
|
||||
width: 70px;
|
||||
flex: 0 0 70px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inv-list-thumb img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.inv-list-info {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.inv-list-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: .35rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.inv-list-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.inv-list-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .1rem;
|
||||
font-size: .95rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.inv-list-setlink {
|
||||
color: #5b6f8f;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.inv-list-condition {
|
||||
margin-top: .35rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .35rem;
|
||||
font-size: .95rem;
|
||||
color: #2b7a78;
|
||||
}
|
||||
|
||||
.inv-list-right {
|
||||
margin-left: auto;
|
||||
min-width: 140px;
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.inv-grid-body {
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.inv-grid-price {
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.inv-grid-trend {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.inv-list-card {
|
||||
align-items: flex-start;
|
||||
padding-right: 3.75rem;
|
||||
}
|
||||
|
||||
.inv-list-right {
|
||||
min-width: 0;
|
||||
padding-right: .25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user