Add header component

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

@@ -1,9 +1,5 @@
 <div class="esh-basket">
-    <div class="esh-basket-header">
+    <esh-header url="/catalog">Back to catalog</esh-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">

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

@@ -4,8 +4,8 @@ import { BrowserModule  }               from '@angular/platform-browser';
 import { SharedModule }                 from '../shared/shared.module';
 import { BasketComponent }              from './basket.component';
 import { BasketStatusComponent }        from './basket-status/basket-status.component';
-//import { routing }                      from './basket.routes';
 import { BasketService }                from './basket.service';
+import { Header }                from '../shared/components/header/header';
 
 @NgModule({
     imports: [SharedModule],

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

@@ -57,7 +57,6 @@ export class CatalogComponent implements OnInit {
     getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) {
         this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => {
             this.catalog = catalog;
-            //console.log('catalog items retrieved: ' + catalog.count);
 
             this.paginationInfo = {
                 actualPage : catalog.pageIndex,
@@ -67,7 +66,6 @@ export class CatalogComponent implements OnInit {
                 items: catalog.pageSize
             };
 
-            //console.log(this.paginationInfo);
         });
     }
 
@@ -76,7 +74,6 @@ export class CatalogComponent implements OnInit {
             this.types = types;
             let alltypes = { id: null, type: 'All' };
             this.types.unshift(alltypes);
-            //console.log('types retrieved: ' + types.length);
         });
     }
 
@@ -85,7 +82,6 @@ export class CatalogComponent implements OnInit {
             this.brands = brands;
             let allBrands = { id: null, brand: 'All' };
             this.brands.unshift(allBrands);
-            //console.log('brands retrieved: ' + brands.length);
         });
     }
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts

@@ -3,7 +3,6 @@ import { BrowserModule  }       from '@angular/platform-browser';
 
 import { SharedModule }         from '../shared/shared.module';
 import { CatalogComponent }     from './catalog.component';
-//import { routing }              from './catalog.routes';
 import { CatalogService }       from './catalog.service';
 import { Pager }                from '../shared/components/pager/pager';
 

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

@@ -1,9 +1,5 @@
 <div class="esh-orders_detail">
-    <div class="esh-orders_detail-header">
+    <esh-header url="/orders">Back to list</esh-header>
-        <div class="container">
-            <a class="esh-orders_detail-back" routerLink="/orders">Back to list</a>
-        </div>
-    </div>
 
     <div class="container">
         <section class="esh-orders_detail-section">

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

@@ -3,25 +3,6 @@
 .esh-orders_detail {
     min-height: 80vh;
 
-    $header-height: 4rem;
-    &-header {
-        background-color: #00A69C;
-        height: $header-height;
-    }
-
-    &-back {
-        color: rgba($color-foreground-brighter, .4);
-        line-height: $header-height;
-        text-transform: uppercase;
-        text-decoration: none;
-        transition: color $animation-speed-default;
-
-        &:hover {
-            color: $color-foreground-brighter;
-            transition: color $animation-speed-default;
-        }
-    }
-
     &-section {
         padding: 1rem 0;
 

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

@@ -1,9 +1,5 @@
 <div class="esh-orders">
-    <div class="esh-orders-header">
+    <esh-header url="/catalog">Back to catalog</esh-header>
-        <div class="container">
-            <a class="esh-orders-back" routerLink="/catalog">Back to catalog</a>
-        </div>
-    </div>
 
     <div class="container">
         <article class="esh-orders-titles row">

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

@@ -6,7 +6,7 @@ import { OrdersComponent }      from './orders.component';
 import { OrdersDetailComponent }      from './orders-detail/orders-detail.component';
 import { OrdersNewComponent }      from './orders-new/orders-new.component';
 import { OrdersService }        from './orders.service';
-import { Pager }                from '../shared/components/pager/pager';
+import { Header }                from '../shared/components/header/header';
 
 @NgModule({
     imports: [BrowserModule, SharedModule],

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

@@ -0,0 +1,7 @@
+<div class="esh-header">
+    <div class="container">
+        <a class="esh-header-back" routerLink="{{url}}">
+            <ng-content></ng-content>
+        </a>
+    </div>
+</div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/header/header.scss

@@ -0,0 +1,21 @@
+@import "../../../variables";
+
+.esh-header {
+    $header-height: 4rem;
+
+    background-color: $color-brand;
+    height: $header-height;
+
+    &-back {
+        color: rgba($color-foreground-brighter, .4);
+        line-height: $header-height;
+        text-transform: uppercase;
+        text-decoration: none;
+        transition: color $animation-speed-default;
+
+        &:hover {
+            color: $color-foreground-brighter;
+            transition: color $animation-speed-default;
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'esh-header',
+    templateUrl: './header.html',
+    styleUrls: ['./header.scss']
+})
+export class Header {
+    @Input()
+    url: string;
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss

@@ -39,7 +39,7 @@
     }
 
     &:hover &-drop {
-        height: 6rem;
+        height: 7rem;
         transition: height $animation-speed-default;
     }
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/shared.module.ts

@@ -20,8 +20,9 @@ import { BasketWrapperService} from './services/basket.wrapper.service';
 import { SecurityService } from './services/security.service';
 
 //Components:
-import {Pager } from './components/pager/pager';
+import { Pager } from './components/pager/pager';
-import {Identity } from './components/identity/identity';
+import { Header } from './components/header/header';
+import { Identity } from './components/identity/identity';
 
 @NgModule({
     imports: [
@@ -42,6 +43,7 @@ import {Identity } from './components/identity/identity';
         PageHeadingComponent,
         UppercasePipe,
         Pager,
+        Header,
         Identity
     ],
     exports: [
@@ -61,6 +63,7 @@ import {Identity } from './components/identity/identity';
         PageHeadingComponent,
         UppercasePipe,
         Pager,
+        Header,
         Identity
     ]
 })