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

---
 .../comment-page/comment-page.component.html       | 12 ++++---
 src/app/components/comment/comment.component.css   |  5 +--
 src/app/components/comment/comment.component.html  | 36 +++++++++----------
 src/app/components/feed/feed.component.html        |  4 +--
 .../post-attachment/post-attachment.component.css  | 11 +++---
 .../post-attachment/post-attachment.component.html | 18 +++++-----
 .../components/post-page/post-page.component.html  | 28 +++++++--------
 src/app/components/post/post.component.html        | 41 +++++++++++-----------
 8 files changed, 73 insertions(+), 82 deletions(-)

diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
index 2d110d6..ae114da 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -1,14 +1,16 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<div id="content" *ngIf="loaded">
-	<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
+<main id="content" *ngIf="loaded">
+	<nav>
+		<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
+	</nav>
 	<app-comment [paramId]="commentId.toString()"></app-comment>
-	<div class="many-buttons" *ngIf="editable">
+	<nav class="many-buttons" *ngIf="editable">
 		<button class="submit-btn" (click)="editComment()">Edit comment</button>
 		<button class="submit-btn delete-btn" (click)="deleteComment()">Delete comment</button>
-	</div>
+	</nav>
 	<form  [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()">
 		<input type="text" *ngIf="editingComment" placeholder="New comment message" class="input-field" formControlName="newCommentMessage">
 		<input type="submit" style="display: none" />
 	</form>
-<div>
+</main>
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>
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 2fece23..74657dc 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -40,9 +40,9 @@
 				None of your friends have posted anything yet!<br>
 				Try refreshing your page!
 			</mark>
-			<article *ngFor="let friendPost of posts" class="post">
+			<div *ngFor="let friendPost of posts" class="post">
 				<app-post [paramId]="friendPost.postId.toString()"></app-post>
-			</article>
+			</div>
 		</section>
 	</section>
 </main>
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index 572cc99..58e8a82 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,6 +1,9 @@
 /* Attachment */
 
 .attachment {
+  width: 100%;
+  height: 100%;
+  display: flex;
   border: 2px solid black;
   border-top: 0;
   border-radius: 0 0 .6em .6em;
@@ -9,13 +12,7 @@
   margin-top: calc(-0.8em - 2px);
 }
 
-.clickable {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.clickable:hover {
+.attachment:hover {
   cursor: pointer;
 }
 
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 4d381d1..401068c 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,13 +1,11 @@
-<div class="attachment">
-	<div class="clickable" (click)="toggleShowFull()">
-		<div class="attachment-name">
-			{{ fileName }}
-		</div>
-		<div class="attachment-type">
-			{{ fileType }}
-		</div>
-	</div>
-</div>
+<figure class="attachment" (click)="toggleShowFull()">
+	<summary class="attachment-name">
+		{{ fileName }}
+	</summary>
+	<summary class="attachment-type">
+		{{ fileType }}
+	</summary>
+</figure>
 
 <div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()">
 	<img class="attachment-img" *ngIf="isImage" src="{{paramURL}}">
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index 8665865..b8e7e22 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -1,11 +1,13 @@
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" *ngIf="dataArrived">
-	<div class="many-buttons"  *ngIf="loggedIn">
-		<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
-		<button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button>
-	</div>
-	<button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button>
+<main id="content" *ngIf="dataArrived">
+	<nav>
+		<div class="many-buttons"  *ngIf="loggedIn">
+			<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
+			<button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button>
+		</div>
+		<button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button>
+	</nav>
 	<app-post [paramId]="postId.toString()"></app-post>
 	<div class="many-buttons" *ngIf="editable">
 		<button class="submit-btn" (click)="editPost()">Edit post</button>
@@ -17,21 +19,19 @@
 		<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 		<input type="submit" style="display: none" />
 	</form>
-	<div class="form-attachments" *ngIf="editingPost">
+	<figure class="form-attachments" *ngIf="editingPost">
 		<div *ngFor="let file of files" class="form-attachment">
 			{{ file.name ? file.name : 'Attachment' }}
 			<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
 				☒
 			</div>
 		</div>
-	</div>
+	</figure>
 	<form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
 		<input type="text" placeholder="Add comment" class="input-field" formControlName="newComment">
 		<input type="submit" style="display: none" />
 	</form>
-	<div>
-		<div class="comment" *ngFor="let comm of post?.comments">
-			<app-comment [paramId]="comm.id.toString()"></app-comment>
-		</div>
-	</div>
-<div>
+	<section class="comment" *ngFor="let comm of post?.comments">
+		<app-comment [paramId]="comm.id.toString()"></app-comment>
+	</section>
+</main>
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index bc0d84a..4ba4d43 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -1,8 +1,8 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<div class="post rounded-border" *ngIf="loaded">
-	<div class="content">
-		<div class="author" (click)="goToAuthorProfile()">
+<section class="post rounded-border" *ngIf="loaded">
+	<section class="content">
+		<summary class="author" (click)="goToAuthorProfile()">
 			<img class="round-image" [src]="user.profilePictureURL">
 			<div class="author-info">
 				<div class="name">
@@ -12,38 +12,37 @@
 					@{{ user.userName }}
 				</div>
 			</div>
-		</div>
-		<div class="message" (click)="goToPostPage()">
+		</summary>
+		<article class="message" (click)="goToPostPage()">
 			{{ post.message }}
-		</div>
+		</article>
 		<div class="bottom-post" (click)="goToPostPage()">
-			<div class="timestamp">
+			<time class="timestamp">
 				{{ timeCreated }}
-			</div>
+			</time>
 			<div class="separator">
 				║
 			</div>
-			<div class="comment-count">
+			<summary class="comment-count">
 				{{ post.comments.length }}
 				<img src="assets/images/comment.png">
-			</div>
+			</summary>
 		</div>
-
-	</div>
-	<div class="rating">
+	</section>
+	<section class="rating">
 		<button class="vote">
 			ᐃ
 		</button>
-		<div class="score">
+		<summary class="score">
 			{{ votesNumber }}
-		</div>
+		</summary>
 		<button class="vote">
 			ᐁ
 		</button>
-	</div>
-</div>
-<div class="attachments">
-	<div *ngFor="let fileURL of post.fileURLs">
+	</section>
+</section>
+<aside class="attachments">
+	<figure *ngFor="let fileURL of post.fileURLs">
 		<app-post-attachment class="no-events" [paramURL]="fileURL"></app-post-attachment>
-	</div>
-</div>
+	</figure>
+</aside>
-- 
cgit v1.2.3