udpate orders layout

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html

@@ -21,7 +21,7 @@
 </section>
 
 <div class="container">
-    <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
 
     <div class="esh-catalog-items row">
         <div class="esh-catalog-item col-md-4"
@@ -41,6 +41,6 @@
         </div>
     </div>
 
-    <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
 </div>
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -1,7 +1,6 @@
 @import '../variables';
 
 .esh-catalog {
-
     $banner-height: 260px;
 
     &-hero {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html

@@ -1,43 +1,28 @@
-<div class="esh-orders-header">
-    <ul class="container">
-        <li class="esh-orders-back" routerLink="/catalog">Back to list</li>
-    </ul>
-</div>
-<div class="container esh-orders-container">
-    <div class="row">
-        <div class="col-md-12">
-            <section>
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th class="esh-orders-order-column">
-                                ORDER NUMBER
-                            </th>
-                            <th>
-                                DATE
-                            </th>
-                            <th>
-                                TOTAL
-                            </th>
-                            <th>
-                                STATUS
-                            </th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let order of orders">
-                            <td class="esh-orders-order-column">{{order.ordernumber}}</td>
-                            <td class="esh-orders-order-column">{{order.date | date:'short'}}</td>
-                            <td class="esh-orders-order-column">$ {{order.total}}</td>
-                            <td class="esh-orders-order-column">{{order.status}}</td>
-                            <td class="esh-orders-order-column">
-                                <a class="esh-orders-order-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </section>
+<div class="esh-orders">
+    <div class="esh-orders-header">
+        <div class="container">
+            <a class="esh-orders-back" routerLink="/catalog">Back to list</a>
         </div>
     </div>
-</div>
+
+    <div class="container">
+        <article class="esh-orders-titles row">
+            <div class="esh-orders-title col-xs-2">Order number</div>
+            <div class="esh-orders-title col-xs-4">Date</div>
+            <div class="esh-orders-title col-xs-2">Total</div>
+            <div class="esh-orders-title col-xs-2">Status</div>
+            <div class="esh-orders-title col-xs-2"></div>
+        </article>
+
+        <article class="esh-orders-items row"
+                 *ngFor="let order of orders">
+            <div class="esh-orders-item col-xs-2">{{order.ordernumber}}</div>
+            <div class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</div>
+            <div class="esh-orders-item col-xs-2">$ {{order.total}}</div>
+            <div class="esh-orders-item col-xs-2">{{order.status}}</div>
+            <div class="esh-orders-item col-xs-2">
+                <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
+            </div>
+        </article>
+    </div>
+</div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss

@@ -3,83 +3,52 @@
 .esh-orders {
     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;
-        }
-
-        li a:hover {
-            text-decoration: none;
-        }
+        height: $header-height;
     }
 
     &-back {
-        float: left !important;
-        margin-top: 20px !important;
+        color: rgba($color-foreground-brighter, .4);
+        line-height: $header-height;
         text-transform: uppercase;
-    }
+        text-decoration: none;
+        transition: color $animation-speed-default;
 
-    &-container {
-        min-height: 70vh;
-        padding-top: 40px;
-        margin-bottom: 30px;
-        min-width: 992px;
+        &:hover {
+            color: $color-foreground-brighter;
+            transition: color $animation-speed-default;
+        }
     }
 
-    &-order-column {
-        max-width: 120px;
-        vertical-align: middle !important;
+    &-titles {
+        padding-bottom: 1rem;
+        padding-top: 2rem;
     }
 
-    &-order-link {
-        color: #83d01b;
+    &-title {
+        font-size: $font-size-l;
     }
 
-    &-order-image {
-        max-width: 210px;
+    &-items {
+        $height: 2rem;
+        height: $height;
+        line-height: $height;
     }
 
-    &-total-value {
-        font-size: 20px;
-        color: #00a69c;
+    &-item {
+        font-weight: $font-weight-semilight;
     }
 
-    &-total-label {
-        font-size: 14px;
-        color: #404040;
-        margin-top: 10px;
-    }
+    &-link {
+        color: $color-secondary;
+        text-decoration: none;
+        transition: color $animation-speed-default;
 
-    &-totals {
-        border-bottom:none!important;
+        &:hover {
+            color: $color-secondary-dark;
+            transition: color $animation-speed-default;
+        }
     }
 }
-
-.table td {
-    border-top: solid 1px #ddd;
-}
-
-.table thead th {
-    border: none !important;
-}
-
-
-
-
-
-
-

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts

@@ -3,7 +3,7 @@ import { OrdersService }        from './orders.service';
 import { IOrder }               from '../shared/models/order.model';
 
 @Component({
-    selector: 'esh-orders .esh-orders',
+    selector: 'esh-orders',
     styleUrls: ['./orders.component.scss'],
     templateUrl: './orders.component.html'
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html

@@ -1,25 +1,27 @@
-<div class="container">
-    <article class="esh-pager-wrapper row">
-        <nav>
-            <span class="esh-pager-item esh-pager-item--navigable"
-                  id="Previous"
-                  [hidden]="buttonStates?.previousDisabled"
-                  (click)="onPreviousCliked($event)"
-                  aria-label="Previous">
-                Previous
-            </span>
+<div class="esh-pager">
+    <div class="container">
+        <article class="esh-pager-wrapper row">
+            <nav>
+                <span class="esh-pager-item esh-pager-item--navigable"
+                      id="Previous"
+                      [hidden]="buttonStates?.previousDisabled"
+                      (click)="onPreviousCliked($event)"
+                      aria-label="Previous">
+                    Previous
+                </span>
 
-            <span class="esh-pager-item">
-                Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
-            </span>
+                <span class="esh-pager-item">
+                    Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
+                </span>
 
-            <span class="esh-pager-item esh-pager-item--navigable"
-                  id="Next"
-                  [hidden]="buttonStates?.nextDisabled"
-                  (click)="onNextClicked($event)"
-                  aria-label="Next">
-                Next
-            </span>
-        </nav>
-    </article>
-</div>
+                <span class="esh-pager-item esh-pager-item--navigable"
+                      id="Next"
+                      [hidden]="buttonStates?.nextDisabled"
+                      (click)="onNextClicked($event)"
+                      aria-label="Next">
+                    Next
+                </span>
+            </nav>
+        </article>
+    </div>
+</div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, OnChanges, Output, Input, EventEmitter } from '@angu
 import { IPager } from '../../models/pager.model';
 
 @Component({
-    selector: 'esh-pager .esh-pager',
+    selector: 'esh-pager',
     templateUrl: './pager.html',
     styleUrls: ['./pager.scss']
 })