Added a comment count indicator in posts

3 files changed, 27 insertions, 3 deletions

diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
index 1ae5d8f..73030b2 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -50,9 +50,23 @@ hr {
   word-break: break-all;
 }
 
-.timestamp {
+.bottom-post {
   font-size: .5em;
   color: gray;
+  display: flex;
+  align-items: center;
+}
+
+.separator {
+  margin: 0 .5em;
+}
+
+.comment-count {
+  font-size: 1em;
+}
+
+.comment-count > img {
+  height: .8em;
 }
 
 .message:hover, .timestamp:hover {
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index ea81bdf..c559c25 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -16,9 +16,19 @@
 		<div class="message" (click)="goToPostPage()">
 			{{ post.message }}
 		</div>
-		<div class="timestamp" (click)="goToPostPage()">
-			{{ timeCreated }}
+		<div class="bottom-post" (click)="goToPostPage()">
+			<div class="timestamp">
+				{{ timeCreated }}
+			</div>
+			<div class="separator">
+				║
+			</div>
+			<div class="comment-count">
+				{{ post.comments.length }}
+				<img src="assets/images/comment.png">
+			</div>
 		</div>
+
 	</div>
 	<div class="rating">
 		<button class="vote">
diff --git a/src/DevHive.Angular/src/assets/images/comment.png b/src/DevHive.Angular/src/assets/images/comment.png
new file mode 100644
index 0000000..5f8e8d9
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/comment.png