Merge pull request 'ui-design' (#18) from ui-design into main
Reviewed-on: #18
This commit was merged in pull request #18.
This commit is contained in:
@@ -165,12 +165,21 @@
|
|||||||
}
|
}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
|
<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">
|
<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" />
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||||
<circle cx="12" cy="7" r="4" />
|
<circle cx="12" cy="7" r="4" />
|
||||||
</svg>
|
</svg>
|
||||||
Log In
|
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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,64 +21,66 @@
|
|||||||
<h5 class="fw-bold m-0">Order History</h5>
|
<h5 class="fw-bold m-0">Order History</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-container-fixed">
|
<div class="d-flex flex-column gap-3">
|
||||||
<table class="table align-middle profile-table m-0">
|
@if (orderHistory != null)
|
||||||
<thead>
|
{
|
||||||
<tr>
|
@foreach (var order in orderHistory)
|
||||||
<th class="text-uppercase text-muted col-order-id">Order ID</th>
|
{
|
||||||
<th class="text-uppercase text-muted col-title">Title</th>
|
<div class="card p-4 shadow-sm order-history-card">
|
||||||
<th class="text-uppercase text-muted col-date">Date</th>
|
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
|
||||||
<th class="text-uppercase text-muted col-address">Address</th>
|
|
||||||
<th class="text-uppercase text-muted col-status">Status</th>
|
<div class="flex-grow-1 w-100">
|
||||||
<th class="text-uppercase text-muted text-end col-total">Total</th>
|
<div class="order-meta-track mb-2">
|
||||||
<th class="text-uppercase text-muted text-center col-invoice">Invoice</th>
|
<div class="meta-item-id">
|
||||||
</tr>
|
<span class="fw-bold text-dark">@order.OrderId</span>
|
||||||
</thead>
|
</div>
|
||||||
<tbody>
|
<div class="meta-item-date">
|
||||||
@if (orderHistory != null)
|
<span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
|
||||||
{
|
</div>
|
||||||
@foreach (var order in orderHistory)
|
<div class="meta-item-status">
|
||||||
{
|
<span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
|
||||||
<tr>
|
@order.Status
|
||||||
<td class="fw-medium text-nowrap">@order.OrderId</td>
|
</span>
|
||||||
<td>
|
</div>
|
||||||
<a href="/products/@order.ProductId" class="product-link fw-medium text-nowrap" title="@order.ProductTitle">
|
</div>
|
||||||
@order.DisplayTitle
|
|
||||||
|
<h6 class="mb-2">
|
||||||
|
<a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
|
||||||
|
@order.ProductTitle
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</h6>
|
||||||
<td class="text-muted text-nowrap">@order.OrderDate.ToString("MMM dd, yyyy")</td>
|
|
||||||
<td>
|
<div class="d-flex align-items-center text-secondary small">
|
||||||
<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">
|
||||||
<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" />
|
||||||
<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>
|
||||||
</svg>
|
<span class="text-muted">Shipped to:</span> @order.ShippingAddressName
|
||||||
@order.ShippingAddressName
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</td>
|
|
||||||
<td>
|
<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">
|
||||||
<span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase text-nowrap">
|
<div class="text-sm-end mb-sm-2">
|
||||||
@order.Status
|
<span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
|
||||||
</span>
|
<span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
|
||||||
</td>
|
</div>
|
||||||
<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 mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
|
||||||
<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">
|
||||||
<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" />
|
||||||
<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>
|
||||||
</svg>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
</div>
|
||||||
}
|
</div>
|
||||||
}
|
}
|
||||||
else
|
}
|
||||||
{
|
else
|
||||||
<tr>
|
{
|
||||||
<td colspan="7" class="text-center text-muted py-4">Loading order history...</td>
|
<div class="card p-4 text-center text-muted">
|
||||||
</tr>
|
Loading order history...
|
||||||
}
|
</div>
|
||||||
</tbody>
|
}
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -176,3 +176,29 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user