diff options
| author | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-03-21 18:12:45 +0200 |
|---|---|---|
| committer | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-03-21 18:12:45 +0200 |
| commit | 9a5b8b3d2d036dc9883ce434cb66d7453afa01ab (patch) | |
| tree | 47ba34ee2d9f99c8bb283c9fcb242076d4c11234 /src/app/components/comment/comment.component.html | |
| parent | bed88a28aa555e5ed3e8c08422935eb11b882fcf (diff) | |
| download | DevHive-Angular-9a5b8b3d2d036dc9883ce434cb66d7453afa01ab.tar DevHive-Angular-9a5b8b3d2d036dc9883ce434cb66d7453afa01ab.tar.gz DevHive-Angular-9a5b8b3d2d036dc9883ce434cb66d7453afa01ab.zip | |
Major redesign of comment component styling
Diffstat (limited to 'src/app/components/comment/comment.component.html')
| -rw-r--r-- | src/app/components/comment/comment.component.html | 45 |
1 files changed, 29 insertions, 16 deletions
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index e46bdb7..03ba649 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,21 +1,34 @@ <app-loading *ngIf="!loaded"></app-loading> -<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"> +<section class="card flex-row" *ngIf="loaded"> + <aside class="left-pane"> + <img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()"> + </aside> + <main class="content flexible"> + <summary class="font-size-dot8 text-vertical-middle hover-half-opacity" (click)="goToAuthorProfile()"> + <span> {{ user.firstName }} {{ user.lastName }} - </div> - <div class="handle"> + </span> + <span class="fg-color-faded"> @{{ user.userName }} - </div> - </div> - </summary> - <article class="message" (click)="goToCommentPage()"> - {{ comment.message }} - </article> - <time class="timestamp" (click)="goToCommentPage()"> - {{ timeCreated }} - </time> + </span> + </summary> + <article class="message margin-top-bot-small"> + {{ comment.message }} + </article> + <section class="comment-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only"> + <time class="flex-row flex-center-align-items"> + <img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg"> + <span> + {{ timeCreated }} + </span> + </time> + </section> + <section class="flex-row justify-children-center flex-center-align-children"> + <button class="flexible padding-small lighter-hover click-effect border-radius-smaller"> + <img src="/assets/icons/tabler-icon-link.svg"> + Share + </button> + </section> + </main> </section> |