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
Signed by: jamsch0
GPG Key ID: 765FE58130277547
5 changed files with 80 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Groceries/Items/Index.cshtml
View File

@ -26,11 +26,11 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th scope="col" class="table__header">Brand</th> <th scope="col" class="table__header table__header--shaded">Brand</th>
<th scope="col" class="table__header" style="width: 100%">Name</th> <th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
<th scope="col" class="table__header">Last Purchased</th> <th scope="col" class="table__header table__header--shaded">Last Purchased</th>
<th scope="col" class="table__header">Barcode</th> <th scope="col" class="table__header table__header--shaded">Barcode</th>
@*<th scope="col" class="table__header"></th>*@ @*<th scope="col" class="table__header table__header--shaded"></th>*@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

8
Groceries/Stores/Index.cshtml
View File

@ -27,10 +27,10 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th scope="col" class="table__header">Retailer</th> <th scope="col" class="table__header table__header--shaded">Retailer</th>
<th scope="col" class="table__header" style="width: 100%">Name</th> <th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
<th scope="col" class="table__header">Transactions</th> <th scope="col" class="table__header table__header--shaded">Transactions</th>
<th scope="col" class="table__header"></th> <th scope="col" class="table__header table__header--shaded"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

10
Groceries/Transactions/Index.cshtml
View File

@ -43,23 +43,23 @@
<table> <table>
<thead> <thead>
<tr> <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")"> <a asp-route-sort="@(GetNextSortDir("date") != null ? "date" : "")" asp-route-dir="@GetNextSortDir("date")" asp-route-page="1" data-dir="@GetSortDir("date")">
Date Date
</a> </a>
</th> </th>
<th scope="col" class="table__header" style="width: 100%">Store</th> <th scope="col" class="table__header table__header--shaded" style="width: 100%">Store</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("items") != null ? "items" : "")" asp-route-dir="@GetNextSortDir("items")" asp-route-page="1" data-dir="@GetSortDir("items")"> <a asp-route-sort="@(GetNextSortDir("items") != null ? "items" : "")" asp-route-dir="@GetNextSortDir("items")" asp-route-page="1" data-dir="@GetSortDir("items")">
Items Items
</a> </a>
</th> </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")"> <a asp-route-sort="@(GetNextSortDir("amount") != null ? "amount" : "")" asp-route-dir="@GetNextSortDir("amount")" asp-route-page="1" data-dir="@GetSortDir("amount")">
Amount Amount
</a> </a>
</th> </th>
@*<th scope="col" class="table__header"></th>*@ @*<th scope="col" class="table__header table__header--shaded"></th>*@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

66
Groceries/Transactions/NewTransactionItems.cshtml
View File

@ -20,37 +20,63 @@
<h1>New Transaction</h1> <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"> <form method="post" asp-action="NewTransactionItems">
<div class="card"> <div class="card form-field">
<div class="card__header row"> <div class="card__header row">
<h2 class="row__fill">Items</h2> <h2 class="row__fill">Items</h2>
<a class="button button--primary" asp-action="NewTransactionItem" autofocus data-turbo-frame="modal">New item</a> <a class="button button--primary" asp-action="NewTransactionItem" autofocus data-turbo-frame="modal">New item</a>
</div> </div>
<div class="card__content"> <div class="card__content card__content--table">
<ul> <table>
@foreach (var item in Model.Items) <thead>
{ <tr>
<li class="row"> <th scope="col" class="table__header" style="width: 100%">Name</th>
<span class="row__fill">@items.Single(i => i.Id == item.ItemId).Name</span> <th scope="col" class="table__header">Price</th>
<span>@item.Price.ToString("c")</span> <th scope="col" class="table__header"><abbr title="Quantity">Qty</abbr></th>
<span>@item.Quantity</span> <th scope="col" class="table__header">Amount</th>
<span>@((item.Price * item.Quantity).ToString("c"))</span> <th scope="col" class="table__header"></th>
<a class="link" asp-action="EditTransactionItem" asp-route-id="@item.ItemId" data-turbo-frame="modal">Edit</a> </tr>
</li> </thead>
} <tbody>
</ul> @foreach (var item in Model.Items)
</div> {
<tr>
<div class="card__footer"> <td class="table__cell table__cell--compact">
Total: @Model.Items.Sum(item => item.Price * item.Quantity).ToString("c") @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> </div>
<div class="row"> <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> <a class="button" asp-action="Index">Cancel</a>
</div> </div>
</form> </form>

22
Groceries/wwwroot/css/main.css
View File

@ -301,6 +301,11 @@ html:has(.modal[open]) {
margin: 1.5rem; margin: 1.5rem;
} }
.card__content--table {
border-top: 1px solid rgb(229, 231, 235);
margin: -1px 0 0 0;
}
.card__header { .card__header {
border-bottom: 1px solid rgb(243, 244, 246); border-bottom: 1px solid rgb(243, 244, 246);
padding: 1.25rem 1.5rem; 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); 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%; min-width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
.table__header { .table__header {
background-color: rgb(249, 250, 251);
color: rgb(107, 114, 128); color: rgb(107, 114, 128);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
@ -342,6 +346,10 @@ html:has(.modal[open]) {
white-space: nowrap; white-space: nowrap;
} }
.table__header--shaded {
background-color: rgb(249, 250, 251);
}
.table__header--sortable a { .table__header--sortable a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@ -373,6 +381,11 @@ html:has(.modal[open]) {
white-space: nowrap; white-space: nowrap;
} }
.table__cell--compact {
line-height: 1rem;
padding-block: 0.75rem;
}
.table__cell--icon { .table__cell--icon {
font-size: 1.25rem; font-size: 1.25rem;
} }
@ -381,6 +394,11 @@ html:has(.modal[open]) {
text-align: end; text-align: end;
} }
.table__cell--total {
font-weight: 600;
text-transform: uppercase;
}
.table__paginator { .table__paginator {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;