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

improve detal layout

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

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

@ -47,17 +47,17 @@
<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-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-4">{{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-1">$ {{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-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 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>
</section> </section>
<section class="esh-orders_detail-section"> <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-10"></section> <section class="esh-orders_detail-title col-xs-10"></section>
<section class="esh-orders_detail-title col-xs-2">Total</section> <section class="esh-orders_detail-title col-xs-2">Total</section>
@ -65,7 +65,7 @@
<article class="esh-orders_detail-items row"> <article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-10"></section> <section class="esh-orders_detail-item col-xs-10"></section>
<section class="esh-orders_detail-item col-xs-2">$ XX</section> <section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ XX</section>
</article> </article>
</section> </section>
</div> </div>

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

@ -24,6 +24,10 @@
&-section { &-section {
padding: 1rem 0; padding: 1rem 0;
&--right {
text-align: right;
}
} }
&-titles { &-titles {
@ -35,17 +39,29 @@
font-size: $font-size-l; font-size: $font-size-l;
} }
&-items {
}
$item-height: 8rem;
&-item { &-item {
font-size: $font-size-m;
font-weight: $font-weight-semilight; 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;
min-width: 80px;
width: 100%;
@media screen and (max-width: $media-screen-s) {
display: none;
}
} }
} }