jamsch0/groceries
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Improve styling of Items card on New Transaction page

Browse Source
This commit is contained in:
James Chapman
2023-07-24 02:22:21 +01:00
parent ddf87f6eb6
commit d6407d18cb
5 changed files with 80 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Groceries/Transactions/Index.cshtml
View File

@ -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>

66
Groceries/Transactions/NewTransactionItems.cshtml
View File

@ -20,37 +20,63 @@
<h1>New Transaction</h1>
<div>@Model.CreatedAt.ToShortDateString() @Model.CreatedAt.ToLongTimeString() &ndash; @store</div>
<div class="form-field">@Model.CreatedAt.ToShortDateString() @Model.CreatedAt.ToLongTimeString() &ndash; @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>