update orders detail layout

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>

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;
+        }
     }
 }