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-header">
<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 class="container">
<div class="aaaaaaaa">
<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>
@ -15,58 +15,58 @@
</article>
<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-4">{{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-2">{{order.status}}</section>
<section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
<section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
<section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
<section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
</article>
</div>
</section>
<div class="bbbbb">
<section class="esh-orders_detail-section">
<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 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 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 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>
</div>
</section>
<div class="ccccc">
<section class="esh-orders_detail-section">
<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 class="esh-orders_detail-items row"
*ngFor="let item of order.orderitems">
<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 class="esh-orders_detail-item col-xs-2">{{item.productname}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{item.unitprice}}</section>
<section class="esh-orders_detail-item col-xs-2">{{item.units}}</section>
<section class="esh-orders_detail-item col-xs-4">{{item.productname}}</section>
<section class="esh-orders_detail-item col-xs-1">$ {{item.unitprice}}</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>
</article>
</div>
</section>
<div class="ddddddd">
<section class="esh-orders_detail-section">
<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-3">Total</section>
<section class="esh-orders_detail-title col-xs-10"></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 col-xs-3">$ XX</section>
<section class="esh-orders_detail-item col-xs-10"></section>
<section class="esh-orders_detail-item col-xs-2">$ XX</section>
</article>
</div>
</section>
</div>
</div>

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

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