From edc018ea40771fe0d32194e82bedefbd5d88b9ee Mon Sep 17 00:00:00 2001
From: Quique Fernandez <e.fernandez@plainconcepts.com>
Date: Wed, 28 Dec 2016 14:11:10 +0100
Subject: [PATCH 1/3] update orders detail layout

---
 .../orders-detail.component.html              | 52 +++++------
 .../orders-detail.component.scss              | 87 ++++++-------------
 2 files changed, 52 insertions(+), 87 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 16f4f981c..3dc81dd63 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
@@ -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>
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 6ca4d6fbf..0c194b296 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
@@ -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;
-        }
-    }
-
-    &-container {
-        min-height: 70vh;
-        padding-top: 40px;
-        margin-bottom: 30px;
+        height: $header-height;
     }
 
-    &-container .table tbody tr:first-child td {
-        border-top: none;
-    }
+    &-back {
+        color: rgba($color-foreground-brighter, .4);
+        line-height: $header-height;
+        text-transform: uppercase;
+        text-decoration: none;
+        transition: color $animation-speed-default;
 
-    &-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;
+        }
     }
 }

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 2/3] 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;
     }
 }

From 3b16254c6dff4513269b26a5c7397ec16adaac39 Mon Sep 17 00:00:00 2001
From: Quique Fernandez <e.fernandez@plainconcepts.com>
Date: Wed, 28 Dec 2016 14:45:00 +0100
Subject: [PATCH 3/3] add border to items

---
 .../orders/orders-detail/orders-detail.component.html        | 2 +-
 .../orders/orders-detail/orders-detail.component.scss        | 5 ++++-
 2 files changed, 5 insertions(+), 2 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 20cbd5211..ccc89836d 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
@@ -45,7 +45,7 @@
                 <section class="esh-orders_detail-title col-xs-12">Order details</section>
             </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">
                 <section class="esh-orders_detail-item col-md-4 hidden-md-down">
                     <img class="esh-orders_detail-image" src="{{item.pictureurl}}">
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 0e2f01db6..94155312f 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
@@ -40,7 +40,10 @@
     }
 
     &-items {
-        
+        &--border {
+            border-bottom: $border-light solid $color-foreground-bright;
+            padding: .5rem 0;
+        }
     }
 
     $item-height: 8rem;