Correct header not displaying in 960px + add card dashboard responsive + correct C2A title

package-lock.json

@@ -3906,9 +3906,9 @@
       }
     },
     "fs-minipass": {
-      "version": "1.2.5",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.6.tgz",
-      "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
+      "integrity": "sha512-crhvyXcMejjv3Z5d2Fa9sf5xLYVCF5O1c71QxbVnbLsmYMBEvDAftewesN/HhY03YRoA7zOMxjNGrF5svGaaeQ==",
       "dev": true,
       "requires": {
         "minipass": "^2.2.1"
@@ -4492,6 +4492,11 @@
         "rimraf": "2"
       }
     },
+    "g": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/g/-/g-2.0.1.tgz",
+      "integrity": "sha1-C1lj69DKcOO8jGdmk0oCGCHIuFc="
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -6247,11 +6252,6 @@
       "dev": true,
       "optional": true
     },
-    "js-sha512": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha512/-/js-sha512-0.8.0.tgz",
-      "integrity": "sha512-PWsmefG6Jkodqt+ePTvBZCSMFgN7Clckjd0O7su3I0+BW2QWUTJNzjktHsztGLhncP2h8mcF9V9Y2Ha59pAViQ=="
-    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -7183,11 +7183,6 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
-    "ng": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/ng/-/ng-0.0.0.tgz",
-      "integrity": "sha512-HwR40IBJa1ZU+CIGyuy7vSCN3xFYlSRfw5eIwwKOdOMNNNIl8KhT6PXKmHuFEFYpfrbOMaCYtr4QOJ3gkkubcg=="
-    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -7843,18 +7838,18 @@
           }
         },
         "tar": {
-          "version": "4.4.8",
+          "version": "4.4.9",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.9.tgz",
-          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
+          "integrity": "sha512-xisFa7Q2i3HOgfn+nmnWLGHD6Tm23hxjkx6wwGmgxkJFr6wxwXnJOdJYcZjL453PSdF0+bemO03+flAzkIdLBQ==",
           "dev": true,
           "requires": {
             "chownr": "^1.1.1",
             "fs-minipass": "^1.2.5",
-            "minipass": "^2.3.4",
+            "minipass": "^2.3.5",
-            "minizlib": "^1.1.1",
+            "minizlib": "^1.2.1",
             "mkdirp": "^0.5.0",
             "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.2"
+            "yallist": "^3.0.3"
           }
         },
         "yallist": {

package.json

@@ -26,7 +26,9 @@
     "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
     "firebase": "^6.0.2",
+    "g": "^2.0.1",
     "hammerjs": "^2.0.8",
+    "moment": "^2.24.0",
     "rxjs": "~6.3.3",
     "stacktrace-js": "latest",
     "tslib": "^1.9.0",
@@ -34,12 +36,12 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.13.0",
-    "@angular/cli": "~7.3.9",
+    "@angular/cli": "^7.3.9",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { LogService, SEOService } from '@app/core/services';
 import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service';
 
 import { environment } from '@env/environment';
+import { CardDashboardComponent } from './card-dashboard/card-dashboard.component';
 
 @NgModule( {
   declarations: [
@@ -23,6 +24,7 @@ import { environment } from '@env/environment';
     HomeComponent,
     HeaderComponent,
     RegisterComponent,
+    CardDashboardComponent,
   ],
   imports: [
     BrowserModule,

src/app/card-dashboard/card-dashboard.component.css

@@ -0,0 +1,19 @@
+.card-container {
+  margin: 40px;
+}
+
+.card-container.left.desktop {
+  margin-right: 20px;
+}
+
+.card-container.right.desktop {
+  margin-left: 20px;
+}
+
+.card-container.left.mobile {
+  margin-bottom: 20px;
+}
+
+.card-container.right.mobile {
+  margin-top: 20px;
+}

src/app/card-dashboard/card-dashboard.component.html

@@ -0,0 +1,26 @@
+<div class="card-container {{ matCardClass }}" ngClass.gt-sm="desktop" ngClass.lt-md="mobile">
+
+  <mat-card>
+
+    <mat-card-header>
+      <mat-card-title>Shiba Inu</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <p>
+        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from
+        Japan.
+        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
+        originally
+        bred for hunting.
+      </p>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+
+  </mat-card>
+
+</div>

src/app/card-dashboard/card-dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardDashboardComponent } from './card-dashboard.component';
+
+describe( 'CardDashboardComponent', () => {
+  let component: CardDashboardComponent;
+  let fixture: ComponentFixture<CardDashboardComponent>;
+
+  beforeEach( async( () => {
+    TestBed.configureTestingModule( {
+      declarations: [ CardDashboardComponent ]
+    } )
+      .compileComponents();
+  } ) );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( CardDashboardComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

src/app/card-dashboard/card-dashboard.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component( {
+  selector: 'app-card-dashboard',
+  templateUrl: './card-dashboard.component.html',
+  styleUrls: [ './card-dashboard.component.css' ]
+} )
+export class CardDashboardComponent implements OnInit {
+
+  public matCardClass: string;
+  @Input() private position: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    if ( this.position === 'first' ) {
+      this.matCardClass = 'left';
+    } else {
+      this.matCardClass = 'right';
+    }
+  }
+
+}

src/app/core/services/seo/seo.service.ts

@@ -50,7 +50,7 @@ export class SEOService {
     event.description = ( !event.description ? this.defaultDescription : event.description );
     event.noindex = ( !event.noindex ? this.defaultNoIndex : event.noindex );
     event.nofollow = ( !event.nofollow ? this.defaultNoFollow : event.nofollow );
-    this.updateTitle( event.title + ' | C2A' );
+    this.updateTitle( event.title + ' | ' + environment.appName );
     this.updateDescription( event.description );
     this.updateIndexFollow( event.noindex, event.nofollow );
   }

src/app/header/header.component.html

@@ -27,8 +27,8 @@
 
   </div>
 
-  <div id="header-container-mobile" fxLayout="row" fxLayoutAlign="space-between" fxShow
+  <div fxHide fxLayout="row" fxLayoutAlign="space-between" fxShow.lt-md="true"
-       fxHide.gt-sm="true">
+       id="header-container-mobile">
 
     <button mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
       <mat-icon style="transform: scale(1.3)">menu</mat-icon>

src/app/home/home.component.html

@@ -1 +1,21 @@
 <app-header></app-header>
+
+<div class="main-container">
+
+  <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="space-between">
+
+    <div fxFlex>
+
+      <app-card-dashboard position="first"></app-card-dashboard>
+
+    </div>
+
+    <div fxFlex>
+
+      <app-card-dashboard position="second"></app-card-dashboard>
+
+    </div>
+
+  </div>
+
+</div>

src/styles.css

@@ -17,3 +17,12 @@ app-header .mat-fab .mat-button-wrapper {
   line-height: normal;
   padding: 0;
 }
+
+.main-container {
+  max-width: 1280px;
+  margin: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  width: 100%;
+  min-height: 80%;
+}