Nell/eShopOnWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updating styles for Order details

Browse Source
This commit is contained in:
Eric Fleming
2019-05-28 21:36:44 -04:00
parent 4d27a4731c
commit 804d924988
4 changed files with 129 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/Web/Views/Order/Detail.cshtml
View File

@@ -6,81 +6,71 @@
ViewData["Title"] = "Order Detail"; ViewData["Title"] = "Order Detail";
} }
<div class="esh-orders_detail"> <div class="esh-orders-detail">
<div class="container"> <div class="container">
<section class="esh-orders_detail-section"> <section class="esh-orders-detail-section">
<article class="esh-orders_detail-titles row"> <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">Order number</section>
<section class="esh-orders_detail-title col-xs-3">Date</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-2">Total</section>
<section class="esh-orders_detail-title col-xs-3">Status</section> <section class="esh-orders-detail-title col-xs-3">Status</section>
</article> </article>
<article class="esh-orders_detail-items row"> <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.OrderNumber</section>
<section class="esh-orders_detail-item col-xs-3">@Model.OrderDate</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-item col-xs-2">$@Model.Total.ToString("N2")</section>
<section class="esh-orders_detail-title col-xs-3">@Model.Status</section> <section class="esh-orders-detail-item col-xs-3">@Model.Status</section>
</article> </article>
</section> </section>
@*<section class="esh-orders_detail-section"> <section class="esh-orders-detail-section">
<article class="esh-orders_detail-titles row"> <article class="esh-orders-detail-titles row">
<section class="esh-orders_detail-title col-xs-12">Description</section> <section class="esh-orders-detail-title col-xs-12">Shipping Address</section>
</article> </article>
<article class="esh-orders_detail-items row"> <article class="esh-orders-detail-items row">
<section class="esh-orders_detail-item col-xs-12">@Model.Description</section> <section class="esh-orders-detail-item col-xs-12">@Model.ShippingAddress.Street</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> </article>
<article class="esh-orders_detail-items row"> <article class="esh-orders-detail-items row">
<section class="esh-orders_detail-item col-xs-12">@Model.ShippingAddress.Street</section> <section class="esh-orders-detail-item col-xs-12">@Model.ShippingAddress.City</section>
</article> </article>
<article class="esh-orders_detail-items row"> <article class="esh-orders-detail-items row">
<section class="esh-orders_detail-item col-xs-12">@Model.ShippingAddress.City</section> <section class="esh-orders-detail-item col-xs-12">@Model.ShippingAddress.Country</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-12">@Model.ShippingAddress.Country</section>
</article> </article>
</section> </section>
<section class="esh-orders_detail-section"> <section class="esh-orders-detail-section">
<article class="esh-orders_detail-titles row"> <article class="esh-orders-detail-titles row">
<section class="esh-orders_detail-title col-xs-12">ORDER DETAILS</section> <section class="esh-orders-detail-title col-xs-12">ORDER DETAILS</section>
</article> </article>
@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"> <article class="esh-orders-detail-items esh-orders-detail-items--border row">
<section class="esh-orders_detail-item col-md-4 hidden-md-down"> <section class="esh-orders-detail-item col-md-4 hidden-md-down">
<img class="esh-orders_detail-image" src="@item.PictureUrl"> <img class="esh-orders-detail-image" src="@item.PictureUrl">
</section> </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-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.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-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-2">$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")</section>
</article> </article>
} }
</section> </section>
<section class="esh-orders_detail-section esh-orders_detail-section--right"> <section class="esh-orders-detail-section esh-orders-detail-section--right">
<article class="esh-orders_detail-titles esh-basket-titles--clean row"> <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-9"></section>
<section class="esh-orders_detail-title col-xs-2">TOTAL</section> <section class="esh-orders-detail-title col-xs-2">TOTAL</section>
</article> </article>
<article class="esh-orders_detail-items row"> <article class="esh-orders-detail-items row">
<section class="esh-orders_detail-item col-xs-9"></section> <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> <section class="esh-orders-detail-item esh-orders-detail-item--mark col-xs-2">$ @Model.Total.ToString("N2")</section>
</article> </article>
</section> </section>
</div> </div>

7
src/Web/wwwroot/css/orders/orders.component.css
View File

@@ -17,7 +17,8 @@
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 2rem; } padding-top: 2rem; }
.esh-orders-title { .esh-orders-title {
text-transform: uppercase; } text-transform: uppercase;
font-size: 25px; }
.esh-orders-items { .esh-orders-items {
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
@@ -47,3 +48,7 @@
.esh-orders-link:hover { .esh-orders-link:hover {
color: #75b918; color: #75b918;
transition: color 0.35s; } transition: color 0.35s; }
.esh-orders-detail-section {
padding-bottom: 30px; }
.esh-orders-detail-title {
font-size: 25px; }

2
src/Web/wwwroot/css/orders/orders.component.min.css vendored
View File

@@ -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;}

33
src/Web/wwwroot/css/orders/orders.component.scss
View File

@@ -4,9 +4,8 @@
min-height: 80vh; min-height: 80vh;
overflow-x: hidden; overflow-x: hidden;
$header-height: 4rem; $header-height: 4rem;
&-header
{ &-header {
background-color: #00A69C; background-color: #00A69C;
height: $header-height; height: $header-height;
} }
@@ -17,13 +16,11 @@
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
transition: color $animation-speed-default; transition: color $animation-speed-default;
&:hover
{ &:hover {
color: $color-foreground-brighter; color: $color-foreground-brighter;
transition: color $animation-speed-default; transition: color $animation-speed-default;
} }
} }
&-titles { &-titles {
@@ -33,6 +30,7 @@
&-title { &-title {
text-transform: uppercase; text-transform: uppercase;
font-size: 25px;
} }
&-items { &-items {
@@ -40,12 +38,9 @@
height: $height; height: $height;
line-height: $height; line-height: $height;
position: relative; position: relative;
&:nth-of-type(2n + 1)
{ &:nth-of-type(2n + 1) {
&:before &:before {
{
background-color: $color-background-bright; background-color: $color-background-bright;
content: ''; content: '';
height: 100%; height: 100%;
@@ -56,19 +51,16 @@
width: 200vw; width: 200vw;
z-index: -1; z-index: -1;
} }
} }
} }
&-item { &-item {
font-weight: $font-weight-semilight; font-weight: $font-weight-semilight;
&--hover
{ &--hover {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
} }
&-items:hover &-item--hover { &-items:hover &-item--hover {
@@ -80,12 +72,21 @@
color: $color-secondary; color: $color-secondary;
text-decoration: none; text-decoration: none;
transition: color $animation-speed-default; transition: color $animation-speed-default;
&:hover
{ &:hover {
color: $color-secondary-dark; color: $color-secondary-dark;
transition: color $animation-speed-default; transition: color $animation-speed-default;
} }
}
&-detail {
&-section {
padding-bottom: 30px;
}
&-title {
font-size: 25px;
}
} }
} }