nicolas
/
eShopOnWeb
mirror of https://github.com/nmasse-itix/eShopOnWeb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

Adjusting styles on order details
main
Eric Fleming 7 years ago
committed by GitHub
parent
3dfde8cab6 3a9d8d0698
commit
e87f11b0e1
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 127 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      src/Web/Views/Order/Detail.cshtml
  2. 4
      src/Web/wwwroot/css/orders/orders.component.css
  3. 2
      src/Web/wwwroot/css/orders/orders.component.min.css
  4. 166
      src/Web/wwwroot/css/orders/orders.component.scss
  5. 1
      src/Web/wwwroot/css/shared/components/identity/identity.css

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

@ -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>
</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>
<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.ShippingAddress.Street</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.City</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.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>

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

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

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

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

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

Write Preview
Loading…
Cancel
Save