From 6bbb618f12fe845fc6dc2e13ac68539de7922a71 Mon Sep 17 00:00:00 2001
From: Takiguchi <florian.thierry72@gmail.com>
Date: Thu, 8 Aug 2019 20:25:27 +0200
Subject: [PATCH] Refactor the post-card component html.

---
 .../core/post-card/post-card.component.html   | 27 +++++++++++++++++
 .../app/core/post-card/post-card.component.ts | 30 ++-----------------
 2 files changed, 30 insertions(+), 27 deletions(-)
 create mode 100644 src/main/ts/src/app/core/post-card/post-card.component.html

diff --git a/src/main/ts/src/app/core/post-card/post-card.component.html b/src/main/ts/src/app/core/post-card/post-card.component.html
new file mode 100644
index 0000000..bbbb314
--- /dev/null
+++ b/src/main/ts/src/app/core/post-card/post-card.component.html
@@ -0,0 +1,27 @@
+<div class="post-card hoverable" routerLink="/posts/{{post.key}}">
+	<mdb-card>
+		<!-- Picture -->
+		<mdb-card-img [src]="post.image" alt="Article"></mdb-card-img>
+		<!-- Body -->
+		<mdb-card-body>
+			<!-- Title -->
+			<mdb-card-title>
+				<h4>{{post.title}}</h4>
+			</mdb-card-title>
+			<!-- Description -->
+			<mdb-card-text>
+				{{post.description}}
+			</mdb-card-text>
+		</mdb-card-body>
+		<!-- Footer -->
+		<div class="card-footer text-muted mt-4">
+			<img [src]="getAvatarUrl()"
+					class="author-img"
+					[alt]="post.author.name"
+					[mdbTooltip]="post.author.name"
+					placement="bottom"/>
+			Article écrit par {{post.author.name}}
+			<span class="creation-date-area">({{post.creationDate | date:'yyyy-MM-dd HH:mm:ss'}})</span>
+		</div>
+	</mdb-card>
+</div>
diff --git a/src/main/ts/src/app/core/post-card/post-card.component.ts b/src/main/ts/src/app/core/post-card/post-card.component.ts
index 350d99f..fdf0cab 100755
--- a/src/main/ts/src/app/core/post-card/post-card.component.ts
+++ b/src/main/ts/src/app/core/post-card/post-card.component.ts
@@ -3,35 +3,11 @@ import { Post } from '../entities';
 
 @Component({
 	selector: 'app-post-card',
-	template: `
-		<div class="card hoverable">
-			<div class="view hm-white-slight waves-light" mdbRippleRadius>
-				<img id="post-image" class="img-fluid" [src]="post.image" alt="Article" />
-				<a routerLink="/posts/{{post.key}}">
-					<div class="mask"></div>
-				</a>
-			</div>
-			<div class="card-body">
-				<h4 class="card-title">{{post.title}}</h4>
-				<p class="card-text">{{post.description}}</p>
-			</div>
-			<div class="card-data">
-				<img [src]="getAvatarUrl()"
-						class="author-img"
-						[alt]="post.author.name"
-						[mdbTooltip]="post.author.name"
-						placement="bottom"/>
-				Article écrit par {{post.author.name}}
-				<span class="creation-date-area">({{post.creationDate | date:'yyyy-MM-dd HH:mm:ss'}})</span>
-			</div>
-		</div>`,
+	templateUrl: './post-card.component.html',
 	styles: [`
-		div.card {
+		.post-card {
 			margin-bottom: 50px;
-		}
-		.card .card-data {
-			padding: 15px;
-			background-color: #f5f5f5;
+			cursor: pointer;
 		}
 		.creation-date-area {
 			color: #bdbdbd;