Improve styling of Items card on New Transaction page
This commit is contained in:
parent
ddf87f6eb6
commit
d6407d18cb
GPG Key ID:
765FE58130277547
@ -26,11 +26,11 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="table__header">Brand</th>
|
||||
<th scope="col" class="table__header" style="width: 100%">Name</th>
|
||||
<th scope="col" class="table__header">Last Purchased</th>
|
||||
<th scope="col" class="table__header">Barcode</th>
|
||||
@*<th scope="col" class="table__header"></th>*@
|
||||
<th scope="col" class="table__header table__header--shaded">Brand</th>
|
||||
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
|
||||
<th scope="col" class="table__header table__header--shaded">Last Purchased</th>
|
||||
<th scope="col" class="table__header table__header--shaded">Barcode</th>
|
||||
@*<th scope="col" class="table__header table__header--shaded"></th>*@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -27,10 +27,10 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="table__header">Retailer</th>
|
||||
<th scope="col" class="table__header" style="width: 100%">Name</th>
|
||||
<th scope="col" class="table__header">Transactions</th>
|
||||
<th scope="col" class="table__header"></th>
|
||||
<th scope="col" class="table__header table__header--shaded">Retailer</th>
|
||||
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
|
||||
<th scope="col" class="table__header table__header--shaded">Transactions</th>
|
||||
<th scope="col" class="table__header table__header--shaded"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -43,23 +43,23 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="table__header table__header--sortable">
|
||||
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
||||
<a asp-route-sort="@(GetNextSortDir("date") != null ? "date" : "")" asp-route-dir="@GetNextSortDir("date")" asp-route-page="1" data-dir="@GetSortDir("date")">
|
||||
Date
|
||||
</a>
|
||||
</th>
|
||||
<th scope="col" class="table__header" style="width: 100%">Store</th>
|
||||
<th scope="col" class="table__header table__header--sortable">
|
||||
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Store</th>
|
||||
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
||||
<a asp-route-sort="@(GetNextSortDir("items") != null ? "items" : "")" asp-route-dir="@GetNextSortDir("items")" asp-route-page="1" data-dir="@GetSortDir("items")">
|
||||
Items
|
||||
</a>
|
||||
</th>
|
||||
<th scope="col" class="table__header table__header--sortable">
|
||||
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
||||
<a asp-route-sort="@(GetNextSortDir("amount") != null ? "amount" : "")" asp-route-dir="@GetNextSortDir("amount")" asp-route-page="1" data-dir="@GetSortDir("amount")">
|
||||
Amount
|
||||
</a>
|
||||
</th>
|
||||
@*<th scope="col" class="table__header"></th>*@
|
||||
@*<th scope="col" class="table__header table__header--shaded"></th>*@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -20,37 +20,63 @@
|
||||
|
||||
<h1>New Transaction</h1>
|
||||
|
||||
<div>@Model.CreatedAt.ToShortDateString() @Model.CreatedAt.ToLongTimeString() – @store</div>
|
||||
<div class="form-field">@Model.CreatedAt.ToShortDateString() @Model.CreatedAt.ToLongTimeString() – @store</div>
|
||||
|
||||
<form method="post" asp-action="NewTransactionItems">
|
||||
<div class="card">
|
||||
<div class="card form-field">
|
||||
<div class="card__header row">
|
||||
<h2 class="row__fill">Items</h2>
|
||||
<a class="button button--primary" asp-action="NewTransactionItem" autofocus data-turbo-frame="modal">New item</a>
|
||||
</div>
|
||||
|
||||
<div class="card__content">
|
||||
<ul>
|
||||
@foreach (var item in Model.Items)
|
||||
{
|
||||
<li class="row">
|
||||
<span class="row__fill">@items.Single(i => i.Id == item.ItemId).Name</span>
|
||||
<span>@item.Price.ToString("c")</span>
|
||||
<span>@item.Quantity</span>
|
||||
<span>@((item.Price * item.Quantity).ToString("c"))</span>
|
||||
<a class="link" asp-action="EditTransactionItem" asp-route-id="@item.ItemId" data-turbo-frame="modal">Edit</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card__footer">
|
||||
Total: @Model.Items.Sum(item => item.Price * item.Quantity).ToString("c")
|
||||
<div class="card__content card__content--table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="table__header" style="width: 100%">Name</th>
|
||||
<th scope="col" class="table__header">Price</th>
|
||||
<th scope="col" class="table__header"><abbr title="Quantity">Qty</abbr></th>
|
||||
<th scope="col" class="table__header">Amount</th>
|
||||
<th scope="col" class="table__header"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var item in Model.Items)
|
||||
{
|
||||
<tr>
|
||||
<td class="table__cell table__cell--compact">
|
||||
@items.Single(i => i.Id == item.ItemId).Name
|
||||
</td>
|
||||
<td class="table__cell table__cell--compact table__cell--numeric">
|
||||
@item.Price.ToString("c")
|
||||
</td>
|
||||
<td class="table__cell table__cell--compact table__cell--numeric">
|
||||
@item.Quantity
|
||||
</td>
|
||||
<td class="table__cell table__cell--compact table__cell--numeric">
|
||||
@((item.Price * item.Quantity).ToString("c"))
|
||||
</td>
|
||||
<td class="table__cell table__cell--compact">
|
||||
<a class="link" asp-action="EditTransactionItem" asp-route-id="@item.ItemId" data-turbo-frame="modal">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="table__cell table__cell--compact table__cell--total" colspan="3">Total</td>
|
||||
<td class="table__cell table__cell--compact table__cell--numeric table__cell--total">
|
||||
@Model.Items.Sum(item => item.Price * item.Quantity).ToString("c")
|
||||
</td>
|
||||
<td class="table__cell table__cell--compact"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button class="button button--primary" type="submit">Save</button>
|
||||
<button class="button button--primary" type="submit" @(Model.Items.Count == 0 ? "disabled" : "")>Save</button>
|
||||
<a class="button" asp-action="Index">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -301,6 +301,11 @@ html:has(.modal[open]) {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.card__content--table {
|
||||
border-top: 1px solid rgb(229, 231, 235);
|
||||
margin: -1px 0 0 0;
|
||||
}
|
||||
|
||||
.card__header {
|
||||
border-bottom: 1px solid rgb(243, 244, 246);
|
||||
padding: 1.25rem 1.5rem;
|
||||
@ -324,13 +329,12 @@ html:has(.modal[open]) {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table table {
|
||||
.table table, .card__content--table table {
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table__header {
|
||||
background-color: rgb(249, 250, 251);
|
||||
color: rgb(107, 114, 128);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
@ -342,6 +346,10 @@ html:has(.modal[open]) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table__header--shaded {
|
||||
background-color: rgb(249, 250, 251);
|
||||
}
|
||||
|
||||
.table__header--sortable a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@ -373,6 +381,11 @@ html:has(.modal[open]) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table__cell--compact {
|
||||
line-height: 1rem;
|
||||
padding-block: 0.75rem;
|
||||
}
|
||||
|
||||
.table__cell--icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
@ -381,6 +394,11 @@ html:has(.modal[open]) {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.table__cell--total {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.table__paginator {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user