Compare commits
23 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 khwezi
|
7de957ed6f | ||
 Khwezi Mngoma
|
52e3ab16bf | ||
|
khwezi
|
16fdcc8005 | ||
|
Khwezi Mngoma
|
26cd12532c | ||
|
khwezi
|
a614d14da5 | ||
|
Khwezi Mngoma
|
01a0264452 | ||
|
Khwezi Mngoma
|
af02cbc649 | ||
|
khwezi
|
b722ea2cd0 | ||
|
Khwezi Mngoma
|
7a1a7566d6 | ||
|
Khwezi Mngoma
|
f2ff7e3647 | ||
|
Khwezi Mngoma
|
e5358160dd | ||
|
Khwezi Mngoma
|
07749bd68c | ||
|
khwezi
|
73145fd360 | ||
|
Khwezi Mngoma
|
0a3dd61ce0 | ||
|
khwezi
|
7f29680993 | ||
|
Khwezi Mngoma
|
2f8afc380e | ||
|
Khwezi Mngoma
|
cda1d225bc | ||
|
khwezi
|
56626d2693 | ||
|
Khwezi Mngoma
|
051992accf | ||
|
Khwezi Mngoma
|
e6880959d9 | ||
|
Khwezi Mngoma
|
384daa0e54 | ||
|
Khwezi Mngoma
|
0cb77f87af | ||
|
Khwezi Mngoma
|
5e839dca03 |
@@ -6,18 +6,20 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
<ResourcePreloader />
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["app.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["MidrandBookshop.styles.css"]" />
|
||||
<ImportMap />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<HeadOutlet />
|
||||
<HeadOutlet @rendermode="InteractiveServer" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Routes />
|
||||
<Routes @rendermode="InteractiveServer" />
|
||||
<ReconnectModal />
|
||||
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
|
||||
<div class="d-flex flex-column h-100 justify-content-between">
|
||||
|
||||
<div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
|
||||
style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
|
||||
@onclick="OnCardClick">
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
@if (IsNew)
|
||||
{
|
||||
<span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div></div>
|
||||
}
|
||||
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
|
||||
<line x1="7" y1="17" x2="17" y2="7" />
|
||||
<polyline points="7,7 17,7 17,17" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
|
||||
@if (!string.IsNullOrWhiteSpace(BookImageUrl))
|
||||
{
|
||||
<img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
|
||||
style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
|
||||
<div style="max-width: 100%; overflow: hidden; word-break: break-word;">
|
||||
@Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
|
||||
<div style="max-width: 72%;">
|
||||
<span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
|
||||
<span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
|
||||
</div>
|
||||
<span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public long Id { get; set; }
|
||||
[Parameter] public string Title { get; set; } = string.Empty;
|
||||
[Parameter] public string Author { get; set; } = string.Empty;
|
||||
[Parameter] public decimal Price { get; set; }
|
||||
[Parameter] public string Category { get; set; } = string.Empty;
|
||||
[Parameter] public bool IsNew { get; set; }
|
||||
[Parameter] public string BookImageUrl { get; set; } = string.Empty;
|
||||
|
||||
[Parameter] public EventCallback OnCardClick { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.book-shadow {
|
||||
filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.15)) drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.sm-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -1,13 +1,245 @@
|
||||
@inherits LayoutComponentBase
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="page">
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<h2>Midrand Books</h2>
|
||||
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
|
||||
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
|
||||
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
|
||||
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
|
||||
<h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
|
||||
YOUR CART (@CartItems.Sum(i => i.Quantity))
|
||||
</h5>
|
||||
<button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
<div class="cart-body flex-grow-1 overflow-y-auto p-4">
|
||||
@if (!CartItems.Any())
|
||||
{
|
||||
<div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
|
||||
<svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
|
||||
</svg>
|
||||
<span class="small tracking-wide">Your collection is empty.</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="d-flex flex-column gap-4">
|
||||
@foreach (var item in CartItems)
|
||||
{
|
||||
<div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
|
||||
<div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
|
||||
[ COVER ]
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Title</h6>
|
||||
<p class="text-muted xx-small mb-2">by @item.Author</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
|
||||
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
|
||||
<span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@item.Quantity</span>
|
||||
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
|
||||
</div>
|
||||
<span class="small fw-semibold text-dark">R @(item.Price * item.Quantity)</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (CartItems.Any())
|
||||
{
|
||||
<div class="cart-footer p-4 bg-light border-top mt-auto">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<span class="text-secondary small fw-medium tracking-wider">TOTAL DUE</span>
|
||||
<span class="text-dark h5 fw-bold mb-0">R @GetCartTotal()</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<button class="btn btn-dark w-100 rounded-pill py-2.5 fw-medium shadow-sm small tracking-wide" @onclick="RedirectToCheckout" type="button">
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
<button class="btn btn-outline-dark w-100 rounded-pill py-2.5 fw-medium bg-white small tracking-wide" @onclick="RedirectToCart" type="button">
|
||||
Go to Cart Page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
|
||||
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
|
||||
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
|
||||
<circle cx="100" cy="100" r="92" stroke="#1A1A1A" stroke-width="0.4" />
|
||||
<circle cx="100" cy="100" r="86" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="2 1" />
|
||||
<circle cx="100" cy="100" r="80" stroke="#1A1A1A" stroke-width="0.3" />
|
||||
<path d="M100 20 A80 80 0 0 1 180 100 A80 80 0 0 1 100 180 A80 80 0 0 1 20 100 A80 80 0 0 1 100 20" stroke="#1A1A1A" stroke-width="0.15" />
|
||||
<path d="M100 20 A80 80 0 0 0 180 100 A80 80 0 0 0 100 180 A80 80 0 0 0 20 100 A80 80 0 0 0 100 20" stroke="#1A1A1A" stroke-width="0.15" />
|
||||
<line x1="40" y1="100" x2="160" y2="100" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="1 4" />
|
||||
<line x1="100" y1="40" x2="100" y2="160" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="1 4" />
|
||||
<g transform="translate(65, 82)" stroke="#1A1A1A" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||||
<path d="M16 18 C 16 10, 24 10, 24 18" stroke-width="0.5" />
|
||||
<line x1="20" y1="10" x2="20" y2="4" />
|
||||
<path d="M28 18 C 28 14, 34 14, 34 18" stroke-width="0.5" />
|
||||
<line x1="31" y1="14" x2="31" y2="7" />
|
||||
<rect x="3" y="8" width="5" height="10" stroke-width="0.5" />
|
||||
<rect x="11" y="5" width="5" height="13" stroke-width="0.5" />
|
||||
<rect x="38" y="3" width="7" height="15" stroke-width="0.5" />
|
||||
<polygon points="38,3 41.5,0 45,3" stroke-width="0.4" />
|
||||
<rect x="49" y="9" width="6" height="9" stroke-width="0.5" />
|
||||
<line x1="0" y1="18" x2="70" y2="18" stroke-width="0.75" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg py-3" style="pointer-events: auto;">
|
||||
<div class="container-fluid px-md-5">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/" style="transform: scale(1.6); transform-origin: left center; margin-right: 4rem;">
|
||||
<svg class="me-2" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 17c-2.5 0-4.5-1.8-4.5-4s2-4 4.5-4 4.5 1.8 4.5 4-2 4-4.5 4Z" />
|
||||
<path d="M12 9c2.2 0 4-1.6 4-3.5S14.2 2 12 2 8 3.6 8 5.5 9.8 9 12 9Z" />
|
||||
<path d="M2 12h20" stroke-width="1" stroke-dasharray="1 2" opacity="0.5" />
|
||||
</svg>
|
||||
<span class="fw-bold tracking-tight text-dark" style="font-size: 0.65rem; letter-spacing: 0.8px; font-family: 'Inter', sans-serif;">MIDRAND BOOKS</span>
|
||||
</a>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
||||
<div class="nav-pill-wrapper d-flex align-items-center">
|
||||
<a class="nav-pill-link active" href="/">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>
|
||||
Books
|
||||
</a>
|
||||
<a class="nav-pill-link" href="/audiobooks">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6" /><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" /></svg>
|
||||
Audiobooks
|
||||
</a>
|
||||
<a class="nav-pill-link" href="/ebooks">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12.01" y2="18" /></svg>
|
||||
E-Books
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 position-relative">
|
||||
<div class="search-input-container d-flex align-items-center @(IsSearchActive ? "is-active" : "")">
|
||||
<input type="text"
|
||||
class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
|
||||
placeholder="Search by ISBN, Author, Title..."
|
||||
@bind="SearchInputBuffer"
|
||||
@bind:event="oninput"
|
||||
@onkeydown="HandleSearchKeyDown" />
|
||||
</div>
|
||||
|
||||
<button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
|
||||
@onclick="ToggleGlobalSearch"
|
||||
type="button"
|
||||
aria-label="Toggle Search">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn d-flex align-items-center justify-content-center p-2 position-relative border-0"
|
||||
style="background: transparent; color: #1A1A1A; width: 36px; height: 36px;"
|
||||
@onclick="ToggleCart"
|
||||
type="button">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
||||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
|
||||
</svg>
|
||||
@if (CartItems.Any())
|
||||
{
|
||||
<span class="cart-badge">@CartItems.Sum(i => i.Quantity)</span>
|
||||
}
|
||||
</button>
|
||||
|
||||
<a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
LogIn
|
||||
</a>
|
||||
|
||||
<a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
|
||||
style="width: 32px; height: 32px;"
|
||||
aria-label="Log In">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
|
||||
<main class="position-relative" style="z-index: 5;">
|
||||
<CascadingValue Value="GlobalSearchQuery">
|
||||
@Body
|
||||
</CascadingValue>
|
||||
</main>
|
||||
|
||||
<footer class="custom-site-footer border-top mt-auto">
|
||||
<div class="container-fluid px-md-5">
|
||||
<div class="row g-4 pb-4 justify-content-between footer-content-section">
|
||||
<div class="col-12 col-md-5">
|
||||
<span class="footer-brand-title d-block mb-2">MIDRAND BOOKS</span>
|
||||
<p class="footer-desc mb-3">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<a href="mailto:info@midrandbooks.co.za" class="footer-contact-link">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
|
||||
info@midrandbooks.co.za
|
||||
</a>
|
||||
<a href="tel:+27872650198" class="footer-contact-link">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
|
||||
+27 87 265 9463
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 text-start">
|
||||
<div class="row row-cols-2 justify-content-md-end g-3">
|
||||
<div style="max-width: 160px;">
|
||||
<span class="footer-section-heading d-block mb-2">PLATFORM</span>
|
||||
<ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
|
||||
<li><a href="/about" class="footer-nav-link">About Us</a></li>
|
||||
<li><a href="/" class="footer-nav-link">Browse Catalog</a></li>
|
||||
<li><a href="/contact" class="footer-nav-link">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="max-width: 210px;">
|
||||
<span class="footer-section-heading d-block mb-2">ENTERPRISE</span>
|
||||
<ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
|
||||
<li class="footer-meta-item d-flex align-items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
|
||||
Lite Charms (PTY) Ltd
|
||||
</li>
|
||||
<li><a href="/terms" class="footer-nav-link">Terms & Conditions</a></li>
|
||||
<li><a href="/privacy" class="footer-nav-link">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center pt-3 footer-copyright-section">
|
||||
<div class="col-12 text-center text-md-start">
|
||||
<span class="footer-copyright">
|
||||
© @DateTime.Now.Year Midrand Books. All rights reserved.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
using Microsoft.AspNetCore.Components.Routing;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.WebUtilities;
|
||||
|
||||
namespace MidrandBookshop.Components.Layout;
|
||||
|
||||
public partial class MainLayout : IDisposable
|
||||
{
|
||||
private string SearchInputBuffer { get; set; } = string.Empty;
|
||||
private string GlobalSearchQuery { get; set; } = string.Empty;
|
||||
private bool IsSearchActive { get; set; } = false;
|
||||
private bool IsCartOpen { get; set; } = false;
|
||||
|
||||
private List<CartItem> CartItems = new()
|
||||
{
|
||||
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
|
||||
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
|
||||
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
|
||||
};
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Navigation.LocationChanged += OnLocationChanged;
|
||||
|
||||
SyncSearchQueryFromUrl();
|
||||
}
|
||||
|
||||
private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
|
||||
{
|
||||
SyncSearchQueryFromUrl();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void SyncSearchQueryFromUrl()
|
||||
{
|
||||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
|
||||
var queryParameters = QueryHelpers.ParseQuery(uri.Query);
|
||||
|
||||
if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
|
||||
{
|
||||
GlobalSearchQuery = queryVal.ToString();
|
||||
SearchInputBuffer = GlobalSearchQuery;
|
||||
IsSearchActive = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
GlobalSearchQuery = string.Empty;
|
||||
SearchInputBuffer = string.Empty;
|
||||
IsSearchActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
private void ToggleGlobalSearch()
|
||||
{
|
||||
if (!IsSearchActive)
|
||||
IsSearchActive = true;
|
||||
else
|
||||
CommitSearchNavigation();
|
||||
}
|
||||
|
||||
private void HandleSearchKeyDown(KeyboardEventArgs e)
|
||||
{
|
||||
if (e.Key == "Enter") CommitSearchNavigation();
|
||||
}
|
||||
|
||||
private void CommitSearchNavigation()
|
||||
{
|
||||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
|
||||
var queryParameters = QueryHelpers.ParseQuery(uri.Query);
|
||||
|
||||
var newRouteParams = new Dictionary<string, object?>();
|
||||
|
||||
foreach (var param in queryParameters)
|
||||
{
|
||||
if (param.Key != "q")
|
||||
{
|
||||
newRouteParams[param.Key] = param.Value.ToString();
|
||||
}
|
||||
}
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
|
||||
newRouteParams["q"] = SearchInputBuffer.Trim();
|
||||
else
|
||||
newRouteParams["q"] = null;
|
||||
|
||||
var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
|
||||
var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
|
||||
|
||||
Navigation.NavigateTo(updatedUri);
|
||||
}
|
||||
|
||||
private void ToggleCart() => IsCartOpen = !IsCartOpen;
|
||||
|
||||
private void ChangeQuantity(CartItem item, int delta)
|
||||
{
|
||||
item.Quantity += delta;
|
||||
if (item.Quantity <= 0)
|
||||
{
|
||||
CartItems.Remove(item);
|
||||
}
|
||||
}
|
||||
|
||||
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
|
||||
private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
|
||||
|
||||
private void RedirectToCart()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
Navigation.NavigateTo("/cart");
|
||||
}
|
||||
|
||||
private void RedirectToCheckout()
|
||||
{
|
||||
IsCartOpen = false;
|
||||
Navigation.NavigateTo("/checkout");
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
Navigation.LocationChanged -= OnLocationChanged;
|
||||
}
|
||||
|
||||
public class CartItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Title { get; set; } = string.Empty;
|
||||
public string Author { get; set; } = string.Empty;
|
||||
public int Price { get; set; }
|
||||
public int Quantity { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -1,98 +1,193 @@
|
||||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.sticky-top {
|
||||
position: -webkit-sticky !important;
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
.cart-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: 1040;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
.cart-overlay.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cart-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -420px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 100vh;
|
||||
z-index: 1050;
|
||||
pointer-events: none;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
.cart-drawer.is-open {
|
||||
transform: translateX(-420px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background-color: #1A1A1A;
|
||||
color: #FFF;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
.xx-small {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
.border-bottom-dashed {
|
||||
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
color-scheme: light only;
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
.quantity-picker {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.quantity-picker button {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quantity-picker button:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.custom-site-footer {
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #1A1A1A !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
padding: 3rem 0 2rem 0;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
.footer-content-section {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.footer-brand-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
max-width: 360px;
|
||||
color: #A0AEC0 !important;
|
||||
}
|
||||
|
||||
.footer-contact-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: #A0AEC0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-contact-link:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-section-heading {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.2px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: #A0AEC0 !important;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-nav-link:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-meta-item {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-copyright-section {
|
||||
color: #718096 !important;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.btn-back-to-top {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 42px !important;
|
||||
min-width: 42px !important;
|
||||
max-width: 42px !important;
|
||||
height: 42px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #1A1A1A;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1010;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-back-to-top:hover {
|
||||
background-color: #333333;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-back-to-top:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
@page "/cart"
|
||||
|
||||
<div class="container py-5" style="max-width: 900px;">
|
||||
<div class="d-flex align-items-center justify-content-between mb-5">
|
||||
<h2 class="fw-bold m-0">Your Cart</h2>
|
||||
<a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
|
||||
</div>
|
||||
|
||||
@if (!CartItems.Any())
|
||||
{
|
||||
<div class="text-center py-5 border rounded-3 bg-white">
|
||||
<p class="text-muted mb-4">Your collection is currently empty.</p>
|
||||
<a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||
@foreach (var item in CartItems)
|
||||
{
|
||||
<div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
|
||||
<!-- Item Detail -->
|
||||
<div class="col-12 col-md-6 d-flex align-items-center gap-4">
|
||||
<div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
|
||||
<span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="fw-bold mb-1">@item.Title</h5>
|
||||
<p class="text-muted small mb-0">by @item.Author</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quantity -->
|
||||
<div class="col-6 col-md-3 d-flex justify-content-center">
|
||||
<div class="d-flex align-items-center border rounded-pill bg-light px-2">
|
||||
<button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
||||
<span class="px-3 fw-bold">@item.Quantity</span>
|
||||
<button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Price & Remove -->
|
||||
<div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
|
||||
<span class="fw-bold">R @(item.Price * item.Quantity)</span>
|
||||
<button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Cart Totals Section -->
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-md-5">
|
||||
<div class="bg-white p-4 rounded-3 border">
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<span class="text-muted">Subtotal</span>
|
||||
<span class="fw-bold">R @Subtotal.ToString("F2")</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<span class="text-muted">VAT (15%)</span>
|
||||
<span class="fw-bold">R @VatAmount.ToString("F2")</span>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<span class="fw-bold h5 mb-0">Total</span>
|
||||
<span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
|
||||
</div>
|
||||
<a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
public class CartItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Title { get; set; } = string.Empty;
|
||||
public string Author { get; set; } = string.Empty;
|
||||
public int Price { get; set; }
|
||||
public int Quantity { get; set; }
|
||||
}
|
||||
|
||||
private List<CartItem> CartItems = new()
|
||||
{
|
||||
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
|
||||
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
|
||||
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
|
||||
};
|
||||
|
||||
// Computed Properties for Calculations
|
||||
private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
|
||||
private decimal VatAmount => Subtotal * 0.15m;
|
||||
private decimal Total => Subtotal + VatAmount;
|
||||
|
||||
private void ChangeQuantity(CartItem item, int delta)
|
||||
{
|
||||
item.Quantity += delta;
|
||||
if (item.Quantity <= 0) CartItems.Remove(item);
|
||||
}
|
||||
|
||||
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
@page "/checkout"
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="container py-5">
|
||||
<h2 class="fw-bold mb-4">Checkout</h2>
|
||||
<div class="row g-5">
|
||||
|
||||
<!-- LEFT COLUMN: SHIPPING & CART -->
|
||||
<div class="col-lg-8">
|
||||
<!-- 1. Cart Items -->
|
||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||
<h5 class="fw-bold mb-3">Your Items</h5>
|
||||
@foreach (var item in CartItems)
|
||||
{
|
||||
<div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
|
||||
<div><h6 class="mb-0">@item.Title</h6><small class="text-muted">@item.Author</small></div>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="d-flex border rounded-pill">
|
||||
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
|
||||
<span class="px-2 pt-1">@item.Quantity</span>
|
||||
<button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
|
||||
</div>
|
||||
<button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- 2. Shipping Options -->
|
||||
<div class="card border-0 shadow-sm p-4 mb-4">
|
||||
<h5 class="fw-bold mb-3">Shipping Method</h5>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="radio" name="shipping" id="pickup"
|
||||
checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
|
||||
<label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="shipping" id="delivery"
|
||||
checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
|
||||
<label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Address Fields -->
|
||||
<div class="card border-0 shadow-sm p-4">
|
||||
<h5 class="fw-bold mb-3">Shipping Address</h5>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
|
||||
<label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
|
||||
</div>
|
||||
<!-- Add text inputs for address here, show/hide based on IsSameAddress -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN: STICKY SUMMARY -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
|
||||
<h5 class="fw-bold mb-3">Order Summary</h5>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @Subtotal.ToString("F2")</span></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
|
||||
<hr />
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<span class="fw-bold">Total Due</span>
|
||||
<h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
|
||||
</div>
|
||||
<button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private decimal ShippingCost = 0;
|
||||
private bool IsSameAddress = true;
|
||||
|
||||
// Calculations
|
||||
private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
|
||||
private decimal VatAmount => Subtotal * 0.15m;
|
||||
|
||||
// Assuming your CartItems list is managed via a Service or cascading parameter
|
||||
// Here it is locally mocked for this example
|
||||
private List<CartItem> CartItems = new()
|
||||
{
|
||||
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
|
||||
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 }
|
||||
};
|
||||
|
||||
private void ChangeQuantity(CartItem item, int delta)
|
||||
{
|
||||
item.Quantity += delta;
|
||||
if (item.Quantity <= 0) CartItems.Remove(item);
|
||||
}
|
||||
|
||||
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
|
||||
private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);
|
||||
|
||||
public class CartItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Title { get; set; } = "";
|
||||
public string Author { get; set; } = "";
|
||||
public int Price { get; set; }
|
||||
public int Quantity { get; set; }
|
||||
}
|
||||
private void CompletePurchase(MouseEventArgs args)
|
||||
{
|
||||
Navigation.NavigateTo("/payment-confirmation");
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,49 @@
|
||||
@page "/Error"
|
||||
@using System.Diagnostics
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>Error</PageTitle>
|
||||
<PageTitle>System Exception | Midrand Books</PageTitle>
|
||||
|
||||
<h1 class="text-danger">Error.</h1>
|
||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
||||
<div class="artistic-error-container">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center justify-content-center min-vh-70 py-5">
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p>
|
||||
<strong>Request ID:</strong> <code>@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
<div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
|
||||
<svg viewBox="0 0 400 400" width="300" height="300" fill="none" stroke="#1A1A1A" stroke-width="1.5">
|
||||
<rect x="100" y="100" width="200" height="200" transform="rotate(45 200 200)" opacity="0.2" />
|
||||
<line x1="150" y1="150" x2="250" y2="250" />
|
||||
<line x1="250" y1="150" x2="150" y2="250" />
|
||||
<circle cx="200" cy="200" r="80" stroke-dasharray="10 10" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3>Development Mode</h3>
|
||||
<p>
|
||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
<div class="col-12 col-md-6 offset-md-1">
|
||||
<div class="meta-tag font-monospace text-uppercase text-danger mb-3">System Exception // Critical Halt</div>
|
||||
|
||||
@code{
|
||||
[CascadingParameter]
|
||||
private HttpContext? HttpContext { get; set; }
|
||||
<h1 class="display-4 text-dark mb-4 editorial-headline">An unexpected<br />interruption.</h1>
|
||||
|
||||
<p class="text-muted mb-5 body-manifesto-text">
|
||||
We are experiencing a technical disruption in our processing stream. Our team has been notified of this structural anomaly.
|
||||
</p>
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p class="font-monospace text-muted small mb-4">
|
||||
Ref: <code>@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<button class="btn btn-outline-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] private HttpContext? HttpContext { get; set; }
|
||||
private string? RequestId { get; set; }
|
||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
||||
|
||||
protected override void OnInitialized() =>
|
||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.artistic-error-container {
|
||||
background-color: #ffffff;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.editorial-headline {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.body-manifesto-text {
|
||||
font-size: 1.1rem;
|
||||
max-width: 400px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: #dc3545; /* Subtle red for system status */
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
border: 1px solid #111;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline-dark:hover {
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1,7 +1,203 @@
|
||||
@page "/"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Midrand Books</PageTitle>
|
||||
<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
|
||||
|
||||
<h3>midrandbooks.co.za</h3>
|
||||
<div class="container text-center text-hero-wrapper">
|
||||
<h1 class="display-3 text-dark mb-3 px-2 master-headline">
|
||||
Discover thoughtfully curated<br>books for every reader.
|
||||
</h1>
|
||||
<p class="text-muted mx-auto mb-0 sub-headline">
|
||||
Explorations into books, reading culture, and the art of thoughtful curation from Midrand to the world.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Welcome to the Midrand Books online bookstore! We are passionate about providing a wide selection of books to readers of all ages and interests. Whether you're looking for the latest bestsellers, classic literature, or educational resources, we have something for everyone.
|
||||
<div class="container mb-5 px-md-5">
|
||||
|
||||
@if (AuthorId.HasValue && !string.IsNullOrEmpty(ActiveAuthorFilterName))
|
||||
{
|
||||
<div class="alert alert-light border d-flex align-items-center justify-content-between rounded-pill px-4 py-2 mb-4 shadow-sm mx-auto" style="max-width: 520px;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-dark rounded-pill fw-normal px-2.5 py-1">Author Collection</span>
|
||||
<span class="text-dark fw-medium small">Archived items from <strong>@ActiveAuthorFilterName</strong></span>
|
||||
</div>
|
||||
<button class="btn btn-close btn-sm p-1 ms-3" @onclick="ClearAuthorFilter" aria-label="Clear Filter"></button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="row align-items-center justify-content-between pb-3 g-3">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
|
||||
@if (!AuthorId.HasValue)
|
||||
{
|
||||
@foreach (var category in MainCategories)
|
||||
{
|
||||
var catName = category;
|
||||
<button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
|
||||
@(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
|
||||
@onclick="() => SelectCategory(catName)">
|
||||
@catName
|
||||
</button>
|
||||
}
|
||||
|
||||
@if (DynamicExtendedCategories.Count > 0)
|
||||
{
|
||||
<button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 control-expansion-trigger"
|
||||
@onclick="ToggleExtraCategories">
|
||||
<span>@(ShowExpandedCategories ? "Collapse Cloud" : "More Genres")</span>
|
||||
<svg class="transition-smooth @(ShowExpandedCategories ? "rotate-180" : "")" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6,9 12,15 18,9" /></svg>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium" @onclick="ClearAuthorFilter">
|
||||
← Return to Catalog Index
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="d-flex align-items-center justify-content-md-end gap-2 text-md-end row-actions-wrapper">
|
||||
<button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium d-inline-flex align-items-center gap-2"
|
||||
@onclick="ToggleFilterMenu">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
|
||||
<span>Refine Curation</span>
|
||||
</button>
|
||||
|
||||
<div class="btn-group bg-white rounded-pill p-1 border border-light-subtle shadow-sm" role="group">
|
||||
<button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.Grid ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
|
||||
style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.Grid)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
|
||||
</button>
|
||||
<button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.List ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
|
||||
style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.List)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (ShowExpandedCategories && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
|
||||
{
|
||||
<div class="category-cloud-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-light">
|
||||
<h2 class="h6 text-muted mb-3 text-uppercase tracking-wider" style="font-size:0.7rem; font-weight:700;">Curated Subgenre Tag Index</h2>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@foreach (var subCategory in DynamicExtendedCategories)
|
||||
{
|
||||
var subName = subCategory;
|
||||
<button class="btn btn-xs rounded-pill px-2.5 py-1 text-dark border-light-subtle transition-smooth
|
||||
@(ActiveCategory == subName ? "btn-dark text-white" : "bg-white btn-outline-secondary")"
|
||||
style="font-size:0.75rem;" @onclick="() => SelectCategory(subName)">
|
||||
#@subName
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (ShowFilterMenu)
|
||||
{
|
||||
<div class="filter-panel-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-white shadow-sm">
|
||||
<div class="row g-4 text-start">
|
||||
<div class="col-12 col-sm-4">
|
||||
<label class="form-label small fw-semibold text-dark">Sort Artifacts</label>
|
||||
<select class="form-select form-select-sm rounded-pill px-3" value="@SelectedSortOption" @onchange="(e) => ChangeSort(e.Value?.ToString()!)">
|
||||
<option value="default">Release Timeline</option>
|
||||
<option value="price-low">Value: Low to High</option>
|
||||
<option value="price-high">Value: High to Low</option>
|
||||
<option value="title-asc">Alphabetical Order</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<label class="form-label small fw-semibold text-dark">Price Thresholds</label>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "all" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
|
||||
<button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "under-500" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("under-500")'>Under R500</button>
|
||||
<button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "500-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("500-1000")'>R500 - R1,000</button>
|
||||
<button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "over-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("over-1000")'>Over R1,000</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4 d-flex align-items-center mt-sm-4">
|
||||
<div class="form-check form-switch p-0 m-0 d-flex align-items-center gap-2">
|
||||
<input class="form-check-input ms-0 mt-0 styled-switch-toggle" type="checkbox" role="switch" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly">
|
||||
<label class="form-check-label small fw-medium text-dark user-select-none" for="newArrivalsToggle">New Acquisitions Only</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top border-light-subtle">
|
||||
<button class="btn btn-link btn-sm text-decoration-none text-muted fw-medium px-3" @onclick="ResetFilters">Purge Filters</button>
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="ToggleFilterMenu">Apply Selection</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!PaginatedBooks.Any())
|
||||
{
|
||||
<div class="text-center py-5 my-4 bg-light rounded border border-dashed border-light-subtle animate-fade-in">
|
||||
<svg class="text-muted mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
|
||||
<p class="text-secondary mb-1 fw-medium">No archived books match your active criteria.</p>
|
||||
<span class="text-muted small">Try adjusting your category definitions or search phrase query.</span>
|
||||
</div>
|
||||
}
|
||||
else if (CurrentViewMode == ViewMode.Grid)
|
||||
{
|
||||
<div class="row g-4 animate-fade-in">
|
||||
@foreach (var book in PaginatedBooks)
|
||||
{
|
||||
<BookCard Id="@book.Id"
|
||||
Title="@book.Name"
|
||||
Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
|
||||
Price="@ProductPriceCache[book.Id]"
|
||||
Category="@ProductPrimaryCategoryCache[book.Id]"
|
||||
IsNew="@book.Enabled"
|
||||
BookImageUrl="@book.ImageUrl"
|
||||
OnCardClick="() => NavigateToProduct(book.Id)" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else if (CurrentViewMode == ViewMode.List)
|
||||
{
|
||||
<div class="d-flex flex-column border rounded bg-white overflow-hidden shadow-sm animate-fade-in list-container-wrapper">
|
||||
@foreach (var book in PaginatedBooks)
|
||||
{
|
||||
<div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
|
||||
style="cursor: pointer;"
|
||||
@onclick="() => NavigateToProduct(book.Id)">
|
||||
<div class="d-flex align-items-center gap-4 structural-list-left">
|
||||
<span class="text-dark fw-medium list-item-title">@book.Name</span>
|
||||
<span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
|
||||
<span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
@if (book.Enabled)
|
||||
{
|
||||
<span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
|
||||
}
|
||||
<span class="text-dark font-monospace fw-medium list-item-price">R @ProductPriceCache[book.Id].ToString("N0")</span>
|
||||
<button class="btn btn-link text-dark p-1">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (HasMoreItems)
|
||||
{
|
||||
<div class="d-flex flex-column align-items-center justify-content-center mt-5 pt-4">
|
||||
<button class="btn btn-outline-dark rounded-pill px-5 py-2.5 fw-medium shadow-sm" style="font-size: 0.85rem;" @onclick="LoadNextPage">
|
||||
<span>Show More Artifacts</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<a class="back-to-top-btn d-flex align-items-center justify-content-center"
|
||||
aria-label="Back to top"
|
||||
href="#top-target">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
|
||||
</a>
|
||||
@@ -0,0 +1,224 @@
|
||||
using LiteCharms.Features;
|
||||
using LiteCharms.Features.MidrandBooks.AuthorBooks;
|
||||
using LiteCharms.Features.MidrandBooks.Authors;
|
||||
using LiteCharms.Features.MidrandBooks.Categories;
|
||||
using LiteCharms.Features.MidrandBooks.Products;
|
||||
using LiteCharms.Features.MidrandBooks.Products.Models;
|
||||
using LiteCharms.Features.Models;
|
||||
|
||||
namespace MidrandBookshop.Components.Pages;
|
||||
|
||||
public partial class Home : ComponentBase
|
||||
{
|
||||
[Inject] private ProductService ProductService { get; set; } = default!;
|
||||
[Inject] private BooksService BooksService { get; set; } = default!;
|
||||
[Inject] private AuthorService AuthorService { get; set; } = default!;
|
||||
[Inject] private CategoryService CategoryService { get; set; } = default!;
|
||||
[Inject] private NavigationManager Navigation { get; set; } = default!;
|
||||
|
||||
[SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
|
||||
[SupplyParameterFromQuery] public long? AuthorId { get; set; }
|
||||
|
||||
private ElementReference topTargetRef;
|
||||
public enum ViewMode { Grid, List }
|
||||
private ViewMode CurrentViewMode = ViewMode.Grid;
|
||||
private string ActiveCategory = "All";
|
||||
private bool ShowExpandedCategories = false;
|
||||
private bool ShowFilterMenu = false;
|
||||
private string SelectedSortOption = "default";
|
||||
private string ActivePriceFilter = "all";
|
||||
private bool OnlyShowNew = false;
|
||||
|
||||
private List<string> MainCategories { get; set; } = ["All"];
|
||||
private List<string> DynamicExtendedCategories { get; set; } = [];
|
||||
|
||||
private int ItemsPerPage = 12;
|
||||
private int VisibleCount = 12;
|
||||
|
||||
private List<Product> ProductsCollection { get; set; } = [];
|
||||
|
||||
protected string? ActiveAuthorFilterName { get; private set; }
|
||||
|
||||
private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
|
||||
private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
|
||||
private Dictionary<long, string> ProductAuthorCache { get; set; } = [];
|
||||
|
||||
private IEnumerable<Product> FilteredData
|
||||
{
|
||||
get
|
||||
{
|
||||
var data = ProductsCollection.AsEnumerable();
|
||||
|
||||
if (ActiveCategory != "All" && !AuthorId.HasValue)
|
||||
{
|
||||
data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
|
||||
ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
|
||||
}
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
|
||||
{
|
||||
var q = SharedSearchQuery.Trim();
|
||||
data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
|
||||
}
|
||||
|
||||
if (ActivePriceFilter != "all")
|
||||
{
|
||||
data = data.Where(p =>
|
||||
{
|
||||
var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
|
||||
|
||||
return ActivePriceFilter switch
|
||||
{
|
||||
"under-500" => price < 500m,
|
||||
"500-1000" => price >= 500m && price <= 1000m,
|
||||
"over-1000" => price > 1000m,
|
||||
_ => true
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (OnlyShowNew) data = data.Where(p => p.Enabled);
|
||||
|
||||
data = SelectedSortOption switch
|
||||
{
|
||||
"price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
|
||||
"price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
|
||||
"title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
|
||||
"default" or _ => data
|
||||
};
|
||||
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
private IEnumerable<Product> PaginatedBooks => FilteredData.Take(VisibleCount);
|
||||
|
||||
private bool HasMoreItems => FilteredData.Count() > VisibleCount;
|
||||
|
||||
protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
|
||||
|
||||
private async Task LoadCatalogDataAsync()
|
||||
{
|
||||
ProductsCollection.Clear();
|
||||
ProductPriceCache.Clear();
|
||||
ProductPrimaryCategoryCache.Clear();
|
||||
ProductAuthorCache.Clear();
|
||||
ActiveAuthorFilterName = null;
|
||||
|
||||
if (AuthorId.HasValue)
|
||||
{
|
||||
var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
|
||||
|
||||
if (authorResult.IsSuccess && authorResult.Value != null)
|
||||
{
|
||||
var author = authorResult.Value;
|
||||
|
||||
ActiveAuthorFilterName = author.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(author.Company)
|
||||
? author.Company
|
||||
: $"{author.Name} {author.LastName}".Trim();
|
||||
}
|
||||
|
||||
var authorBooksResult = await BooksService.GetBooksByAuthorAsync(AuthorId.Value);
|
||||
|
||||
if (authorBooksResult.IsSuccess && authorBooksResult.Value != null)
|
||||
{
|
||||
foreach (var authorBook in authorBooksResult.Value)
|
||||
{
|
||||
if (authorBook.Product != null)
|
||||
{
|
||||
var product = authorBook.Product;
|
||||
|
||||
ProductsCollection.Add(product);
|
||||
ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
|
||||
|
||||
ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
|
||||
|
||||
var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
|
||||
|
||||
ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
||||
? (categoryResult.Value[0].Name ?? "General")
|
||||
: "General";
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var selectionRange = new DateRange
|
||||
{
|
||||
From = new DateOnly(2020, 1, 1),
|
||||
To = DateOnly.FromDateTime(DateTime.UtcNow.AddDays(1)),
|
||||
MaxRecords = 100
|
||||
};
|
||||
|
||||
var allProductsResult = await ProductService.GetProductsAsync(0, selectionRange);
|
||||
|
||||
if (allProductsResult.IsSuccess && allProductsResult.Value != null)
|
||||
{
|
||||
ProductsCollection = allProductsResult.Value.ToList();
|
||||
|
||||
foreach (var product in ProductsCollection)
|
||||
{
|
||||
var priceResult = await ProductService.GetProductPriceAsync(product.Id);
|
||||
ProductPriceCache[product.Id] = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
|
||||
|
||||
var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
|
||||
ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
||||
? (categoryResult.Value[0].Name ?? "General")
|
||||
: "General";
|
||||
|
||||
ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
|
||||
? product.Metadata.Manufacturer
|
||||
: "Unknown Author";
|
||||
}
|
||||
}
|
||||
|
||||
var categoriesResult = await CategoryService.GetCategoriesAsync();
|
||||
|
||||
if (categoriesResult.IsSuccess && categoriesResult.Value != null)
|
||||
{
|
||||
var cleanNames = categoriesResult.Value
|
||||
.Select(c => c.Name)
|
||||
.Where(n => !string.IsNullOrEmpty(n)).Cast<string>()
|
||||
.ToList();
|
||||
|
||||
MainCategories = ["All", .. cleanNames.Take(3)];
|
||||
DynamicExtendedCategories = [.. cleanNames.Skip(3)];
|
||||
}
|
||||
}
|
||||
|
||||
private void ClearAuthorFilter()
|
||||
{
|
||||
var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
|
||||
|
||||
Navigation.NavigateTo(newUri);
|
||||
}
|
||||
|
||||
private void ResetFilters()
|
||||
{
|
||||
SelectedSortOption = "default";
|
||||
ActivePriceFilter = "all";
|
||||
OnlyShowNew = false;
|
||||
VisibleCount = ItemsPerPage;
|
||||
}
|
||||
|
||||
private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
|
||||
private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
|
||||
|
||||
private void SelectCategory(string categoryName)
|
||||
{
|
||||
ActiveCategory = categoryName;
|
||||
VisibleCount = ItemsPerPage;
|
||||
|
||||
var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
|
||||
|
||||
Navigation.NavigateTo(updatedUri);
|
||||
}
|
||||
|
||||
private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
|
||||
private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
|
||||
private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
|
||||
private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
|
||||
private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
|
||||
private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
/* Expanding Search Input Controls */
|
||||
.search-input-container {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.search-input-container.is-active {
|
||||
max-width: 280px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.custom-search-field {
|
||||
font-size: 0.8rem;
|
||||
height: 32px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Structural Layout Typography */
|
||||
.branding-logo {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.text-hero-wrapper {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.master-headline {
|
||||
letter-spacing: -1.5px;
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
max-width: 520px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Filtering Dropdown Drawer Settings */
|
||||
.filter-dropdown-panel {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.panel-section-heading {
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.reset-link-btn {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Custom Minimal Separator Rule Layout */
|
||||
.custom-milled-line {
|
||||
height: 35px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.center-bloom-shadow {
|
||||
bottom: 15px;
|
||||
width: 55%;
|
||||
height: 50px;
|
||||
background: radial-gradient(ellipse at bottom, rgba(20, 20, 20, 0.07) 0%, rgba(40, 40, 40, 0.02) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
.core-horizontal-rule {
|
||||
bottom: 15px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
/* View Engine Layout Presentation Variants: Grid Cards */
|
||||
.book-grid-card {
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 12px;
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.badge-new-arrival {
|
||||
background-color: #E63946;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.book-spine-fallback {
|
||||
width: 130px;
|
||||
height: 185px;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.product-card-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* View Engine Layout Presentation Variants: List Rows */
|
||||
.list-row-item {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.list-row-item:hover {
|
||||
background-color: rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
.structural-list-left {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.list-item-title {
|
||||
font-size: 0.95rem;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.list-item-author {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.list-item-tag {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.list-new-badge {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.list-item-price {
|
||||
font-size: 0.9rem;
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Enable native smooth scrolling page-wide */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Back to Top Icon Layout Presentation */
|
||||
.back-to-top-btn {
|
||||
position: fixed !important;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50% !important;
|
||||
text-decoration: none !important;
|
||||
/* Dual-tone contrast visibility profile */
|
||||
background-color: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
border: 2px solid #1a1a1a !important;
|
||||
box-shadow: 0 0 0 2px #ffffff, 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
z-index: 2147483647 !important;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.back-to-top-btn:hover {
|
||||
transform: translateY(-4px);
|
||||
background-color: #1a1a1a !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #ffffff !important;
|
||||
box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Direct the smooth scroll action straight to the layout viewport boundary */
|
||||
#top-target {
|
||||
scroll-margin-top: 100vh;
|
||||
}
|
||||
@@ -1,5 +1,35 @@
|
||||
@page "/not-found"
|
||||
@layout MainLayout
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<h3>Not Found</h3>
|
||||
<p>Sorry, the content you are looking for does not exist.</p>
|
||||
<div class="artistic-404-container">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center justify-content-center min-vh-70 py-5">
|
||||
|
||||
<div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
|
||||
<div class="artistic-svg-wrapper">
|
||||
<svg viewBox="0 0 400 400" width="350" height="350" stroke="#1A1A1A" stroke-width="2" fill="none">
|
||||
<path d="M60 80 Q80 60 100 80" />
|
||||
<path d="M100 60 Q120 40 140 60" />
|
||||
<path d="M280 70 Q300 50 320 70" />
|
||||
|
||||
<path d="M100 200 L200 180 L300 200 L300 300 L200 320 L100 300 Z" fill="#F8F8F8" />
|
||||
<path d="M200 180 L200 320" />
|
||||
<path d="M120 220 L180 220 M120 250 L180 250 M220 220 L280 220 M220 250 L280 250" stroke="#DDD" />
|
||||
|
||||
<circle cx="230" cy="230" r="40" />
|
||||
<line x1="258" y1="258" x2="290" y2="290" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 offset-md-1">
|
||||
<div class="meta-tag font-monospace text-uppercase text-muted mb-3">System Index // Uncharted Territory</div>
|
||||
<h1 class="display-4 text-dark mb-4 editorial-headline">Nothing was found<br />in this search.</h1>
|
||||
<p class="text-muted mb-5 body-manifesto-text">
|
||||
Even with careful scrutiny, the requested volume remains elusive. It appears the shelf you are exploring is currently vacant.
|
||||
</p>
|
||||
<button class="btn btn-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Collection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
.artistic-404-container {
|
||||
background-color: #ffffff;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.terrain-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* Static, grounded look */
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.editorial-headline {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.body-manifesto-text {
|
||||
font-size: 1.1rem;
|
||||
max-width: 400px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.artistic-404-container {
|
||||
background-color: #ffffff;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.artistic-svg-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.editorial-headline {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.body-manifesto-text {
|
||||
font-size: 1.1rem;
|
||||
max-width: 400px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@page "/payment-confirmation"
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6 text-center">
|
||||
|
||||
<!-- Success Icon & Message -->
|
||||
<div class="mb-4">
|
||||
<div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="fw-bold mb-3">Order Confirmed</h1>
|
||||
<p class="text-muted fs-5">Thank you for shopping with Midrand Books. Your order has been received and is being processed.</p>
|
||||
<div class="bg-light p-3 rounded mt-4">
|
||||
<p class="mb-0 text-muted small text-uppercase fw-bold">Order Number</p>
|
||||
<h5 class="fw-bold mb-0">#MB-2026-8834</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calls to Action -->
|
||||
<div class="d-grid gap-3 mt-5">
|
||||
<a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<a href="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional Trust Footer -->
|
||||
<p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,126 @@
|
||||
@page "/product/{BookId:long}"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<div class="product-container">
|
||||
@if (IsLoading)
|
||||
{
|
||||
<div class="text-center py-5">
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading product details...</span>
|
||||
</div>
|
||||
<p class="text-muted mt-2">Loading curated details...</p>
|
||||
</div>
|
||||
}
|
||||
else if (CurrentProduct == null)
|
||||
{
|
||||
<div class="text-center py-5 animate-fade-in">
|
||||
<svg class="text-muted mb-3" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
<h2 class="h5 text-dark fw-medium">Artifact Not Found</h2>
|
||||
<p class="text-muted small">The requested book could not be found in our current catalog.</p>
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4 mt-2" @onclick='() => Navigation.NavigateTo("/")'>Return to Books</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<nav class="breadcrumb">
|
||||
<span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
|
||||
<span class="crumb-separator">/</span>
|
||||
<span class="crumb-current">@CurrentProduct.Name</span>
|
||||
</nav>
|
||||
|
||||
<div class="product-layout">
|
||||
<div class="gallery-section">
|
||||
<div class="main-image-wrapper">
|
||||
@if (!string.IsNullOrWhiteSpace(ActiveImageUrl))
|
||||
{
|
||||
<img src="@ActiveImageUrl" alt="@CurrentProduct.Name" class="main-image" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="book-spine-fallback-large bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50 shadow-sm">
|
||||
<div>
|
||||
<span class="fw-semibold tracking-wider d-block">@PrimaryCategory.ToUpper()</span>
|
||||
<span class="opacity-50 small" style="font-size: 0.65rem;">CURATED EDITION</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="format-badges">
|
||||
@if (CurrentProduct.Enabled)
|
||||
{
|
||||
<span class="badge badge-physical">Physical Book</span>
|
||||
}
|
||||
<span class="badge badge-ebook">In Stock</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (Thumbnails.Count > 1)
|
||||
{
|
||||
<div class="thumbnail-grid">
|
||||
@foreach (var img in Thumbnails)
|
||||
{
|
||||
var currentImg = img;
|
||||
<div class="thumbnail-wrapper @(ActiveImageUrl == currentImg ? "active" : "")"
|
||||
@onclick="() => ActiveImageUrl = currentImg">
|
||||
<img src="@currentImg" alt="Catalog gallery thumbnail" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="details-section">
|
||||
<div class="meta-header">
|
||||
<span class="author-name">@AuthorName</span>
|
||||
<div class="rating-stars">
|
||||
@for (int i = 1; i <= 5; i++)
|
||||
{
|
||||
<span class="star @(i <= 4 ? "filled" : "")">★</span>
|
||||
}
|
||||
<span class="rating-text">(4.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="product-title">@CurrentProduct.Name</h1>
|
||||
<div class="product-price">R @LivePrice.ToString("N2")</div>
|
||||
|
||||
<div class="purchase-actions">
|
||||
<div class="quantity-picker">
|
||||
<button @onclick="DecreaseQty" class="qty-btn">-</button>
|
||||
<span class="qty-val">@Quantity</span>
|
||||
<button @onclick="IncreaseQty" class="qty-btn">+</button>
|
||||
</div>
|
||||
<button class="btn-add-to-cart" @onclick="HandleAddToCart">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr class="divider" />
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(CurrentProduct.Description))
|
||||
{
|
||||
<div class="info-block">
|
||||
<h3>Description</h3>
|
||||
<p class="description-text">@CurrentProduct.Description</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-block author-bio-card">
|
||||
<h3>About the Author</h3>
|
||||
<p class="author-bio">
|
||||
@(string.IsNullOrWhiteSpace(CurrentProduct.Metadata?.Manufacturer)
|
||||
? "Details regarding this publisher/author are maintained inside our curated archives."
|
||||
: $"{CurrentProduct.Metadata.Manufacturer} is globally recognized for their direct contribution to this specific genre spectrum.")
|
||||
</p>
|
||||
<button class="btn-text-link" @onclick="ViewAllAuthorBooks">
|
||||
View all books by @AuthorName →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,96 @@
|
||||
using LiteCharms.Features;
|
||||
using LiteCharms.Features.MidrandBooks.Authors;
|
||||
using LiteCharms.Features.MidrandBooks.Authors.Models;
|
||||
using LiteCharms.Features.MidrandBooks.Products;
|
||||
using LiteCharms.Features.MidrandBooks.Products.Models;
|
||||
|
||||
namespace MidrandBookshop.Components.Pages;
|
||||
|
||||
public partial class ProductView : ComponentBase
|
||||
{
|
||||
[Parameter] public long BookId { get; set; }
|
||||
|
||||
[Inject] private ProductService ProductService { get; set; } = default!;
|
||||
[Inject] private AuthorService AuthorService { get; set; } = default!;
|
||||
[Inject] private NavigationManager Navigation { get; set; } = default!;
|
||||
|
||||
protected bool IsLoading { get; private set; } = true;
|
||||
protected Product? CurrentProduct { get; private set; }
|
||||
protected decimal LivePrice { get; private set; } = 0.00m;
|
||||
protected string AuthorName { get; private set; } = "Unknown Author";
|
||||
protected string PrimaryCategory { get; private set; } = "General";
|
||||
|
||||
protected string ActiveImageUrl { get; set; } = string.Empty;
|
||||
protected List<string> Thumbnails { get; private set; } = [];
|
||||
protected int Quantity { get; private set; } = 1;
|
||||
|
||||
protected Author? CurrentAuthor { get; private set; }
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
IsLoading = true;
|
||||
CurrentProduct = null;
|
||||
CurrentAuthor = null;
|
||||
Thumbnails.Clear();
|
||||
|
||||
var productResult = await ProductService.GetProductAsync(BookId);
|
||||
|
||||
if (productResult.IsSuccess && productResult.Value != null)
|
||||
{
|
||||
CurrentProduct = productResult.Value;
|
||||
AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
|
||||
|
||||
var priceResult = await ProductService.GetProductPriceAsync(BookId);
|
||||
LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
|
||||
|
||||
var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
|
||||
if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
|
||||
PrimaryCategory = categoryResult.Value[0].Name ?? "General";
|
||||
|
||||
var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
|
||||
if (authorResult.IsSuccess && authorResult.Value != null)
|
||||
{
|
||||
CurrentAuthor = authorResult.Value;
|
||||
|
||||
if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
|
||||
AuthorName = CurrentAuthor.Company;
|
||||
else
|
||||
AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
|
||||
}
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
|
||||
Thumbnails.Add(CurrentProduct.ImageUrl);
|
||||
|
||||
if (CurrentProduct.ThumbnailUrls != null && CurrentProduct.ThumbnailUrls?.Length != 0)
|
||||
foreach (var url in CurrentProduct.ThumbnailUrls!)
|
||||
if (!string.IsNullOrWhiteSpace(url) && !Thumbnails.Contains(url)) Thumbnails.Add(url);
|
||||
|
||||
ActiveImageUrl = Thumbnails.FirstOrDefault() ?? string.Empty;
|
||||
}
|
||||
}
|
||||
catch (Exception)
|
||||
{
|
||||
CurrentProduct = null;
|
||||
}
|
||||
finally
|
||||
{
|
||||
IsLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
protected void IncreaseQty() => Quantity++;
|
||||
protected void DecreaseQty() { if (Quantity > 1) Quantity--; }
|
||||
|
||||
protected void HandleAddToCart()
|
||||
{
|
||||
if (CurrentProduct == null) return;
|
||||
}
|
||||
|
||||
protected void ViewAllAuthorBooks()
|
||||
{
|
||||
if (CurrentAuthor is not null)
|
||||
Navigation.NavigateTo($"/?authorId={CurrentAuthor.Id}");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
/* ==========================================================================
|
||||
Structural Layout Containers
|
||||
========================================================================== */
|
||||
.product-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.product-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Breadcrumb Navigation Links
|
||||
========================================================================== */
|
||||
.breadcrumb {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 2.5rem;
|
||||
color: #8c8c8c;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.crumb-link {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.crumb-link:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.crumb-separator {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.crumb-current {
|
||||
color: #111;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Left Section: Media Gallery Components
|
||||
========================================================================== */
|
||||
.gallery-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-image-wrapper {
|
||||
position: relative;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
padding: 3rem 3rem 4.5rem 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 480px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
|
||||
.format-badges {
|
||||
position: absolute !important;
|
||||
bottom: 1.5rem !important;
|
||||
left: 50% !important; /* Move anchor point to exactly half-width */
|
||||
right: auto !important;
|
||||
transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
width: max-content !important; /* Expands safely according to badges text values */
|
||||
max-width: 90% !important; /* Keeps bounding box clean of parent borders */
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 100px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
display: inline-block !important;
|
||||
white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
|
||||
}
|
||||
|
||||
.badge-physical {
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge-ebook {
|
||||
background-color: #fff;
|
||||
color: #111;
|
||||
border-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.badge-online {
|
||||
background-color: #f0fdf4;
|
||||
color: #166534;
|
||||
border-color: #bbf7d0;
|
||||
}
|
||||
|
||||
/* Interactive Gallery Thumbnails Grid */
|
||||
.thumbnail-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.thumbnail-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
background: #f9f9f9;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.thumbnail-wrapper:hover,
|
||||
.thumbnail-wrapper.active {
|
||||
border-color: #111;
|
||||
}
|
||||
|
||||
.thumbnail-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Right Section: Product Details & Typography Controls
|
||||
========================================================================== */
|
||||
.details-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.meta-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Review Star Components */
|
||||
.rating-stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.star {
|
||||
color: #e5e5e5;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.star.filled {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 2.5rem;
|
||||
font-family: 'Playfair Display', serif, Georgia;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2rem;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Interactive E-Commerce Selection Bars
|
||||
========================================================================== */
|
||||
.purchase-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.quantity-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 100px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.qty-btn:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.qty-val {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
flex-grow: 1;
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.btn-add-to-cart:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Informational Text Elements & Links
|
||||
========================================================================== */
|
||||
.info-block {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-block h3 {
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.description-text,
|
||||
.author-bio {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.author-bio-card {
|
||||
background-color: #fafafa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.btn-text-link {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.btn-text-link:hover {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive Adaptations & Breakpoints
|
||||
========================================================================== */
|
||||
@media (max-width: 992px) {
|
||||
.product-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.main-image-wrapper {
|
||||
min-height: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.product-container {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
.main-image-wrapper {
|
||||
min-height: 320px;
|
||||
padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
|
||||
}
|
||||
|
||||
.main-image {
|
||||
max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
|
||||
}
|
||||
|
||||
.format-badges {
|
||||
bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
|
||||
gap: 0.4rem !important;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
|
||||
padding: 0.25rem 0.65rem !important;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
|
||||
.purchase-actions {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.quantity-picker {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
width: 100%;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,364 @@
|
||||
@page "/profile"
|
||||
|
||||
<div class="container py-5">
|
||||
<h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-3">
|
||||
<div class="nav flex-column nav-pills" role="tablist">
|
||||
<button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
|
||||
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
|
||||
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
|
||||
<hr />
|
||||
<button class="nav-link text-danger text-start">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane fade show active" id="orders" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold m-0">Order History</h5>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-3">
|
||||
@if (orderHistory != null)
|
||||
{
|
||||
@foreach (var order in orderHistory)
|
||||
{
|
||||
<div class="card p-4 shadow-sm order-history-card">
|
||||
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
|
||||
|
||||
<div class="flex-grow-1 w-100">
|
||||
<div class="order-meta-track mb-2">
|
||||
<div class="meta-item-id">
|
||||
<span class="fw-bold text-dark">@order.OrderId</span>
|
||||
</div>
|
||||
<div class="meta-item-date">
|
||||
<span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
|
||||
</div>
|
||||
<div class="meta-item-status">
|
||||
<span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
|
||||
@order.Status
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="mb-2">
|
||||
<a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
|
||||
@order.ProductTitle
|
||||
</a>
|
||||
</h6>
|
||||
|
||||
<div class="d-flex align-items-center text-secondary small">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
|
||||
</svg>
|
||||
<span class="text-muted">Shipped to:</span> @order.ShippingAddressName
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
|
||||
<div class="text-sm-end mb-sm-2">
|
||||
<span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
|
||||
<span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card p-4 text-center text-muted">
|
||||
Loading order history...
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="shipping" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold m-0">Saved Addresses</h5>
|
||||
@if (!showAddForm && editingAddress == null)
|
||||
{
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showAddForm)
|
||||
{
|
||||
<div class="card p-4 border shadow-sm mb-4 bg-light">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="fw-bold m-0">New Address</h6>
|
||||
<button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
|
||||
</div>
|
||||
<input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
|
||||
<input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<input type="text" class="form-control" placeholder="City" @bind="newCity" />
|
||||
<input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
|
||||
</div>
|
||||
<div class="mb-3 d-flex gap-3">
|
||||
<label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
|
||||
<label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (editingAddress != null)
|
||||
{
|
||||
<div class="card p-4 border shadow-sm mb-4 bg-light">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="fw-bold m-0">Edit Address</h6>
|
||||
<button type="button" class="btn-close" @onclick="CancelEditing"></button>
|
||||
</div>
|
||||
<input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
|
||||
<input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
|
||||
<input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
|
||||
</div>
|
||||
<div class="mb-3 d-flex gap-3">
|
||||
<label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
|
||||
<label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@foreach (var addr in savedAddresses)
|
||||
{
|
||||
<div class="card p-4 shadow-sm mb-3 address-card">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<h6 class="fw-bold mb-1">@addr.Name</h6>
|
||||
<p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
|
||||
<div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
|
||||
@if (addr.IsBilling)
|
||||
{
|
||||
<span class="badge badge-tag">[Billing]</span>
|
||||
}
|
||||
@if (addr.IsShipping)
|
||||
{
|
||||
<span class="badge badge-tag">[Shipping]</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 actions-container">
|
||||
<label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
|
||||
<input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
|
||||
</label>
|
||||
|
||||
<button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
|
||||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold m-0">Profile Settings</h5>
|
||||
</div>
|
||||
<div class="card p-4 shadow-sm">
|
||||
<p class="text-muted mb-0">Manage your password and profile data here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool showAddForm = false;
|
||||
private AddressItem? editingAddress = null;
|
||||
private string newAddressName = "";
|
||||
private string newStreetAddress = "";
|
||||
private string newCity = "";
|
||||
private string newPostalCode = "";
|
||||
private bool isBilling, isShipping;
|
||||
|
||||
private List<OrderItem> orderHistory = new()
|
||||
{
|
||||
new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
|
||||
new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
|
||||
};
|
||||
|
||||
private List<AddressItem> savedAddresses = new()
|
||||
{
|
||||
new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
|
||||
new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
|
||||
new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
|
||||
};
|
||||
|
||||
private void DownloadInvoice(string orderId)
|
||||
{
|
||||
// Handle invoice downloading logic here
|
||||
}
|
||||
|
||||
private void OpenAddForm()
|
||||
{
|
||||
editingAddress = null;
|
||||
showAddForm = true;
|
||||
}
|
||||
|
||||
private void SaveAddress()
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
|
||||
{
|
||||
var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
|
||||
var newItem = new AddressItem
|
||||
{
|
||||
Id = nextId,
|
||||
Name = newAddressName,
|
||||
Street = newStreetAddress,
|
||||
City = newCity,
|
||||
PostalCode = newPostalCode,
|
||||
IsBilling = isBilling,
|
||||
IsShipping = isShipping,
|
||||
IsPrimary = !savedAddresses.Any()
|
||||
};
|
||||
savedAddresses.Add(newItem);
|
||||
ResetAddForm();
|
||||
}
|
||||
}
|
||||
|
||||
private void ResetAddForm()
|
||||
{
|
||||
newAddressName = "";
|
||||
newStreetAddress = "";
|
||||
newCity = "";
|
||||
newPostalCode = "";
|
||||
isBilling = false;
|
||||
isShipping = false;
|
||||
showAddForm = false;
|
||||
}
|
||||
|
||||
private void StartEditing(AddressItem addr)
|
||||
{
|
||||
showAddForm = false;
|
||||
editingAddress = new AddressItem
|
||||
{
|
||||
Id = addr.Id,
|
||||
Name = addr.Name,
|
||||
Street = addr.Street,
|
||||
City = addr.City,
|
||||
PostalCode = addr.PostalCode,
|
||||
IsBilling = addr.IsBilling,
|
||||
IsShipping = addr.IsShipping,
|
||||
IsPrimary = addr.IsPrimary
|
||||
};
|
||||
}
|
||||
|
||||
private void UpdateAddress()
|
||||
{
|
||||
if (editingAddress != null)
|
||||
{
|
||||
var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
|
||||
if (target != null)
|
||||
{
|
||||
target.Name = editingAddress.Name;
|
||||
target.Street = editingAddress.Street;
|
||||
target.City = editingAddress.City;
|
||||
target.PostalCode = editingAddress.PostalCode;
|
||||
target.IsBilling = editingAddress.IsBilling;
|
||||
target.IsShipping = editingAddress.IsShipping;
|
||||
}
|
||||
editingAddress = null;
|
||||
}
|
||||
}
|
||||
|
||||
private void CancelEditing()
|
||||
{
|
||||
editingAddress = null;
|
||||
}
|
||||
|
||||
private void DeleteAddress(AddressItem addr)
|
||||
{
|
||||
if (editingAddress?.Id == addr.Id)
|
||||
{
|
||||
editingAddress = null;
|
||||
}
|
||||
savedAddresses.Remove(addr);
|
||||
if (addr.IsPrimary && savedAddresses.Any())
|
||||
{
|
||||
savedAddresses.First().IsPrimary = true;
|
||||
}
|
||||
}
|
||||
|
||||
private void SetPrimary(AddressItem target, ChangeEventArgs e)
|
||||
{
|
||||
var isChecked = (bool)(e.Value ?? false);
|
||||
if (isChecked)
|
||||
{
|
||||
foreach (var addr in savedAddresses)
|
||||
{
|
||||
addr.IsPrimary = (addr.Id == target.Id);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
target.IsPrimary = false;
|
||||
}
|
||||
}
|
||||
|
||||
public class AddressItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Name { get; set; } = "";
|
||||
public string Street { get; set; } = "";
|
||||
public string City { get; set; } = "";
|
||||
public string PostalCode { get; set; } = "";
|
||||
public bool IsBilling { get; set; }
|
||||
public bool IsShipping { get; set; }
|
||||
public bool IsPrimary { get; set; }
|
||||
}
|
||||
|
||||
public class OrderItem
|
||||
{
|
||||
public string OrderId { get; set; } = "";
|
||||
public string ProductId { get; set; } = "";
|
||||
public string ProductTitle { get; set; } = "";
|
||||
public DateTime OrderDate { get; set; }
|
||||
public string ShippingAddressName { get; set; } = "";
|
||||
public string Status { get; set; } = "";
|
||||
public double Total { get; set; }
|
||||
|
||||
public string DisplayTitle
|
||||
{
|
||||
get
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
|
||||
const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
|
||||
return ProductTitle.Length <= maxLength
|
||||
? ProductTitle
|
||||
: $"{ProductTitle.Substring(0, maxLength)}...";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
::deep .container {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
/* Navigation Layout overrides */
|
||||
.nav-pills .nav-link {
|
||||
color: #6c757d;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem 0;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
background-color: transparent !important;
|
||||
color: #1A1A1A;
|
||||
border-bottom: 2px solid #1A1A1A;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link:hover:not(.active) {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Cards layout rules */
|
||||
.card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.address-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* Container Wrapper to Suppress the Scrollbar completely */
|
||||
.table-container-fixed {
|
||||
width: 100%;
|
||||
overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
|
||||
}
|
||||
|
||||
/* Global Table Typography - Reduced uniformly to keep items on a single line */
|
||||
.profile-table {
|
||||
font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
|
||||
width: 100%;
|
||||
table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
|
||||
}
|
||||
|
||||
.profile-table tbody td {
|
||||
padding-top: 0.85rem;
|
||||
padding-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.profile-table thead th {
|
||||
background-color: #F9F9F9;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.04rem;
|
||||
}
|
||||
|
||||
/* Compact Column Proportions */
|
||||
.col-order-id {
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
.col-date {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.col-total {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.col-status {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
.col-invoice {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
width: auto; /* Takes shared residual space smoothly */
|
||||
}
|
||||
|
||||
.col-address {
|
||||
width: auto; /* Takes shared residual space smoothly */
|
||||
}
|
||||
|
||||
/* Product link handling */
|
||||
.product-link {
|
||||
color: #1A1A1A;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-link:hover {
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Base Badge Settings */
|
||||
.badge {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Status Badge Palette Colors */
|
||||
.status-shipped {
|
||||
background-color: #e3f2fd !important;
|
||||
color: #0d6efd !important;
|
||||
border: 1px solid rgba(13, 110, 253, 0.15);
|
||||
}
|
||||
|
||||
.status-delivered {
|
||||
background-color: #e8f5e9 !important;
|
||||
color: #198754 !important;
|
||||
border: 1px solid rgba(25, 135, 84, 0.15);
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #4a4a4a !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btn-outline-dark {
|
||||
border-radius: 50px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
/* Action button configurations */
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-btn.text-danger:hover {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Compact SVG Icons sizing */
|
||||
.svg-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pointer-label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Shared Card Styling Unification Rules */
|
||||
.order-history-card {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: 0; /* Matches your address card configuration */
|
||||
}
|
||||
|
||||
.order-history-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* Micro Typography Alignment */
|
||||
.xx-small {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments across layout break-points */
|
||||
@media (max-width: 575.98px) {
|
||||
.border-sm-top-0 {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,12 @@
|
||||
<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
|
||||
@using MidrandBookshop.Components.Pages
|
||||
<Router AppAssembly="@typeof(Program).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="routeData" Selector="h1" />
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
</Found>
|
||||
</Router>
|
||||
<NotFound>
|
||||
<LayoutView Layout="@typeof(MainLayout)">
|
||||
<NotFound />
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
@@ -18,12 +18,13 @@
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="LiteCharms.Features" Version="1.43.0" />
|
||||
<PackageReference Include="LiteCharms.Features" Version="1.59.0" />
|
||||
</ItemGroup>
|
||||
|
||||
<!-- UI -->
|
||||
<ItemGroup>
|
||||
<PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
|
||||
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.59.0" />
|
||||
|
||||
<!-- Global Usings -->
|
||||
<Using Include="Blazored.Toast.Services" />
|
||||
@@ -50,6 +51,7 @@
|
||||
<!-- Shared Global Usings -->
|
||||
<ItemGroup>
|
||||
<Using Include="Blazored.Toast" />
|
||||
<Using Include="Microsoft.AspNetCore.Components" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
using LiteCharms.Features.Extensions;
|
||||
using LiteCharms.Features.Mediator;
|
||||
using LiteCharms.Features.MidrandBooks.Extensions;
|
||||
using MidrandBookshop.Components;
|
||||
using static LiteCharms.Features.Extensions.Quartz;
|
||||
|
||||
@@ -11,22 +12,22 @@ builder.Services.AddRazorComponents()
|
||||
builder.AddMonitoring();
|
||||
builder.Services.AddEndpointsApiExplorer();
|
||||
|
||||
//builder.Services.AddMediator();
|
||||
builder.Services.AddMediator();
|
||||
|
||||
//builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
|
||||
//builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
|
||||
builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
|
||||
builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
|
||||
|
||||
//builder.Services.AddSalesServiceBus();
|
||||
//builder.Services.AddGeneralServiceBus();
|
||||
builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
|
||||
|
||||
//builder.Services.AddEmailServices(builder.Configuration);
|
||||
//builder.Services.AddEmailServiceBus();
|
||||
builder.Services.AddEmailServices(builder.Configuration);
|
||||
builder.Services.AddEmailServiceBus();
|
||||
|
||||
builder.Services.AddShopServices();
|
||||
builder.Services.AddHashServices(builder.Configuration);
|
||||
builder.Services.AddMidrandShopDatabase(builder.Configuration);
|
||||
|
||||
builder.Services.AddMidrandShopPostgresHealthCheck();
|
||||
//builder.Services.AddMidrandShopQuartzHealthCheck();
|
||||
builder.Services.AddMidrandShopQuartzHealthCheck();
|
||||
builder.Services.AddHealthChecksSupport(builder.Configuration);
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
{
|
||||
"Email": {
|
||||
"Credentials": {
|
||||
"Username": "shop@litecharms.co.za"
|
||||
},
|
||||
"Port": 465,
|
||||
"Host": "mail.litecharms.co.za",
|
||||
"UseSsl": true
|
||||
"BookshopS3Settings": {
|
||||
"ServiceUrl": "http://192.168.1.177:30900",
|
||||
"Region": "garage",
|
||||
"BucketName": "bookshop",
|
||||
"CdnBaseUrl": "https://bookshop.cdn.khongisa.co.za"
|
||||
},
|
||||
"Monitoring": {
|
||||
"ApiKey": "",
|
||||
"Address": "http://aspire-dashboard-service.aspire.svc.cluster.local:18889",
|
||||
"ServiceName": "LiteCharms.Shop"
|
||||
"ServiceName": "MidrandBooks.DEV"
|
||||
},
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
|
||||
@@ -1,60 +1,114 @@
|
||||
html, body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-heading: 'Instrument Serif', serif;
|
||||
--font-ui: 'Inter', sans-serif;
|
||||
/* Color Palette */
|
||||
--mb-bg: #F9F9F9;
|
||||
--mb-card-bg: #FFFFFF;
|
||||
--mb-text-dark: #1A1A1A;
|
||||
--mb-text-muted: #666666;
|
||||
--mb-accent-red: #E63946;
|
||||
--mb-radius: 12px;
|
||||
/* High-Visibility Machined White Metal Core Surface Definition */
|
||||
/* Sharp linear reflection channels paired with micro-milled density grids */
|
||||
--brushed-metal-bg: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 245, 0.95) 25%, rgba(255, 255, 255, 1) 50%, rgba(238, 240, 244, 0.95) 75%, rgba(255, 255, 255, 1) 100% ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.012) 0px, rgba(0, 0, 0, 0.012) 1px, transparent 1px, transparent 2px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 1px, transparent 1px, transparent 3px ), #EDEFF4; /* Definitive satin platinum breakout base fallback */
|
||||
}
|
||||
|
||||
a, .btn-link {
|
||||
color: #006bb7;
|
||||
/* Global Reset & Core Variables Mapping */
|
||||
body {
|
||||
background-color: var(--mb-bg);
|
||||
color: var(--mb-text-dark);
|
||||
font-family: var(--font-ui);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #1b6ec2;
|
||||
border-color: #1861ac;
|
||||
h1, h2, h3, .display-font {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
||||
/* Custom Navigation Pill Styling */
|
||||
.nav-pill-wrapper {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
padding: 6px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1.1rem;
|
||||
.nav-pill-link {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--mb-text-muted);
|
||||
padding: 8px 20px;
|
||||
border-radius: 50px;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.valid.modified:not([type=checkbox]) {
|
||||
outline: 1px solid #26b050;
|
||||
}
|
||||
|
||||
.invalid {
|
||||
outline: 1px solid #e50000;
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
color: #e50000;
|
||||
}
|
||||
|
||||
.blazor-error-boundary {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
||||
padding: 1rem 1rem 1rem 3.7rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.blazor-error-boundary::after {
|
||||
content: "An error has occurred."
|
||||
.nav-pill-link i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.darker-border-checkbox.form-check-input {
|
||||
border-color: #929292;
|
||||
/* Navigation Pill States */
|
||||
.nav-pill-link:hover {
|
||||
color: var(--mb-text-dark);
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
|
||||
.nav-pill-link.active {
|
||||
color: #FFFFFF !important;
|
||||
background-color: var(--mb-text-dark);
|
||||
}
|
||||
|
||||
.nav-pill-link.active svg {
|
||||
stroke: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Utilities & Component Support Layouts */
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background-color: var(--mb-text-dark);
|
||||
color: #FFFFFF;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--mb-bg);
|
||||
}
|
||||
|
||||
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: end;
|
||||
.transition-smooth {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
|
||||
text-align: start;
|
||||
}
|
||||
.transition-smooth:hover {
|
||||
color: var(--mb-text-dark) !important;
|
||||
}
|
||||
|
||||
.py-1-5 {
|
||||
padding-top: 0.35rem !important;
|
||||
padding-bottom: 0.35rem !important;
|
||||
}
|
||||
|
||||
/* Global Focus Ring Corrections */
|
||||
h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.5 KiB |
+32
-13
@@ -14,6 +14,11 @@ data:
|
||||
ASPNETCORE_URLS: "http://0.0.0.0:8080"
|
||||
Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
|
||||
Monitoring__ServiceName: "MidrandBooks.Uat"
|
||||
HasherSettings__MinHashLength: "11"
|
||||
BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
|
||||
BookshopS3Settings__Region: "garage"
|
||||
BookshopS3Settings__BucketName: "bookshop"
|
||||
BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
|
||||
---
|
||||
apiVersion: v1
|
||||
kind: Secret
|
||||
@@ -25,6 +30,10 @@ data:
|
||||
connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
|
||||
connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
|
||||
aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
|
||||
hasher-salt: TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==
|
||||
hasher-payfastpassphrase: OUdBSVIwdFdwaFgwcU8=
|
||||
bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
|
||||
bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
|
||||
---
|
||||
apiVersion: v1
|
||||
kind: PersistentVolumeClaim
|
||||
@@ -44,7 +53,7 @@ metadata:
|
||||
name: midrandbooks
|
||||
namespace: midrandbooks-uat
|
||||
spec:
|
||||
replicas: 1
|
||||
replicas: 2
|
||||
selector:
|
||||
matchLabels:
|
||||
app: midrandbooks
|
||||
@@ -77,26 +86,36 @@ spec:
|
||||
- configMapRef:
|
||||
name: midrandbooks-config
|
||||
env:
|
||||
- name: BookshopS3Settings__AccessKey
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooks-secrets
|
||||
value: bookshop-s3-accesskey
|
||||
- name: BookshopS3Settings__SecretKey
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooks-secrets
|
||||
value: bookshop-s3-secretkey
|
||||
- name: HasherSettings__Salt
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooks-secrets
|
||||
value: hasher-salt
|
||||
- name: HasherSettings__PayfastPassphrase
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooks-secrets
|
||||
value: hasher-payfastpassphrase
|
||||
- name: ConnectionStrings__PostgresScheduler
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooks-secrets
|
||||
key: connection-string-quartz
|
||||
- name: ConnectionStrings__PostgresMidrandShop
|
||||
- name: ConnectionStrings__PostgresMidrandBooks
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooks-secrets
|
||||
key: connection-string
|
||||
- name: Monitoring__Address
|
||||
valueFrom:
|
||||
configMapKeyRef:
|
||||
name: midrandbooks-config
|
||||
key: Monitoring__Address
|
||||
- name: Monitoring__ServiceName
|
||||
valueFrom:
|
||||
configMapKeyRef:
|
||||
name: midrandbooks-config
|
||||
key: Monitoring__ServiceName
|
||||
key: connection-string
|
||||
- name: Monitoring__ApiKey
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
|
||||
Reference in New Issue
Block a user