From 301e3932b64172b3f9cf055287fdfdb4a89620af Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Wed, 24 Feb 2021 18:56:32 +0200
Subject: Improved semantics and simplified some HTML of comments and posts

---
 src/app/components/comment/comment.component.css  |  5 +---
 src/app/components/comment/comment.component.html | 36 +++++++++++------------
 2 files changed, 18 insertions(+), 23 deletions(-)

(limited to 'src/app/components/comment')

diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css
index d82f10e..419cbf8 100644
--- a/src/app/components/comment/comment.component.css
+++ b/src/app/components/comment/comment.component.css
@@ -1,5 +1,6 @@
 .comment {
   display: flex;
+  flex-direction: column;
   width: 100%;
 
   margin: .5em auto;
@@ -40,10 +41,6 @@
 
 /* Content */
 
-.content {
-  flex: 1;
-}
-
 .message {
   margin: .3em 0;
   word-break: break-all;
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index 718e25c..e46bdb7 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -1,23 +1,21 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<div class="comment rounded-border" *ngIf="loaded">
-	<div class="content">
-		<div class="author" (click)="goToAuthorProfile()">
-			<img class="round-image" [src]="user.profilePictureURL">
-			<div class="author-info">
-				<div class="name">
-					{{ user.firstName }} {{ user.lastName }}
-				</div>
-				<div class="handle">
-					@{{ user.userName }}
-				</div>
+<section class="comment rounded-border" *ngIf="loaded">
+	<summary class="author" (click)="goToAuthorProfile()">
+		<img class="round-image" [src]="user.profilePictureURL">
+		<div class="author-info">
+			<div class="name">
+				{{ user.firstName }} {{ user.lastName }}
+			</div>
+			<div class="handle">
+				@{{ user.userName }}
 			</div>
 		</div>
-		<div class="message" (click)="goToCommentPage()">
-			{{ comment.message }}
-		</div>
-		<div class="timestamp" (click)="goToCommentPage()">
-			{{ timeCreated }}
-		</div>
-	</div>
-</div>
+	</summary>
+	<article class="message" (click)="goToCommentPage()">
+		{{ comment.message }}
+	</article>
+	<time class="timestamp" (click)="goToCommentPage()">
+		{{ timeCreated }}
+	</time>
+</section>
-- 
cgit v1.2.3