Added a MichaelComponent as per Project Sheet 1. <Do Not Merge Yet>

.angular-cli.json

@@ -20,6 +20,7 @@
       "prefix": "app",
       "styles": [
         "assets/styles/styles.scss",
+        "assets/styles/styles-app-loading.scss",
         "theme.scss"
       ],
       "scripts": [],

.gitignore

@@ -2,3 +2,73 @@ node_modules/
 package-lock.json
 .README.swp
 .idea/
+
+# Created by https://www.gitignore.io/api/jetbrains
+
+### JetBrains ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff:
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/dictionaries
+
+# Sensitive or high-churn files:
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.xml
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+
+# Gradle:
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# CMake
+cmake-build-debug/
+
+# Mongo Explorer plugin:
+.idea/**/mongoSettings.xml
+
+## File-based project format:
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Ruby plugin and RubyMine
+/.rakeTasks
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+### JetBrains Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+.idea/sonarlint
+
+
+# End of https://www.gitignore.io/api/jetbrains

src/app/app.component.html

@@ -6,6 +6,7 @@
     <span class="spacer">
     </span>
     <button mat-button routerLink="/home">Home</button>
+    <button mat-button routerLink="/michael">Michael's Page</button>
   </mat-toolbar-row>
 </mat-toolbar>
 

src/app/app.module.ts

@@ -4,14 +4,15 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule, MatProgressSpinnerModule, MatToolbarModule, MatListModule, MatGridListModule, MatIconModule, MatCardModule } from '@angular/material';
 import {AppRoutingModule} from './app.routing.module';
 import { FormsModule } from '@angular/forms';
+import {MichaelComponent } from './michael/michael.component';
 
 
 import { HomeComponent } from './home/home.component';
 import { AppComponent} from './app.component';
 
 @NgModule({
   declarations: [
-    AppComponent, HomeComponent
+    AppComponent, HomeComponent, MichaelComponent
   ],
   imports: [ AppRoutingModule, FormsModule, BrowserModule, MatProgressSpinnerModule , MatButtonModule, MatListModule, MatGridListModule, MatToolbarModule, MatIconModule, MatCardModule ],
   providers: [],

src/app/app.routing.module.ts

@@ -2,9 +2,11 @@ import {NgModule} from '@angular/core';
 import { CommonModule} from '@angular/common';
 import {Router, RouterModule, Routes} from '@angular/router';
 import {HomeComponent} from './home/home.component';
+import { MichaelComponent} from './michael/michael.component';
 
 
 const routes: Routes = [
+  {path: 'michael', component: MichaelComponent},
   {path: 'home', component: HomeComponent},
 
 ];

src/app/michael/michael.component.html

@@ -0,0 +1,54 @@
+<div class="grid-list">
+  <mat-card>
+    <mat-card-title>Basic Grid List</mat-card-title>
+    <mat-card-content class="basic-list">
+    <mat-grid-list cols="4" [rowHeight]="basicRowHeight">
+      <mat-grid-tile> One </mat-grid-tile>
+      <mat-grid-tile> Two </mat-grid-tile>
+      <mat-grid-tile> Three </mat-grid-tile>
+      <mat-grid-tile> Four </mat-grid-tile>
+    </mat-grid-list>
+    </mat-card-content>
+  </mat-card>
+  <mat-card>
+    <mat-card-title>Grid List with Header</mat-card-title>
+    <mat-card-content>
+      <mat-grid-list cols="3" rowHeight="200px">
+        <mat-grid-tile *ngFor="let dog of dogs" style="background:gray">
+        <mat-grid-tile-header>
+          <mat-icon mat-grid-avatar>info_outline</mat-icon>
+          {{dog.name}}
+        </mat-grid-tile-header>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </mat-card-content>
+  </mat-card>
+  <mat-card>
+    <mat-card-title>Grid List with Footer</mat-card-title>
+    <mat-card-content>
+      <mat-grid-list cols="3" rowHeight="200px">
+        <mat-grid-tile *ngFor="let dog of dogs">
+          <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png" />
+          <mat-grid-tile-footer>
+            <h3 mat-line>
+              {{dog.name}}
+            </h3>
+            <span mat-line>Human: {{dog.human}}</span>
+            <mat-icon>star_border</mat-icon>
+          </mat-grid-tile-footer>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </mat-card-content>
+  </mat-card>
+</div>
+<div class="button-row wrapper">
+  <button mat-fab>Basic</button>
+  <button mat-fab color="primary">Primary</button>
+  <button mat-fab color="accent">Accent</button>
+  <button mat-fab color="warn">Warn</button>
+  <button mat-fab disabled>Disabled</button>
+  <button mat-fab>
+    <mat-icon aria-label="Example icon-button with a heart icon">favourite</mat-icon>
+  </button>
+  <a mat-fab routerLink=".">Link</a>
+</div>

src/app/michael/michael.component.scss

@@ -0,0 +1,18 @@
+/*styles for MichaelComponent content only*/
+.grid-list {
+  width: 80%;
+  padding-left: 10%;
+  padding-right: 10%;
+  .mat-card {
+    margin: 16px 0;
+  }
+  p {
+    margin: 16px;
+  }
+  .basic-list .mat-grid-tile {
+    background: rgba(0, 0, 0, 0.32);
+  }
+  img {
+    width: 500px;
+  }
+}

src/app/michael/michael.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './michael.component.html',
+  styleUrls: ['./michael.component.scss']
+})
+
+export class MichaelComponent {
+  tiles: {text: string, cols: number, rows: number, color: string}[] = [
+{text: 'One', cols: 3, rows: 1, color: 'lightgreen'},
+    {text: 'Two', cols: 1, rows: 2, color: 'lightlight'},
+    {text: 'Three', cols: 1, rows: 1, color: 'lightblue'},
+    {text: 'Four', cols: 2, rows: 1, color: '#DDBDf1'},
+  ];
+
+  dogs: {name: string, human: string}[] = [
+    {name: 'Chris', human: 'Kara'},
+    {name: 'Michael', human: 'Jeremy'},
+    {name: 'Kerry', human: 'Igor'},
+    {name: 'Alan', human: 'Ward'},
+    {name: 'Molly', human: 'Rob'},
+    {name: 'Ben', human: 'Matias'},
+    ];
+
+  basicRowHeight = 80;
+
+}

src/assets/styles/styles-app-loading.scss

@@ -0,0 +1,33 @@
+.app-loading {
+  .logo {
+    width: 100px;
+    height: 100px;
+    // this way asset gets processed by webpack
+    background:
+      url(../img/coderDojo-loading-icon.png)
+      center center no-repeat;
+  }
+}
+body, html {
+  height: 100%;
+}
+.app-loading {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.app-loading .spinner {
+  height: 300px;
+  width: 300px;
+  animation: rotate 2s linear infinite;
+  transform-origin: center center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}

src/index.html

@@ -9,10 +9,16 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-
 </head>
 <body>
-  <app-root>Loading Content...</app-root>
+  <app-root>
+    <div class=app-loading">
+      <div class="logo"></div>
+        <svg class="spinner" viewBox="25 25 50 50">
+          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+        </svg>
+    </div>
+  </app-root>
 </body>
 </html>