diff options
| author | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-02-24 18:56:32 +0200 |
|---|---|---|
| committer | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-02-24 18:56:32 +0200 |
| commit | 301e3932b64172b3f9cf055287fdfdb4a89620af (patch) | |
| tree | ff504329477476665be6d44a43c3171ba71d38ee /src/app/components/comment | |
| parent | 2b5b2f2449317b8aebd2d8962a930bf454d100fb (diff) | |
| download | DevHive-Angular-301e3932b64172b3f9cf055287fdfdb4a89620af.tar DevHive-Angular-301e3932b64172b3f9cf055287fdfdb4a89620af.tar.gz DevHive-Angular-301e3932b64172b3f9cf055287fdfdb4a89620af.zip | |
Improved semantics and simplified some HTML of comments and posts
Diffstat (limited to 'src/app/components/comment')
| -rw-r--r-- | src/app/components/comment/comment.component.css | 5 | ||||
| -rw-r--r-- | src/app/components/comment/comment.component.html | 36 |
2 files changed, 18 insertions, 23 deletions
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> |