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

Update orders layout on mvc

pull/49/merge
Quique Fernandez 8 years ago
parent
8496748453
commit
1b3194d97d
2 changed files with 94 additions and 108 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +66
    -62
      src/Web/WebMVC/Views/Order/Detail.cshtml
  2. +28
    -46
      src/Web/WebMVC/Views/Order/Index.cshtml

+ 66
- 62
src/Web/WebMVC/Views/Order/Detail.cshtml View File

@ -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>
<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>
<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">
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-12">@Model.City</section>
</article>
</div>
</div>
<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>

+ 28
- 46
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>
@{
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>

Write Preview
Loading…
Cancel
Save