ayan.poddar/eShopOnContainers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update orders layout on mvc

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-29 17:42:18 +01:00
parent 8496748453
commit 1b3194d97d
2 changed files with 94 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/Web/WebMVC/Views/Order/Detail.cshtml
View File

@ -1,75 +1,79 @@
@using Microsoft.eShopOnContainers.WebMVC.Models
@model Microsoft.eShopOnContainers.WebMVC.Models.Order @model Microsoft.eShopOnContainers.WebMVC.Models.Order
@{ @{
ViewData["Title"] = "Order Detail"; ViewData["Title"] = "Order Detail";
} }
<div class="brand-header-block"> <div class="esh-orders_detail">
<ul class="container"> @Html.Partial("_Header", new Header() { Controller = "Order", Text = "Back to list" })
<li class="brand-header-back"><a asp-area="" asp-controller="Order" asp-action="Index">Back to list</a></li>
</ul>
</div>
<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>
<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>
<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>
<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>
<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++) @for (int i = 0; i < Model.OrderItems.Count; i++)
{ {
var item = Model.OrderItems[i]; var item = Model.OrderItems[i];
<article class="esh-orders_detail-items esh-orders_detail-items--border row">
<tr> <section class="esh-orders_detail-item col-md-4 hidden-md-down">
<td class="cart-product-column"><img class="cart-product-image" src="@item.PictureUrl" /></td> <img class="esh-orders_detail-image" src="@item.PictureUrl">
<td class="cart-product-column">@item.ProductName</td> </section>
<td class="cart-product-column">ROSLYN</td> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">@item.ProductName</section>
<td class="cart-product-column">$ @Math.Round(item.UnitPrice, 2)</td> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ @Math.Round(item.UnitPrice, 2)</section>
<td class="cart-product-column">@item.Units</td> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">@item.Units</section>
<td class="cart-product-column cart-total-value">$ @Math.Round(item.Units * item.UnitPrice,2)</td> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ @Math.Round(item.Units * item.UnitPrice, 2)</section>
</tr> </article>
} }
</tbody> </section>
</table>
<div class="row">
<div class="col-sm-6">
</div> <section class="esh-orders_detail-section esh-orders_detail-section--right">
</div> <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> </section>
</div> </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> </div>

72
src/Web/WebMVC/Views/Order/Index.cshtml
View File

@ -1,52 +1,34 @@
@using Microsoft.eShopOnContainers.WebMVC.Models
@model IEnumerable<Microsoft.eShopOnContainers.WebMVC.Models.Order> @model IEnumerable<Microsoft.eShopOnContainers.WebMVC.Models.Order>
@{ @{
ViewData["Title"] = "My Orders"; ViewData["Title"] = "My Orders";
} }
<div class="brand-header-block">
<ul class="container"> <div class="esh-orders">
<li class="brand-header-back"><a asp-area="" asp-controller="Catalog" asp-action="Index">Back to home</a></li> @Html.Partial("_Header", new Header() { Controller = "Catalog", Text = "Back to catalog" })
</ul>
</div> <div class="container">
<div class="container order-index-container"> <article class="esh-orders-titles row">
<table class="table"> <section class="esh-orders-title col-xs-2">Order number</section>
<thead> <section class="esh-orders-title col-xs-4">Date</section>
<tr> <section class="esh-orders-title col-xs-2">Total</section>
<th> <section class="esh-orders-title col-xs-2">Status</section>
ORDER NUMBER <section class="esh-orders-title col-xs-2"></section>
</th> </article>
<th>
DATE @foreach (var item in Model)
</th> {
<th> <article class="esh-orders-items row">
TOTAL <section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.OrderNumber)</section>
</th> <section class="esh-orders-item col-xs-4">@Html.DisplayFor(modelItem => item.Date)</section>
<th> <section class="esh-orders-item col-xs-2">$ @Html.DisplayFor(modelItem => item.Total)</section>
STATUS <section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.Status)</section>
</th> <section class="esh-orders-item esh-orders-item--hover col-xs-2">
<th></th> <a class="esh-orders-link" asp-controller="Order" asp-action="Detail" asp-route-orderId="@item.OrderNumber">Detail</a>
</tr> </section>
</thead> </article>
<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> </div>
</table>
</div> </div>