fix catalog layout

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss

@@ -20,13 +20,20 @@ body {
     font-weight: $font-weight-normal;
     z-index: 10;
 }
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
 
 .preloading {
     color: $color-brand;
+    display: block;
     font-size: $font-size-xl;
     left: 50%;
     position: fixed;
     top: 50%;
+    transform: translate(-50%, -50%);
 }
 
 select::-ms-expand {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss

@@ -33,7 +33,7 @@ $font-weight-normal: 400;
 $font-weight-semibold: 600;
 $font-weight-bold: 700;
 
-$font-size-xs: .5rem;    // 8px
+$font-size-xs: .65rem;    // 10.4px
 $font-size-s: .85rem;    // 13.6px
 $font-size-m: 1rem;      // 16px
 $font-size-l: 1.25rem;   // 20px

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

@@ -1,38 +1,46 @@
+<section class="esh-catalog-hero">
     <div class="container">
-    <div class="esh-catalog-hero">
         <img class="esh-catalog-title" src="../../images/main_banner_text.png" />
     </div>
-    <div class="esh-catalog-filter">
+</section>
-        <div class="esh-catalog-filter-container">
+
+<section class="esh-catalog-filters">
     <div class="container">
-                <div data-name="brand" class="esh-catalog-filter-wrapper">
+        <label class="esh-catalog-label" data-title="brand">
-                    <select class="esh-catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
+            <select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
                 <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
             </select>
-                </div>
+        </label>
-                <div data-name="type" class="esh-catalog-filter-wrapper">
+        <label class="esh-catalog-label" data-title="type">
-                    <select class="esh-catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)">
+            <select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
                 <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
             </select>
+        </label>
+        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="../../images/arrow-right.svg" />
     </div>
-                <button class="esh-catalog-filter-button" (click)="onFilterApplied($event)">
+</section>
-                    <img src="../../images/arrow-right.svg">
+
-                </button>
+<div class="container">
-            </div>
-        </div>
-    </div>
     <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-    <div class="esh-catalog-content row">
+
-        <div class="col-md-4 esh-catalog-content-item" *ngFor="let item of catalog?.data">
+    <div class="esh-catalog-items row">
-            <img src="{{item.pictureUri}}" />
+        <div class="esh-catalog-item col-md-4"
-            <button (click)="addToCart(item)" class="esh-catalog-content-item-button">[ ADD TO CART ]</button>
+             *ngFor="let item of catalog?.data">
-            <div class="esh-catalog-content-item-title">
+
+            <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
+            <button class="esh-catalog-button" (click)="addToCart(item)">
+                [ ADD TO CART ]
+            </button>
+
+            <div class="esh-catalog-name">
                 <span>{{item.name}}</span>
             </div>
-            <div class="esh-catalog-content-item-price">
+            <div class="esh-catalog-price">
                 <span>{{item.price}}</span>
             </div>
         </div>
     </div>
+
     <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
 </div>
+

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

@@ -3,6 +3,7 @@
 .esh-catalog {
 
     $banner-height: 260px;
+
     &-hero {
         background-image: url('../../images/main_banner.png');
         background-size: cover;
@@ -16,105 +17,132 @@
     }
 
     $filter-height: 65px;
-    &-filter {
-        height: $filter-height;
 
-        &-container {
+    &-filters {
         background-color: $color-brand;
         height: $filter-height;
-            left: 0;
+    }
+
+    $filter-padding: .5rem;
+
+    &-filter {
+        background-color: transparent;
+        border-color: $color-brand-bright;
+        color: $color-foreground-brighter;
+        cursor: pointer;
+        margin-right: 1rem;
+        margin-top: .5rem;
+        outline-color: $color-secondary;
+        padding-bottom: 0;
+        padding-left: $filter-padding;
+        padding-right: $filter-padding;
+        padding-top: $filter-padding * 3;
+        min-width: 140px;
+        -webkit-appearance: none;
+
+        option {
+            background-color: $color-brand;
+        }
+    }
+
+    &-label {
+        display: inline-block;
+        position: relative;
+        z-index: 0;
+
+        &::before {
+            color: rgba($color-foreground-brighter, .5);
+            content: attr(data-title);
+            font-size: $font-size-xs;
+            margin-top: $font-size-xs;
+            margin-left: $filter-padding;
             position: absolute;
+            text-transform: uppercase;
+            z-index: 1;
+        }
+
+        &::after {
+            background-image: url('../../images/arrow-down.png');
+            height: 7px; //png height
+            content: '';
+            position: absolute;
+            right: $filter-padding * 3;
+            top: $filter-padding * 5;
+            width: 10px; //png width
+            z-index: 1;
+        }
+    }
+
+    &-send {
+        background-color: $color-secondary;
+        color: $color-foreground-brighter;
+        cursor: pointer;
+        font-size: $font-size-m;
+        margin-top: -$filter-padding * 3;
+        padding: $filter-padding;
+        transition: all $animation-speed-default;
+
+        &:hover {
+            background-color: $color-secondary-darker;
+            transition: all $animation-speed-default;
+        }
+    }
+
+    &-items {
+        margin-top: 1rem;
+    }
+
+    &-item {
+        text-align: center;
+        margin-bottom: 1.5rem;
+        width: 33%;
+
+        @media screen and (max-width: $media-screen-m) {
+            width: 50%;
+        }
+
+        @media screen and (max-width: $media-screen-s) {
+            width: 100%;
+        }
+    }
+
+    &-thumbnail {
+        max-width: 370px;
         width: 100%;
     }
 
     &-button {
-            width: 45px;
-            height: 45px;
-            padding: 6px 20px 10px 8px;
         background-color: $color-secondary;
-            color: white;
-            font-size: 16px;
-            margin: 10px 0;
-            border: none;
-            position: absolute;
-        }
-
-        &-select {
-            background-color: transparent;
-            padding: 10px;
-            margin: 10px;
-            margin-right: 20px;
-            color: #fff;
-            padding-top: 20px;
-            padding-bottom: 3px;
-            min-width: 140px;
-            border-color: #37c7ca;
-            max-height: 43px;
-            -webkit-appearance: none;
-
-            & option {
-                background-color: #00a69c;
-            }
-        }
-
-        &-wrapper {
-            z-index: 0;
-            display: inline-block;
-            margin-left: -10px;
-        }
-
-        &-wrapper::before {
-            content: attr(data-name);
-            opacity: 0.5;
-            z-index: 1;
-            text-transform: uppercase;
-            position: absolute;
-            font-size: 10px;
-            margin-top: 15px;
-            margin-left: 21px;
-            color: white;
-        }
-    }
-
-    &-content {
-        margin-top: 10px;
-
-        &-item {
-            text-align: center;
-            margin-bottom: 20px;
-
-            &-image {
-            }
-
-            &-button {
-                width: 255px;
-                height: 45px;
-                padding: 10px 20px 10px 20px;
-                background-color: $color-secondary;
-                color: white;
-                font-size: 16px;
-                margin: 10px 0;
         border: none;
+        color: $color-foreground-brighter;
         cursor: pointer;
+        font-size: $font-size-m;
+        height: 3rem;
+        margin-top: 1rem;
+        transition: all $animation-speed-default;
+        width: 80%;
+
+        &:hover {
+            background-color: $color-secondary-darker;
+            transition: all $animation-speed-default;
+        }
     }
 
-            &-title {
+    &-name {
+        font-size: $font-size-m;
+        font-weight: $font-weight-semilight;
+        margin-top: .5rem;
         text-align: center;
         text-transform: uppercase;
-                font-weight: 300;
-                font-size: 16px;
-                /*margin-top: 20px;*/
     }
 
     &-price {
         text-align: center;
         font-weight: 900;
         font-size: 28px;
-            }
 
-            &-price::before {
+        &::before {
             content: '$';
         }
     }
 }
-}