SessionCompanion/SessionCompanion/ClientApp/angular.json

@@ -20,8 +20,11 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/assets"],
+            "assets": [
+              "src/assets"
+            ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
@@ -71,16 +74,26 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.css"],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
             "scripts": [],
-            "assets": ["src/assets"]
+            "assets": [
+              "src/assets"
+            ]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "tsConfig": [
-            "exclude": ["**/node_modules/**"]
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "server": {
@@ -126,7 +139,9 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }

SessionCompanion/SessionCompanion/ClientApp/package-lock.json

@@ -297,6 +297,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "8.2.3",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/@angular/cdk/-/cdk-8.2.3.tgz",
+      "integrity": "sha1-Frlv+pNcv1pkZ1fsrysZxDRnj3I=",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "8.3.26",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-8.3.26.tgz",
@@ -1278,6 +1295,14 @@
       "integrity": "sha512-uXGVSC4ugkyBt7pYdI8qaKNV0TIxfjSWb3dWNuhD6b9riPtaa+xJFQrfMu7OX/tVX642aFxca4jkUHBLCyWptA==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "8.2.3",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/@angular/material/-/material-8.2.3.tgz",
+      "integrity": "sha1-FlQ+Tgaj/eJlGiXP4SbojnFK4QU=",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "8.2.12",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.12.tgz",
@@ -6102,6 +6127,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
       "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",

SessionCompanion/SessionCompanion/ClientApp/package.json

@@ -13,10 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "8.2.12",
+    "@angular/cdk": "~8.2.3",
     "@angular/common": "8.2.12",
     "@angular/compiler": "8.2.12",
     "@angular/core": "8.2.12",
     "@angular/forms": "8.2.12",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "8.2.12",
     "@angular/platform-browser-dynamic": "8.2.12",
     "@angular/platform-server": "8.2.12",
@@ -25,6 +27,7 @@
     "aspnet-prerendering": "^3.0.1",
     "bootstrap": "^4.3.1",
     "core-js": "^3.3.3",
+    "hammerjs": "^2.0.8",
     "jquery": "3.4.1",
     "oidc-client": "^1.9.1",
     "popper.js": "^1.16.0",

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
 import { HomeComponent } from './pages/home/home.component';
 import {appRoutingModule} from '../app.routing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import {appRoutingModule} from '../app.routing';
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
     FormsModule,
-    appRoutingModule
+    appRoutingModule,
+    BrowserAnimationsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

SessionCompanion/SessionCompanion/ClientApp/src/index.html

@@ -7,6 +7,8 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
   <body>
     <app-root>Loading...</app-root>

SessionCompanion/SessionCompanion/ClientApp/src/main.ts

@@ -1,3 +1,4 @@
+import 'hammerjs';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

SessionCompanion/SessionCompanion/ClientApp/src/styles.css

@@ -1,6 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
+@import "@angular/material/prebuilt-themes/deeppurple-amber.css";
 
-/* Provide sufficient contrast against white background */
 a {
   color: #0366d6;
 }
@@ -14,3 +13,12 @@ code {
   background-color: #1b6ec2;
   border-color: #1861ac;
 }
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}