Material changes

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "@material/card": "^0.41.0",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",

src/app/app.module.ts

@@ -3,7 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule, MatCheckboxModule, MatCardModule } from '@angular/material';
+import { MatButtonModule, MatCheckboxModule } from '@angular/material';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
 
 import { AppRoutingModule } from './app-routing/app-routing.module';
 
@@ -63,7 +65,8 @@ import { HomeComponent } from './content/image-container/home/home.component';
     BrowserAnimationsModule,
     MatButtonModule,
     MatCheckboxModule,
-    MatCardModule
+    MatCardModule,
+    MatDividerModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/content/header/tools/tools.component.scss

@@ -34,4 +34,7 @@ div.navbar-collapse li {
 //OVERWRITES
 .nav-link {
     padding: .7rem 0.5rem;
-}
+}
+
+ul.nav { display: flex;}
+ul.nav li { margin: auto; }

src/app/content/image-container/image-container.component.html

@@ -1,7 +1,9 @@
-<div class="row">
-  <app-image 
-    class="image"
-    *ngFor="let image of images"
-    [image]='image'>
-  </app-image>
+<div class="container-fluid">
+  <div class="row">
+    <app-image 
+      class="image" 
+      *ngFor="let image of images" 
+      [image]='image'>
+    </app-image>
+  </div>
 </div>

src/app/content/image-container/image-container.component.scss

@@ -3,7 +3,9 @@ p {
 }
 
 .row { 
-    display: flex; flex-flow: row wrap; 
+    display: flex; 
+    flex-flow: row wrap; 
+    justify-content: space-between;
 } 
 .row:after { 
     content: ''; width: 100%; 
@@ -13,4 +15,8 @@ p {
 } 
 .box:nth-of-type(n + 4) { 
     order: 1; 
+}
+
+:host {
+    margin: auto;
 }

src/app/content/image-container/image/image.component.html

@@ -1,17 +1,33 @@
-<mat-card class="example-card">
+<!-- <div class="card">
+  <img class="card-img-top" src="{{image.imageUrl}}" alt="Card image cap">
+  <div class="card-body">
+    <h5 class="card-title">{{image.imageTitle}}</h5>
+    <p class="card-text">{{image.imageDescription}}</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-body">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div> -->
+
+<mat-card class="card">
   <mat-card-header>
-    <div mat-card-avatar class="example-header-image"></div>
-    <mat-card-title>{{ image.imageTitle }}</mat-card-title>
-    <mat-card-subtitle>{{ image.imageCateogry }}</mat-card-subtitle>
+    <div mat-card-avatar class="header-image"></div>
+    <mat-card-title>{{image.imageTitle}}</mat-card-title>
+    <mat-card-subtitle>Nature</mat-card-subtitle>
   </mat-card-header>
-  <img mat-card-image src="{{ image.imageUrl }}" alt="Photo of a Shiba Inu">
+  <img mat-card-image src="{{image.imageUrl}}" alt="Photo of a Shiba Inu">
   <mat-card-content>
-    <p>
-      {{ image.imageDescription }}
-    </p>
+    <p>{{image.imageDescription}}</p>
   </mat-card-content>
   <mat-card-actions>
     <button mat-button>LIKE</button>
     <button mat-button>SHARE</button>
   </mat-card-actions>
-</mat-card>
+</mat-card>
+<mat-divider></mat-divider>

src/app/content/image-container/image/image.component.scss

@@ -1,9 +1,14 @@
 //OVERWRITES
 :host {
-    margin: 0 20px;
+    margin: 0 1em;
     overflow: auto;
-
 }
+// .card {
+//     width: 20rem;
+//     margin: 20px auto;
+//     overflow: auto
+// }
+
 .card {
     width: 20rem;
     margin: 20px auto;
@@ -17,4 +22,14 @@
 .image {
     background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
     background-size: cover;
+    max-width: 400px;
+}
+  
+.header-image {
+    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+    background-size: cover;
+}
+
+mat-divider {
+    margin: 1em 0;
 }