Fix some breaking changes introduced by bootstrap 4

src/Web/WebSPA/Client/modules/app.component.html

@@ -1,22 +1,18 @@
 <header class="navbar navbar-light navbar-static-top">
     <div class="container">
-        <article class="row">
-
-            <section class="col-lg-7 col-md-6 col-xs-12">
-                <a class="navbar-brand" routerLink="catalog">
-                    <img src="assets/images/brand.png" />
-                </a>
-            </section>
-
-            <section class="col-lg-4 col-md-5 col-xs-12">
-                <esh-identity></esh-identity>
-            </section>
-
-            <section class="col-lg-1 col-xs-12">
-                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
-            </section>
-
-        </article>
+        <section class="col-lg-7 col-md-6 col-12">
+            <a class="navbar-brand" routerLink="catalog">
+                <img src="assets/images/brand.png" />
+            </a>
+        </section>
+
+        <section class="col-lg-4 col-md-5 col-12">
+            <esh-identity></esh-identity>
+        </section>
+
+        <section class="col-lg-1 col-12">
+            <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
+        </section>
     </div>
 </header>
 
@@ -32,10 +28,10 @@
             </section>
 
             <section class="col-sm-6">
-                <img class="esh-app-footer-text hidden-xs" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image" />
+                <img class="esh-app-footer-text hidden-xs" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image"
+                />
             </section>
 
         </article>
     </div>
-</footer>
-
+</footer>

src/Web/WebSPA/Client/modules/basket/basket.component.html

@@ -9,11 +9,11 @@
         </div>
  
         <article class="esh-basket-titles row">
-            <section class="esh-basket-title col-xs-3">Product</section>
-            <section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
-            <section class="esh-basket-title col-xs-2">Price</section>
-            <section class="esh-basket-title col-xs-2">Quantity</section>
-            <section class="esh-basket-title col-xs-2">Cost</section>
+            <section class="esh-basket-title col-3">Product</section>
+            <section class="esh-basket-title col-3 hidden-lg-down"></section>
+            <section class="esh-basket-title col-2">Price</section>
+            <section class="esh-basket-title col-2">Quantity</section>
+            <section class="esh-basket-title col-2">Cost</section>
         </article>
 
         <div *ngFor="let item of basket?.items" class="esh-basket-items--border">
@@ -22,9 +22,9 @@
                 <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
                     <img class="esh-basket-image" src="{{item.pictureUrl}}"/>
                 </section>
-                <section class="esh-basket-item esh-basket-item--middle col-xs-3">{{item.productName}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice | number:'.2-2'}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-xs-2">
+                <section class="esh-basket-item esh-basket-item--middle col-3">{{item.productName}}</section>
+                <section class="esh-basket-item esh-basket-item--middle col-2">$ {{item.unitPrice | number:'.2-2'}}</section>
+                <section class="esh-basket-item esh-basket-item--middle col-2">
                     <input id="quantity"
                            class="esh-basket-input"
                            type="number"
@@ -32,7 +32,7 @@
                            [(ngModel)]="item.quantity"
                            (change)="itemQuantityChanged(item)"/>
                 </section>
-                <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
+                <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
             </article>
             <br/>
             <div class="esh-basket-items-margin-left1 row">
@@ -43,21 +43,21 @@
 
     <div class="container">
         <article class="esh-basket-titles esh-basket-titles--clean row">
-            <section class="esh-basket-title col-xs-9"></section>
-            <section class="esh-basket-title col-xs-2">Total</section>
+            <section class="esh-basket-title col-9"></section>
+            <section class="esh-basket-title col-2">Total</section>
         </article>
 
         <article class="esh-basket-items row">
-            <section class="esh-basket-item col-xs-9"></section>
-            <section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice | number:'.2-2'}}</section>
+            <section class="esh-basket-item col-9"></section>
+            <section class="esh-basket-item esh-basket-item--mark col-2">$ {{totalPrice | number:'.2-2'}}</section>
         </article>
 
         <article class="esh-basket-items row">
-            <section class="esh-basket-item col-xs-7"></section>
-            <section class="esh-basket-item col-xs-2">
+            <section class="esh-basket-item col-7"></section>
+            <section class="esh-basket-item col-2">
                 <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
             </section>
-            <section class="esh-basket-item col-xs-3">
+            <section class="esh-basket-item col-3">
                 <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
             </section>
         </article>

src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html

@@ -4,51 +4,51 @@
     <div class="container">
         <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>
-                <section class="esh-orders_detail-title col-xs-3">Total</section>
-                <section class="esh-orders_detail-title col-xs-3">Status</section>
+                <section class="esh-orders_detail-title col-3">Order number</section>
+                <section class="esh-orders_detail-title col-3">Date</section>
+                <section class="esh-orders_detail-title col-3">Total</section>
+                <section class="esh-orders_detail-title col-3">Status</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <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>
+                <section class="esh-orders_detail-item col-3">{{order.ordernumber}}</section>
+                <section class="esh-orders_detail-item col-3">{{order.date | date:'short'}}</section>
+                <section class="esh-orders_detail-item col-3">$ {{order.total}}</section>
+                <section class="esh-orders_detail-item col-3">{{order.status}}</section>
             </article>
         </section>
         
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-12">Description</section>
+                <section class="esh-orders_detail-title col-12">Description</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">{{order.description}}</section>
+                <section class="esh-orders_detail-item col-12">{{order.description}}</section>
             </article>
         </section>
 
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-12">Shiping address</section>
+                <section class="esh-orders_detail-title col-12">Shiping address</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">{{order.street}}</section>
+                <section class="esh-orders_detail-item col-12">{{order.street}}</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">{{order.city}}</section>
+                <section class="esh-orders_detail-item col-12">{{order.city}}</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">{{order.country}}</section>
+                <section class="esh-orders_detail-item col-12">{{order.country}}</section>
             </article>
         </section>
 
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-12">Order details</section>
+                <section class="esh-orders_detail-title col-12">Order details</section>
             </article>
 
             <article class="esh-orders_detail-items esh-orders_detail-items--border row"
@@ -56,22 +56,22 @@
                 <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 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 | number:'.2-2'}}</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) | number:'.2-2'}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-4">{{item.productname}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">$ {{item.unitprice | number:'.2-2'}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">{{item.units}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
             </article>
         </section>
 
         <section class="esh-orders_detail-section esh-orders_detail-section--right">
             <article class="esh-orders_detail-titles esh-basket-titles--clean row">
-                <section class="esh-orders_detail-title col-xs-9"></section>
-                <section class="esh-orders_detail-title col-xs-2">Total</section>
+                <section class="esh-orders_detail-title col-9"></section>
+                <section class="esh-orders_detail-title col-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 esh-orders_detail-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
+                <section class="esh-orders_detail-item col-9"></section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-2">$ {{order.total | number:'.2-2'}}</section>
             </article>
         </section>
     </div>

src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html

@@ -77,7 +77,7 @@
         </section>
         <section class="esh-orders_new-section">
             <article class="esh-orders_new-titles row">
-                <section class="esh-orders_new-title col-xs-12">Order details</section>
+                <section class="esh-orders_new-title col-12">Order details</section>
             </article>
 
             <article class="esh-orders_new-items esh-orders_new-items--border row"
@@ -85,22 +85,22 @@
                 <section class="esh-orders_new-item col-md-4 hidden-md-down">
                     <img class="esh-orders_new-image" src="{{item.pictureurl}}">
                 </section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice | number:'.2-2'}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-4">{{item.productname}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-1">$ {{item.unitprice | number:'.2-2'}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-1">{{item.units}}</section>
+                <section class="esh-orders_new-item esh-orders_new-item--middle col-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
             </article>
         </section>
 
         <section class="esh-orders_new-section esh-orders_new-section--right">
             <article class="esh-orders_new-titles row">
-                <section class="esh-orders_new-title col-xs-9"></section>
-                <section class="esh-orders_new-title col-xs-2">Total</section>
+                <section class="esh-orders_new-title col-9"></section>
+                <section class="esh-orders_new-title col-2">Total</section>
             </article>
 
             <article class="esh-orders_new-items row">
-                <section class="esh-orders_new-item col-xs-9"></section>
-                <section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
+                <section class="esh-orders_new-item col-9"></section>
+                <section class="esh-orders_new-item esh-orders_new-item--mark col-2">$ {{order.total | number:'.2-2'}}</section>
             </article>
         </section>
         <section class="esh-orders_new-section">

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

@@ -6,20 +6,20 @@
             Error requesting order list, please try later on
         </div>
         <article class="esh-orders-titles row">
-            <section class="esh-orders-title col-xs-2">Order number</section>
-            <section class="esh-orders-title col-xs-4">Date</section>
-            <section class="esh-orders-title col-xs-2">Total</section>
-            <section class="esh-orders-title col-xs-2">Status</section>
-            <section class="esh-orders-title col-xs-2"></section>
+            <section class="esh-orders-title col-2">Order number</section>
+            <section class="esh-orders-title col-4">Date</section>
+            <section class="esh-orders-title col-2">Total</section>
+            <section class="esh-orders-title col-2">Status</section>
+            <section class="esh-orders-title col-2"></section>
         </article>
 
         <article class="esh-orders-items row"
                  *ngFor="let order of orders">
-            <section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
-            <section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
-            <section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
-            <section class="esh-orders-item col-xs-2">{{order.status}}</section>
-            <section class="esh-orders-item col-xs-2">
+            <section class="esh-orders-item col-2">{{order.ordernumber}}</section>
+            <section class="esh-orders-item col-4">{{order.date | date:'short'}}</section>
+            <section class="esh-orders-item col-2">$ {{order.total}}</section>
+            <section class="esh-orders-item col-2">{{order.status}}</section>
+            <section class="esh-orders-item col-2">
                 <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
             </section>
         </article>

src/Web/WebSPA/Client/modules/shared/components/pager/pager.scss

@@ -7,8 +7,12 @@
         text-align: center;
     }
 
+    nav {
+        flex-grow: 1;
+    }
+
     &-item {
-        $margin: 5vw;
+        $margin: 3vw;
         margin: 0 $margin;
 
         &.is-disabled {