Update orders layout on mvc
This commit is contained in:
Quique Fernandez
parent
8496748453
commit
1b3194d97d
@ -1,75 +1,79 @@
|
||||
@using Microsoft.eShopOnContainers.WebMVC.Models
|
||||
|
||||
@model Microsoft.eShopOnContainers.WebMVC.Models.Order
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Order Detail";
|
||||
}
|
||||
|
||||
<div class="brand-header-block">
|
||||
<ul class="container">
|
||||
<li class="brand-header-back"><a asp-area="" asp-controller="Order" asp-action="Index">Back to list</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="esh-orders_detail">
|
||||
@Html.Partial("_Header", new Header() { Controller = "Order", Text = "Back to list" })
|
||||
|
||||
<div class="container">
|
||||
<section class="esh-orders_detail-section">
|
||||
<article class="esh-orders_detail-titles row">
|
||||
<section class="esh-orders_detail-title col-xs-3">Order number</section>
|
||||
<section class="esh-orders_detail-title col-xs-3">Date</section>
|
||||
<section class="esh-orders_detail-title col-xs-3">Total</section>
|
||||
<section class="esh-orders_detail-title col-xs-3">Status</section>
|
||||
</article>
|
||||
|
||||
<div class="container order-detail-container">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<span>ORDER NUMBER</span><br />
|
||||
<span>@Model.OrderNumber</span>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<span>DATE</span><br />
|
||||
<span>@Model.Date</span>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<span>TOTAL</span><br />
|
||||
<span>$ @Model.Total</span>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<span>STATUS</span><br />
|
||||
<span>@Model.Status</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row order-detail-section">
|
||||
<div class="col-sm-3">
|
||||
<span>SHIPING ADDRESS</span><br />
|
||||
<span>@Model.Street</span><br />
|
||||
<span>@Model.City</span><br />
|
||||
@*<span>@Model.ShippingAddress.ZipCode</span><br />*@
|
||||
<span>@Model.Country</span><br />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row order-detail-section"><div class="col-sm-3">ORDER DETAILS</div></div>
|
||||
<section>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
@for (int i = 0; i < Model.OrderItems.Count; i++)
|
||||
{
|
||||
var item = Model.OrderItems[i];
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-3">@Model.OrderNumber</section>
|
||||
<section class="esh-orders_detail-item col-xs-3">@Model.Date</section>
|
||||
<section class="esh-orders_detail-item col-xs-3">$ @Model.Total</section>
|
||||
<section class="esh-orders_detail-item col-xs-3">@Model.Status</section>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<tr>
|
||||
<td class="cart-product-column"><img class="cart-product-image" src="@item.PictureUrl" /></td>
|
||||
<td class="cart-product-column">@item.ProductName</td>
|
||||
<td class="cart-product-column">ROSLYN</td>
|
||||
<td class="cart-product-column">$ @Math.Round(item.UnitPrice, 2)</td>
|
||||
<td class="cart-product-column">@item.Units</td>
|
||||
<td class="cart-product-column cart-total-value">$ @Math.Round(item.Units * item.UnitPrice,2)</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<section class="esh-orders_detail-section">
|
||||
<article class="esh-orders_detail-titles row">
|
||||
<section class="esh-orders_detail-title col-xs-12">Shiping address</section>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.Street</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.City</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.Country</section>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="esh-orders_detail-section">
|
||||
<article class="esh-orders_detail-titles row">
|
||||
<section class="esh-orders_detail-title col-xs-12">Order details</section>
|
||||
</article>
|
||||
|
||||
@for (int i = 0; i < Model.OrderItems.Count; i++)
|
||||
{
|
||||
var item = Model.OrderItems[i];
|
||||
<article class="esh-orders_detail-items esh-orders_detail-items--border row">
|
||||
<section class="esh-orders_detail-item col-md-4 hidden-md-down">
|
||||
<img class="esh-orders_detail-image" src="@item.PictureUrl">
|
||||
</section>
|
||||
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">@item.ProductName</section>
|
||||
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ @Math.Round(item.UnitPrice, 2)</section>
|
||||
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">@item.Units</section>
|
||||
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ @Math.Round(item.Units * item.UnitPrice, 2)</section>
|
||||
</article>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="esh-orders_detail-section esh-orders_detail-section--right">
|
||||
<article class="esh-orders_detail-titles esh-basket-titles--clean row">
|
||||
<section class="esh-orders_detail-title col-xs-10"></section>
|
||||
<section class="esh-orders_detail-title col-xs-2">Total</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-10"></section>
|
||||
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ @Model.Total</section>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-md-offset-9 col-md-3">
|
||||
<div class="order-section-total">
|
||||
<div class="cart-total-label"><span>TOTAL</span></div>
|
||||
<div class="cart-total-value"><span>$ @Model.Total</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,52 +1,34 @@
|
||||
@using Microsoft.eShopOnContainers.WebMVC.Models
|
||||
|
||||
@model IEnumerable<Microsoft.eShopOnContainers.WebMVC.Models.Order>
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "My Orders";
|
||||
}
|
||||
<div class="brand-header-block">
|
||||
<ul class="container">
|
||||
<li class="brand-header-back"><a asp-area="" asp-controller="Catalog" asp-action="Index">Back to home</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="esh-orders">
|
||||
@Html.Partial("_Header", new Header() { Controller = "Catalog", Text = "Back to catalog" })
|
||||
|
||||
<div class="container">
|
||||
<article class="esh-orders-titles row">
|
||||
<section class="esh-orders-title col-xs-2">Order number</section>
|
||||
<section class="esh-orders-title col-xs-4">Date</section>
|
||||
<section class="esh-orders-title col-xs-2">Total</section>
|
||||
<section class="esh-orders-title col-xs-2">Status</section>
|
||||
<section class="esh-orders-title col-xs-2"></section>
|
||||
</article>
|
||||
|
||||
@foreach (var item in Model)
|
||||
{
|
||||
<article class="esh-orders-items row">
|
||||
<section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.OrderNumber)</section>
|
||||
<section class="esh-orders-item col-xs-4">@Html.DisplayFor(modelItem => item.Date)</section>
|
||||
<section class="esh-orders-item col-xs-2">$ @Html.DisplayFor(modelItem => item.Total)</section>
|
||||
<section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.Status)</section>
|
||||
<section class="esh-orders-item esh-orders-item--hover col-xs-2">
|
||||
<a class="esh-orders-link" asp-controller="Order" asp-action="Detail" asp-route-orderId="@item.OrderNumber">Detail</a>
|
||||
</section>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container order-index-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
ORDER NUMBER
|
||||
</th>
|
||||
<th>
|
||||
DATE
|
||||
</th>
|
||||
<th>
|
||||
TOTAL
|
||||
</th>
|
||||
<th>
|
||||
STATUS
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var item in Model) {
|
||||
<tr>
|
||||
<td>
|
||||
@Html.DisplayFor(modelItem => item.OrderNumber)
|
||||
</td>
|
||||
<td>
|
||||
@Html.DisplayFor(modelItem => item.Date)
|
||||
</td>
|
||||
<td>
|
||||
$ @Html.DisplayFor(modelItem => item.Total)
|
||||
</td>
|
||||
<td>
|
||||
@Html.DisplayFor(modelItem => item.Status)
|
||||
</td>
|
||||
<td class="order-detail-button">
|
||||
<a asp-controller="Order" asp-action="Detail" asp-route-orderId="@item.OrderNumber">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user