Improve basket list layout

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

@@ -1,68 +1,54 @@
-<div class="esh-basket-header">
-    <ul class="container">
-        <li class="esh-basket-header-back" routerLink="/catalog">Back to list</li>
-    </ul>
-</div>
-<div class="container esh-basket-container">
-    <div class="row">
-        <div class="col-md-12">
-            <section>
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th class="esh-basket-product-column">
-                                PRODUCT
-                            </th>
-                            <th>
+<div class="esh-basket">
+    <div class="esh-basket-header">
+        <div class="container">
+            <a class="esh-basket-back" routerLink="/catalog">Back to catalog</a>
+        </div>
+    </div>
+
+    <div class="container">
+        <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>
+        </article>
 
-                            </th>
-                            <th>
-                                BRAND
-                            </th>
-                            <th>
-                                PRICE
-                            </th>
-                            <th>
-                                QUANTITY
-                            </th>
-                            <th>
-                                COST
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of basket?.items">
-                            <td class="esh-basket-product-column"><img class="esh-basket-product-image" src="{{item.pictureUrl}}" /></td>
-                            <td class="esh-basket-product-column">{{item.productName}}</td>
-                            <td class="esh-basket-product-column">ROSLYN</td>
-                            <td class="esh-basket-product-column">$ {{item.unitPrice}}</td>
-                            <td class="esh-basket-product-column">
-                                <input type="number" style="width:100px" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)"/> 
-                            </td>
-                            <td class="esh-basket-product-column esh-basket-total-value">$ {{item.unitPrice * item.quantity}}</td>
-                        </tr>
-                        <tr class="esh-basket-totals">
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td>
-                            </td>
-                            <td>
-                                <div class="esh-basket-total-value">
-                                    <div class="esh-basket-total-label"><span>TOTAL</span></div>
-                                    <span>$ {{totalPrice}}</span>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+        <article class="esh-basket-items esh-basket-items--border row"
+                    *ngFor="let item of basket?.items">
+
+            <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
+                <img class="esh-basket-image" src="{{item.pictureUrl}}" />
             </section>
-        </div>
-        <div class="col-md-8">
-        </div>
-        <div class="col-md-4">
-            <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
-        </div>
+            <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}}</section>
+            <section class="esh-basket-item esh-basket-item--middle col-xs-2">
+                <input class="esh-basket-input"
+                        type="number" 
+                        min="1" 
+                        [(ngModel)]="item.quantity" 
+                        (change)="itemQuantityChanged(item)" />
+            </section>
+            <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice * item.quantity}}</section>
+        </article>
     </div>
-</div>
+
+    <div class="container">
+        <article class="esh-basket-titles esh-basket-titles--clean row">
+            <section class="esh-basket-title col-xs-10"></section>
+            <section class="esh-basket-title col-xs-2">Total</section>
+        </article>
+
+        <article class="esh-basket-items row">
+            <section class="esh-basket-item col-xs-10"></section>
+            <section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice}}</section>
+        </article>
+
+        <article class="esh-basket-items row">
+            <section class="esh-basket-item col-xs-9"></section>
+            <section class="esh-basket-item col-xs-3">
+                <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
+            </section>
+        </article>
+    </div>
+</div>

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

@@ -1,99 +1,90 @@
 @import '../_variables.scss';
 
 .esh-basket {
+    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;
-        }
+        height: $header-height;
+    }
 
-        &-back {
-            float: left !important;
-            margin-top: 20px !important;
-            text-transform: uppercase;
-        }
+    &-back {
+        color: rgba($color-foreground-brighter, .4);
+        line-height: $header-height;
+        text-transform: uppercase;
+        text-decoration: none;
+        transition: color $animation-speed-default;
 
-        li a:hover {
-            text-decoration: none;
+        &:hover {
+            color: $color-foreground-brighter;
+            transition: color $animation-speed-default;
         }
     }
-
-    &-container {
-        min-height: 70vh;
-        padding-top: 40px;
-        margin-bottom: 30px;
-        min-width: 992px;
+    
+    &-titles {
+        padding-bottom: 1rem;
+        padding-top: 2rem;
+
+        &--clean {
+            padding-bottom: 0;
+            padding-top: 0;
+        }
     }
 
-    &-product-column {
-        max-width: 120px;
+    &-title {
         text-transform: uppercase;
-        vertical-align: middle !important;
     }
 
-    &-product-image {
-        max-width: 210px;
+    &-items {
+        &--border {
+            border-bottom: $border-light solid $color-foreground-bright;
+            padding: .5rem 0;
+
+            &:last-of-type {
+                border-color: transparent;
+            }
+        }
     }
 
-    &-total-value {
-        font-size: 20px;
-        color: #00a69c;
-        width: 90px;
+    $item-height: 8rem;
+    &-item {
+        font-size: $font-size-m;
+        font-weight: $font-weight-semilight;
+
+        &--middle {
+            line-height: $item-height;
+
+            @media screen and (max-width: $media-screen-m) {
+                line-height: $font-size-m;
+            }
+        }
+
+        &--mark {
+            color: $color-secondary;
+        }
     }
 
-    &-total-label {
-        font-size: 14px;
-        color: #404040;
-        margin-top: 10px;
+    &-image {
+        height: $item-height;
     }
 
-    &-totals {
-        border-bottom: none !important;
+    &-input {
+        line-height: 1rem;
+        width: 100%;
     }
 
     &-checkout {
-        float: right;
-        margin-top: 40px;
-        margin-bottom: 40px;
-        background-color: #83d01b;
-        color: #fff;
-        padding: 10px 20px 10px 20px;
-        border-radius: 0;
         border: none;
-        width: 255px;
+        border-radius: 0;
+        background-color: $color-secondary;
+        color: $color-foreground-brighter;
         display: inline-block;
+        font-size: 1rem;
+        font-weight: $font-weight-normal;
+        margin-top: 1rem;
+        padding: 1rem 1.5rem;
         text-align: center;
         text-transform: uppercase;
-        height: 45px;
-        font-size: 16px;
-        font-weight: normal;
     }
 }
-
-.table td {
-    border-top: solid 1px #ddd;
-}
-
-.table thead th {
-    border: none !important;
-}
-
-
-
-
-
-
-

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

@@ -7,7 +7,7 @@ import { IBasketItem }          from '../shared/models/basketItem.model';
 import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
 
 @Component({
-    selector: 'esh-basket .esh-basket',
+    selector: 'esh-basket',
     styleUrls: ['./basket.component.scss'],
     templateUrl: './basket.component.html'
 })

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

@@ -58,7 +58,7 @@
         </section>
 
         <section class="esh-orders_detail-section esh-orders_detail-section--right">
-            <article class="esh-orders_detail-titles row">
+            <article class="esh-orders_detail-titles esh-basket-titles--clean row">
                 <section class="esh-orders_detail-title col-xs-10"></section>
                 <section class="esh-orders_detail-title col-xs-2">Total</section>
             </article>

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

@@ -36,7 +36,7 @@
     }
 
     &-title {
-        font-size: $font-size-l;
+        text-transform: uppercase;
     }
 
     &-items {

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

@@ -28,7 +28,7 @@
     }
 
     &-title {
-        font-size: $font-size-l;
+        text-transform: uppercase;
     }
 
     &-items {