Added Angular Material with 2 switchable themes, mock with json-server, masonry for card layout and proxy redirect

Author: PI-Mathis

angular.json

@@ -23,6 +23,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/main.scss"
             ],
             "scripts": []
@@ -72,6 +73,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/main.scss"
             ],
             "scripts": [],

mocks/data.json

@@ -2,17 +2,32 @@
   "projects": [
     {
       "id": 1,
-      "link": "/",
+      "thumbnail": "https://images.unsplash.com/photo-1520769669658-f07657f5a307?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
       "title": "Online e-merchant management system - attaching integration with the iOS"
     },
     {
       "id": 2,
-      "link": "/",
+      "thumbnail": "https://images.unsplash.com/photo-1521109762031-b71a005c25b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
       "title": "Notes on pipeline upgrade"
     },
     {
       "id": 3,
-      "link": "/",
+      "thumbnail": "https://images.unsplash.com/photo-1531504060587-e6811129c0f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
+      "title": "Assessment report for merchant account"
+    },
+    {
+      "id": 1,
+      "thumbnail": "https://images.unsplash.com/photo-1475066392170-59d55d96fe51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80",
+      "title": "Online e-merchant management system - attaching integration with the iOS"
+    },
+    {
+      "id": 2,
+      "thumbnail": "https://images.unsplash.com/photo-1518124880777-cf8c82231ffb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1404&q=80",
+      "title": "Notes on pipeline upgrade"
+    },
+    {
+      "id": 3,
+      "thumbnail": "https://images.unsplash.com/photo-1531504060587-e6811129c0f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
       "title": "Assessment report for merchant account"
     }
   ]

package-lock.json

@@ -13,11 +13,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.3",
+    "@angular/cdk": "~7.1.1",
     "@angular/common": "^6.0.3",
     "@angular/compiler": "^6.0.3",
     "@angular/core": "^6.0.3",
     "@angular/forms": "^6.0.3",
     "@angular/http": "^6.0.3",
+    "@angular/material": "^7.1.1",
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
@@ -30,6 +32,7 @@
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "json-server": "^0.14.0",
+    "ngx-masonry": "^1.1.2",
     "ngx-spinner": "^6.1.2",
     "rxjs": "^6.0.0",
     "rxjs-compat": "^6.2.2",

package.json

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+

src/app/app.component.html

@@ -1,10 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'app';
+
+export class AppComponent implements OnInit {
+
+
+
+  constructor(
+
+  ) { }
+
+  ngOnInit(): void {
+
+  }
+
 }

src/app/app.component.ts

@@ -6,15 +6,21 @@ import { SharedModule } from '@app/shared';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+
 import { ContentLayoutComponent } from './layouts/content-layout/content-layout.component';
+import { NavComponent } from './layouts/nav/nav.component';
+import { FooterComponent } from './layouts/footer/footer.component';
 
 import { AuthModule } from './modules/auth/auth.module';
 import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
     AppComponent,
     ContentLayoutComponent,
+    NavComponent,
+    FooterComponent,
     AuthLayoutComponent
   ],
   imports: [
@@ -29,7 +35,9 @@ import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component
     SharedModule,
 
     // app
-    AppRoutingModule
+    AppRoutingModule,
+
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -1,4 +1,5 @@
 export class Project {
     link: string;
     title: string;
+    thumbnail: string;
 }

src/app/core/models/project.model.ts

@@ -2,3 +2,4 @@ export * from './auth.service';
 export * from './json-api.service';
 export * from './project.service';
 export * from './api.service';
+export * from './theme.service';

src/app/core/services/index.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ThemeService = TestBed.get(ThemeService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/theme.service.spec.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private darkTheme: Subject<boolean> = new Subject<boolean>();
+  isDarkTheme = this.darkTheme.asObservable();
+
+  setDarkTheme(isDarkTheme: boolean) {
+    this.darkTheme.next(isDarkTheme);
+  }
+}

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

@@ -6,7 +6,7 @@
         <div class="card col-md-6 mt-3 mx-auto">
           <div class="card-body">
             <h4 class="card-title text-center">
-              <fa-icon [icon]="faUserCircle" size="3x"></fa-icon>
+              <fa-icon icon="user-circle" size="3x"></fa-icon>
             </h4>
             <router-outlet></router-outlet>
           </div>

src/app/layouts/auth-layout/auth-layout.component.html

@@ -1,7 +1,7 @@
 .full-width-image {
   min-height: 100vh;
   width: 100vw;
-  background: url("../../../assets/images/mountain.png") no-repeat center center fixed;
+  background: url("../../../assets/images/photo-1505765050516-f72dcac9c60e.jpg") no-repeat center center fixed;
   background-size: cover;
 }
 
@@ -23,6 +23,6 @@
 }
 
 .card {
-  background-color: #2a2a2a;
+  background-color: rgba(42, 42, 42, 0.8);
   color: #FFF;
 }

src/app/layouts/auth-layout/auth-layout.component.css renamed to src/app/layouts/auth-layout/auth-layout.component.scss

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-auth-layout',
   templateUrl: './auth-layout.component.html',
-  styleUrls: ['./auth-layout.component.css']
+  styleUrls: ['./auth-layout.component.scss']
 })
 export class AuthLayoutComponent implements OnInit {
 
-  faUserCircle = faUserCircle;
-
   constructor() { }
 
   ngOnInit() {

src/app/layouts/auth-layout/auth-layout.component.ts

@@ -1,5 +1,11 @@
-<app-nav></app-nav>
-<div class="container">
-  <router-outlet></router-outlet>
+<div [class]="theme">
+  <div class="mat-app-background">
+    <app-nav></app-nav>
+
+      <div class="container">
+        <router-outlet></router-outlet>
+      </div>
+
+    <app-footer (changeTheme)="onThemeChange($event)"></app-footer>
+  </div>
 </div>
-<app-footer></app-footer>

src/app/layouts/content-layout/content-layout.component.html

@@ -0,0 +1,3 @@
+.mat-app-background {
+  height: 100%;
+}