litecharms/midrandbooks
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 64 Wiki Activity

Completed UX/UI design
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-05-24 10:46:43 +02:00
parent e6880959d9
commit 051992accf
9 changed files with 769 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Pages/Home.razor
+11 -1
View File
@@ -2,7 +2,7 @@
@rendermode InteractiveServer
@inject NavigationManager Navigation
<div class="container text-center text-hero-wrapper">
<div id="top-target" 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>
@@ -208,6 +208,16 @@
}
</div>
<a class="back-to-top-btn d-flex align-items-center justify-content-center"
aria-label="Back to top"
href="#top-target"
onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</a>
@code {
public enum ViewMode { Grid, List }
private ViewMode CurrentViewMode = ViewMode.Grid;
MidrandBookshop/Components/Pages/Home.razor.css
+31
View File
@@ -139,3 +139,34 @@
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;
}
MidrandBookshop/Components/Pages/Profile.razor
+362
View File
@@ -0,0 +1,362 @@
@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="table-container-fixed">
<table class="table align-middle profile-table m-0">
<thead>
<tr>
<th class="text-uppercase text-muted col-order-id">Order ID</th>
<th class="text-uppercase text-muted col-title">Title</th>
<th class="text-uppercase text-muted col-date">Date</th>
<th class="text-uppercase text-muted col-address">Address</th>
<th class="text-uppercase text-muted col-status">Status</th>
<th class="text-uppercase text-muted text-end col-total">Total</th>
<th class="text-uppercase text-muted text-center col-invoice">Invoice</th>
</tr>
</thead>
<tbody>
@if (orderHistory != null)
{
@foreach (var order in orderHistory)
{
<tr>
<td class="fw-medium text-nowrap">@order.OrderId</td>
<td>
<a href="/products/@order.ProductId" class="product-link fw-medium text-nowrap" title="@order.ProductTitle">
@order.DisplayTitle
</a>
</td>
<td class="text-muted text-nowrap">@order.OrderDate.ToString("MMM dd, yyyy")</td>
<td>
<span class="text-secondary d-inline-flex align-items-center gap-1 text-nowrap">
<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>
@order.ShippingAddressName
</span>
</td>
<td>
<span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase text-nowrap">
@order.Status
</span>
</td>
<td class="text-end fw-medium text-nowrap">R @order.Total.ToString("N2")</td>
<td class="text-center">
<button class="btn btn-link p-0 text-dark action-btn" 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>
</td>
</tr>
}
}
else
{
<tr>
<td colspan="7" class="text-center text-muted py-4">Loading order history...</td>
</tr>
}
</tbody>
</table>
</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)}...";
}
}
}
}
MidrandBookshop/Components/Pages/Profile.razor.css
+178
View File
@@ -0,0 +1,178 @@
::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;
}