From 86b9b0893fce1db4ff3dc2626153d5b52eee3ba1 Mon Sep 17 00:00:00 2001
From: Quique Fernandez <e.fernandez@plainconcepts.com>
Date: Wed, 28 Dec 2016 14:40:11 +0100
Subject: [PATCH] improve detal layout

---
 .../orders-detail.component.html              | 14 ++++-----
 .../orders-detail.component.scss              | 30 ++++++++++++++-----
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
index 3dc81dd63..20cbd5211 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
@@ -47,17 +47,17 @@
 
             <article class="esh-orders_detail-items row"
                      *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}}">
                 </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>
+                <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}}</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">$ {{item.units * item.unitprice}}</section>
             </article>
         </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">
                 <section class="esh-orders_detail-title col-xs-10"></section>
                 <section class="esh-orders_detail-title col-xs-2">Total</section>
@@ -65,7 +65,7 @@
 
             <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-2">$ XX</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ XX</section>
             </article>
         </section>
     </div>
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
index 0c194b296..0e2f01db6 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
@@ -24,6 +24,10 @@
 
     &-section {
         padding: 1rem 0;
+
+        &--right {
+            text-align: right;
+        }
     }
 
     &-titles {
@@ -35,17 +39,29 @@
         font-size: $font-size-l;
     }
 
+    &-items {
+        
+    }
+
+    $item-height: 8rem;
     &-item {
+        font-size: $font-size-m;
         font-weight: $font-weight-semilight;
-    }
 
-    &-image {
-        max-width: 210px;
-        min-width: 80px;
-        width: 100%;
+        &--middle {
+            line-height: $item-height;
 
-        @media screen and (max-width: $media-screen-s) {
-            display: none;
+            @media screen and (max-width: $media-screen-s) {
+                line-height: $font-size-m;
+            }
         }
+
+        &--mark {
+            color: $color-secondary;
+        }
+    }
+
+    &-image {
+        height: $item-height;
     }
 }