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

Merge branch 'Dev' of https://github.com/dotnet/eShopOnContainers

Browse Source
This commit is contained in:
Carlos Cañizares Estévez 2016-12-28 14:47:59 +01:00
commit 0a173117f1
2 changed files with 74 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
View File

@ -1,12 +1,12 @@
<div class="esh-orders_detail"> <div class="esh-orders_detail">
<div class="esh-orders_detail-header"> <div class="esh-orders_detail-header">
<div class="container"> <div class="container">
<a class="esh-orders-back" routerLink="/orders">Back to list</a> <a class="esh-orders_detail-back" routerLink="/orders">Back to list</a>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="aaaaaaaa"> <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>
@ -15,58 +15,58 @@
</article> </article>
<article class="esh-orders_detail-items row"> <article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-2">{{order.ordernumber}}</section> <section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
<section class="esh-orders_detail-item col-xs-4">{{order.date | date:'short'}}</section> <section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{order.total}}</section> <section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
<section class="esh-orders_detail-item col-xs-2">{{order.status}}</section> <section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
</article> </article>
</div> </section>
<div class="bbbbb"> <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">Shipig address</section> <section class="esh-orders_detail-title col-xs-12">Shipig 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-3">{{order.street}}</section> <section class="esh-orders_detail-item col-xs-12">{{order.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-4">{{order.city}}</section> <section class="esh-orders_detail-item col-xs-12">{{order.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-2">{{order.country}}</section> <section class="esh-orders_detail-item col-xs-12">{{order.country}}</section>
</article> </article>
</div> </section>
<div class="ccccc"> <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 details</section> <section class="esh-orders_detail-title col-xs-12">Order details</section>
</article> </article>
<article class="esh-orders_detail-items row" <article class="esh-orders_detail-items esh-orders_detail-items--border row"
*ngFor="let item of order.orderitems"> *ngFor="let item of order.orderitems">
<section class="esh-orders_detail-item col-xs-4"> <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 col-xs-2">{{item.productname}}</section> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">{{item.productname}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{item.unitprice}}</section> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ {{item.unitprice}}</section>
<section class="esh-orders_detail-item col-xs-2">{{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 col-xs-2">$ {{item.units * item.unitprice}}</section> <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ {{item.units * item.unitprice}}</section>
</article> </article>
</div> </section>
<div class="ddddddd"> <section class="esh-orders_detail-section esh-orders_detail-section--right">
<article class="esh-orders_detail-titles row"> <article class="esh-orders_detail-titles row">
<section class="esh-orders_detail-title col-xs-9"></section> <section class="esh-orders_detail-title col-xs-10"></section>
<section class="esh-orders_detail-title col-xs-3">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-10"></section>
<section class="esh-orders_detail-item col-xs-3">$ XX</section> <section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ XX</section>
</article> </article>
</div> </section>
</div> </div>
</div> </div>

106
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
View File

@ -1,86 +1,70 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.esh-orders-detail { .esh-orders_detail {
min-height: 80vh; min-height: 80vh;
$header-height: 4rem;
&-header { &-header {
background-color: #00A69C; background-color: #00A69C;
height: 63px; height: $header-height;
li {
list-style: none;
display: inline;
opacity: 0.5;
margin-top: 25px;
margin-left: 10px;
float: right;
cursor: pointer;
color: white;
}
li a {
color: white;
}
&-back {
float: left !important;
margin-top: 20px !important;
text-transform: uppercase;
}
li a:hover {
text-decoration: none;
}
} }
&-container { &-back {
min-height: 70vh; color: rgba($color-foreground-brighter, .4);
padding-top: 40px; line-height: $header-height;
margin-bottom: 30px; text-transform: uppercase;
} text-decoration: none;
transition: color $animation-speed-default;
&-container .table tbody tr:first-child td { &:hover {
border-top: none; color: $color-foreground-brighter;
} transition: color $animation-speed-default;
}
&-container .table tr {
border-bottom: none;
} }
&-section { &-section {
margin-top: 50px; padding: 1rem 0;
&--right {
text-align: right;
}
} }
&-container .table { &-titles {
margin-left: -7px; padding-bottom: 1rem;
padding-top: 2rem;
} }
&-total { &-title {
margin-bottom: 5px; font-size: $font-size-l;
margin-left: 20px;
text-align: left;
} }
&-total-label { &-items {
font-size: 14px; &--border {
color: #404040; border-bottom: $border-light solid $color-foreground-bright;
margin-top:10px; padding: .5rem 0;
}
} }
&-total-value { $item-height: 8rem;
font-size: 28px; &-item {
color: #00a69c; font-size: $font-size-m;
text-align: left; font-weight: $font-weight-semilight;
&--middle {
line-height: $item-height;
@media screen and (max-width: $media-screen-s) {
line-height: $font-size-m;
}
}
&--mark {
color: $color-secondary;
}
} }
&-image { &-image {
max-width: 210px; height: $item-height;
}
&-column {
max-width: 120px;
padding: 8px;
text-transform: uppercase;
vertical-align: middle!important;
} }
} }