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

Merge pull request #256 from dotnet-architecture/adjusting-styles-on-order-details

Browse Source 
Adjusting styles on order details
This commit is contained in:
Eric Fleming
2019-05-28 21:40:43 -04:00
committed by GitHub
parent 3dfde8cab6 3a9d8d0698
commit e87f11b0e1
5 changed files with 127 additions and 132 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 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> </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.Street</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.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.Country</section> <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>

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

@@ -47,3 +47,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;}.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;}

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

@@ -4,88 +4,88 @@
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;
} }
&-back { &-back {
color: rgba($color-foreground-brighter, .4); color: rgba($color-foreground-brighter, .4);
line-height: $header-height; line-height: $header-height;
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 {
padding-bottom: 1rem;
&-titles { padding-top: 2rem;
padding-bottom: 1rem; }
padding-top: 2rem;
} &-title {
text-transform: uppercase;
&-title { }
text-transform: uppercase;
} &-items {
$height: 2rem;
&-items { height: $height;
$height: 2rem; line-height: $height;
height: $height; position: relative;
line-height: $height;
position: relative; &:nth-of-type(2n + 1) {
&:nth-of-type(2n + 1) &:before {
background-color: $color-background-bright;
{ content: '';
&:before height: 100%;
left: 0;
{ margin-left: -100vw;
background-color: $color-background-bright; position: absolute;
content: ''; top: 0;
height: 100%; width: 200vw;
left: 0; z-index: -1;
margin-left: -100vw; }
position: absolute; }
top: 0; }
width: 200vw;
z-index: -1; &-item {
} font-weight: $font-weight-semilight;
} &--hover {
} opacity: 0;
pointer-events: none;
&-item { }
font-weight: $font-weight-semilight; }
&--hover
&-items:hover &-item--hover {
{ opacity: 1;
opacity: 0; pointer-events: all;
pointer-events: none; }
}
&-link {
} color: $color-secondary;
text-decoration: none;
&-items:hover &-item--hover { transition: color $animation-speed-default;
opacity: 1;
pointer-events: all; &:hover {
} color: $color-secondary-dark;
transition: color $animation-speed-default;
&-link { }
color: $color-secondary; }
text-decoration: none;
transition: color $animation-speed-default; &-detail {
&:hover
&-section {
{ padding-bottom: 30px;
color: $color-secondary-dark; }
transition: color $animation-speed-default;
} &-title {
font-size: 25px;
} }
}
} }

1
src/Web/wwwroot/css/shared/components/identity/identity.css
View File

@@ -43,6 +43,7 @@
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
height: 10rem; height: 10rem;
transition: height 0.35s; transition: height 0.35s;
z-index: 10;
} }
.esh-identity-item { .esh-identity-item {