Updating styles for Order details
This commit is contained in:
Eric Fleming
@@ -6,81 +6,71 @@
|
||||
ViewData["Title"] = "Order Detail";
|
||||
}
|
||||
|
||||
<div class="esh-orders_detail">
|
||||
<div class="esh-orders-detail">
|
||||
<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>
|
||||
<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-2">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.OrderDate</section>
|
||||
<section class="esh-orders_detail-item col-xs-3">$@Model.Total</section>
|
||||
<section class="esh-orders_detail-title col-xs-3">@Model.Status</section>
|
||||
<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.OrderDate</section>
|
||||
<section class="esh-orders-detail-item col-xs-2">$@Model.Total.ToString("N2")</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">Description</section>
|
||||
<section class="esh-orders-detail-section">
|
||||
<article class="esh-orders-detail-titles row">
|
||||
<section class="esh-orders-detail-title col-xs-12">Shipping Address</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.Description</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">Shipping Address</section>
|
||||
<article class="esh-orders-detail-items row">
|
||||
<section class="esh-orders-detail-item col-xs-12">@Model.ShippingAddress.Street</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.ShippingAddress.Street</section>
|
||||
<article class="esh-orders-detail-items row">
|
||||
<section class="esh-orders-detail-item col-xs-12">@Model.ShippingAddress.City</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.ShippingAddress.City</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_detail-items row">
|
||||
<section class="esh-orders_detail-item col-xs-12">@Model.ShippingAddress.Country</section>
|
||||
<article class="esh-orders-detail-items row">
|
||||
<section class="esh-orders-detail-item col-xs-12">@Model.ShippingAddress.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>
|
||||
<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">
|
||||
<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">$ @item.UnitPrice.ToString("N2")</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).ToString("N2")</section>
|
||||
<section class="esh-orders-detail-item esh-orders-detail-item--middle col-xs-3">@item.ProductName</section>
|
||||
<section class="esh-orders-detail-item esh-orders-detail-item--middle col-xs-1">$ @item.UnitPrice.ToString("N2")</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).ToString("N2")</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-9"></section>
|
||||
<section class="esh-orders_detail-title col-xs-2">TOTAL</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-9"></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-9"></section>
|
||||
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ @Model.Total.ToString("N2")</section>
|
||||
<article class="esh-orders-detail-items row">
|
||||
<section class="esh-orders-detail-item col-xs-9"></section>
|
||||
<section class="esh-orders-detail-item esh-orders-detail-item--mark col-xs-2">$ @Model.Total.ToString("N2")</section>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,8 @@
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 2rem; }
|
||||
.esh-orders-title {
|
||||
text-transform: uppercase; }
|
||||
text-transform: uppercase;
|
||||
font-size: 25px; }
|
||||
.esh-orders-items {
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
@@ -47,3 +48,7 @@
|
||||
.esh-orders-link:hover {
|
||||
color: #75b918;
|
||||
transition: color 0.35s; }
|
||||
.esh-orders-detail-section {
|
||||
padding-bottom: 30px; }
|
||||
.esh-orders-detail-title {
|
||||
font-size: 25px; }
|
||||
|
||||
@@ -1 +1 @@
|
||||
.esh-orders{min-height:80vh;overflow-x:hidden;}.esh-orders-header{background-color:#00a69c;height:4rem;}.esh-orders-back{color:rgba(255,255,255,.4);line-height:4rem;text-decoration:none;text-transform:uppercase;transition:color .35s;}.esh-orders-back:hover{color:#fff;transition:color .35s;}.esh-orders-titles{padding-bottom:1rem;padding-top:2rem;}.esh-orders-title{text-transform:uppercase;}.esh-orders-items{height:2rem;line-height:2rem;position:relative;}.esh-orders-items:nth-of-type(2n+1):before{background-color:#eef;content:'';height:100%;left:0;margin-left:-100vw;position:absolute;top:0;width:200vw;z-index:-1;}.esh-orders-item{font-weight:300;}.esh-orders-item--hover{opacity:0;pointer-events:none;}.esh-orders-items:hover .esh-orders-item--hover{opacity:1;pointer-events:all;}.esh-orders-link{color:#83d01b;text-decoration:none;transition:color .35s;}.esh-orders-link:hover{color:#75b918;transition:color .35s;}
|
||||
.esh-orders{min-height:80vh;overflow-x:hidden;}.esh-orders-header{background-color:#00a69c;height:4rem;}.esh-orders-back{color:rgba(255,255,255,.4);line-height:4rem;text-decoration:none;text-transform:uppercase;transition:color .35s;}.esh-orders-back:hover{color:#fff;transition:color .35s;}.esh-orders-titles{padding-bottom:1rem;padding-top:2rem;}.esh-orders-title{text-transform:uppercase;font-size:25px;}.esh-orders-items{height:2rem;line-height:2rem;position:relative;}.esh-orders-items:nth-of-type(2n+1):before{background-color:#eef;content:'';height:100%;left:0;margin-left:-100vw;position:absolute;top:0;width:200vw;z-index:-1;}.esh-orders-item{font-weight:300;}.esh-orders-item--hover{opacity:0;pointer-events:none;}.esh-orders-items:hover .esh-orders-item--hover{opacity:1;pointer-events:all;}.esh-orders-link{color:#83d01b;text-decoration:none;transition:color .35s;}.esh-orders-link:hover{color:#75b918;transition:color .35s;}.esh-orders-detail-section{padding-bottom:30px;}.esh-orders-detail-title{font-size:25px;}
|
||||
@@ -4,48 +4,43 @@
|
||||
min-height: 80vh;
|
||||
overflow-x: hidden;
|
||||
$header-height: 4rem;
|
||||
&-header
|
||||
|
||||
{
|
||||
&-header {
|
||||
background-color: #00A69C;
|
||||
height: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
&-back {
|
||||
&-back {
|
||||
color: rgba($color-foreground-brighter, .4);
|
||||
line-height: $header-height;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: color $animation-speed-default;
|
||||
&:hover
|
||||
|
||||
{
|
||||
&:hover {
|
||||
color: $color-foreground-brighter;
|
||||
transition: color $animation-speed-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-titles {
|
||||
&-titles {
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
&-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
&-items {
|
||||
&-items {
|
||||
$height: 2rem;
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
position: relative;
|
||||
&:nth-of-type(2n + 1)
|
||||
|
||||
{
|
||||
&:before
|
||||
|
||||
{
|
||||
&:nth-of-type(2n + 1) {
|
||||
&:before {
|
||||
background-color: $color-background-bright;
|
||||
content: '';
|
||||
height: 100%;
|
||||
@@ -55,37 +50,43 @@
|
||||
top: 0;
|
||||
width: 200vw;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-item {
|
||||
font-weight: $font-weight-semilight;
|
||||
&--hover
|
||||
|
||||
{
|
||||
&--hover {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-items:hover &-item--hover {
|
||||
&-items:hover &-item--hover {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
&-link {
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color $animation-speed-default;
|
||||
&:hover
|
||||
|
||||
{
|
||||
&:hover {
|
||||
color: $color-secondary-dark;
|
||||
transition: color $animation-speed-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&-detail {
|
||||
|
||||
&-section {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user