From d3e9b016e542d49fe013fde40fa1440a2e0fa8b8 Mon Sep 17 00:00:00 2001
From: "mohnagar1@publicisgroupe.net" <mohnagar1@publicisgroupe.net>
Date: Tue, 13 Nov 2018 11:32:16 +0530
Subject: [PATCH 1/2] added material io component card

---
 package.json                                  |  1 +
 src/app/app.module.ts                         |  6 ++++-
 .../content/header/tools/tools.component.scss |  5 ++++-
 .../image-container.component.scss            |  4 ++++
 .../image/image.component.html                | 21 ++++++++++++++++--
 .../image/image.component.scss                | 22 ++++++++++++++-----
 6 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 0a9acc7..84ff269 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6a0ba2b..00ecc9f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 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';
 
@@ -62,7 +64,9 @@ import { HomeComponent } from './content/image-container/home/home.component';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatButtonModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatCardModule,
+    MatDividerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/content/header/tools/tools.component.scss b/src/app/content/header/tools/tools.component.scss
index 6ec0b43..327c2d3 100644
--- a/src/app/content/header/tools/tools.component.scss
+++ b/src/app/content/header/tools/tools.component.scss
@@ -34,4 +34,7 @@ div.navbar-collapse li {
 //OVERWRITES
 .nav-link {
     padding: .7rem 0.5rem;
-}
\ No newline at end of file
+}
+
+ul.nav { display: flex;}
+ul.nav li { margin: auto; }
\ No newline at end of file
diff --git a/src/app/content/image-container/image-container.component.scss b/src/app/content/image-container/image-container.component.scss
index 90c6456..2012583 100644
--- a/src/app/content/image-container/image-container.component.scss
+++ b/src/app/content/image-container/image-container.component.scss
@@ -13,4 +13,8 @@ p {
 } 
 .box:nth-of-type(n + 4) { 
     order: 1; 
+}
+
+:host {
+    margin: auto;
 }
\ No newline at end of file
diff --git a/src/app/content/image-container/image/image.component.html b/src/app/content/image-container/image/image.component.html
index 745bf13..f700a1d 100644
--- a/src/app/content/image-container/image/image.component.html
+++ b/src/app/content/image-container/image/image.component.html
@@ -1,4 +1,4 @@
-<div class="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>
@@ -13,4 +13,21 @@
     <a href="#" class="card-link">Card link</a>
     <a href="#" class="card-link">Another link</a>
   </div>
-</div>
\ No newline at end of file
+</div> -->
+
+<mat-card class="card">
+  <mat-card-header>
+    <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">
+  <mat-card-content>
+    <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-divider></mat-divider>
\ No newline at end of file
diff --git a/src/app/content/image-container/image/image.component.scss b/src/app/content/image-container/image/image.component.scss
index ed58500..b4906c7 100644
--- a/src/app/content/image-container/image/image.component.scss
+++ b/src/app/content/image-container/image/image.component.scss
@@ -1,11 +1,23 @@
 //OVERWRITES
 :host {
-    margin: 0 20px;
+    margin: 0 1em;
     overflow: auto;
-
 }
+// .card {
+//     width: 20rem;
+//     margin: 20px auto;
+//     overflow: auto
+// }
+
 .card {
-    width: 20rem;
-    margin: 20px auto;
-    overflow: auto
+    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;
 }
\ No newline at end of file

From 326f7d6f3a8c566faca904be1625464d34f1b0f9 Mon Sep 17 00:00:00 2001
From: Mohit Nagar <mohnagar1@publicisgroupe.net>
Date: Tue, 27 Nov 2018 18:57:31 +0530
Subject: [PATCH 2/2] Layout for image container fixed

---
 .../image-container/image-container.component.html | 14 ++++++++------
 .../image-container/image-container.component.scss |  4 +++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/content/image-container/image-container.component.html b/src/app/content/image-container/image-container.component.html
index 2469bd9..317ae41 100644
--- a/src/app/content/image-container/image-container.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/content/image-container/image-container.component.scss b/src/app/content/image-container/image-container.component.scss
index 2012583..494b3a4 100644
--- a/src/app/content/image-container/image-container.component.scss
+++ b/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%;