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

update orders detail layout

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-28 14:11:10 +01:00
parent 67d20f2265
commit edc018ea40
2 changed files with 52 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
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 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-xs-4">
<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 col-xs-4">{{item.productname}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{item.unitprice}}</section> <section class="esh-orders_detail-item col-xs-1">$ {{item.unitprice}}</section>
<section class="esh-orders_detail-item col-xs-2">{{item.units}}</section> <section class="esh-orders_detail-item 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 col-xs-2">$ {{item.units * item.unitprice}}</section>
</article> </article>
</div> </section>
<div class="ddddddd"> <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-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 col-xs-2">$ XX</section>
</article> </article>
</div> </section>
</div> </div>
</div> </div>

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

@ -1,86 +1,51 @@
@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 { &-back {
float: left !important; color: rgba($color-foreground-brighter, .4);
margin-top: 20px !important; line-height: $header-height;
text-transform: uppercase; text-transform: uppercase;
}
li a:hover {
text-decoration: none; text-decoration: none;
} transition: color $animation-speed-default;
}
&-container { &:hover {
min-height: 70vh; color: $color-foreground-brighter;
padding-top: 40px; transition: color $animation-speed-default;
margin-bottom: 30px;
} }
&-container .table tbody tr:first-child td {
border-top: none;
}
&-container .table tr {
border-bottom: none;
} }
&-section { &-section {
margin-top: 50px; padding: 1rem 0;
} }
&-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 { &-item {
font-size: 14px; font-weight: $font-weight-semilight;
color: #404040;
margin-top:10px;
}
&-total-value {
font-size: 28px;
color: #00a69c;
text-align: left;
} }
&-image { &-image {
max-width: 210px; max-width: 210px;
} min-width: 80px;
width: 100%;
&-column { @media screen and (max-width: $media-screen-s) {
max-width: 120px; display: none;
padding: 8px; }
text-transform: uppercase;
vertical-align: middle!important;
} }
} }