diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/src/app/videos/+video-watch/comment/video-comment.component.html | 5 | ||||
-rw-r--r-- | client/src/app/videos/+video-watch/comment/video-comment.component.scss | 22 |
2 files changed, 23 insertions, 4 deletions
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html index df996533d..f53852385 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html | |||
@@ -19,7 +19,10 @@ | |||
19 | <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div> | 19 | <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div> |
20 | 20 | ||
21 | <div class="comment-account-date"> | 21 | <div class="comment-account-date"> |
22 | <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a> | 22 | <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" |
23 | class="comment-account" | ||
24 | [ngClass]="{ 'video-author': video.account.id === comment.account.id }" | ||
25 | >{{ comment.by }}</a> | ||
23 | <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" | 26 | <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" |
24 | class="comment-date">{{ comment.createdAt | myFromNow }}</a> | 27 | class="comment-date">{{ comment.createdAt | myFromNow }}</a> |
25 | </div> | 28 | </div> |
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 8d5348af4..0f95078c2 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss | |||
@@ -25,8 +25,6 @@ | |||
25 | 25 | ||
26 | .comment-avatar { | 26 | .comment-avatar { |
27 | @include avatar(36px); | 27 | @include avatar(36px); |
28 | |||
29 | margin-top: 5px; | ||
30 | } | 28 | } |
31 | 29 | ||
32 | .comment { | 30 | .comment { |
@@ -49,17 +47,35 @@ | |||
49 | display: flex; | 47 | display: flex; |
50 | margin-bottom: 4px; | 48 | margin-bottom: 4px; |
51 | 49 | ||
50 | .video-author { | ||
51 | height: 20px; | ||
52 | background-color: #888888; | ||
53 | border-radius: 12px; | ||
54 | margin-bottom: 2px; | ||
55 | max-width: 100%; | ||
56 | box-sizing: border-box; | ||
57 | flex-direction: row; | ||
58 | align-items: center; | ||
59 | display: inline-flex; | ||
60 | padding-right: 6px; | ||
61 | padding-left: 6px; | ||
62 | color: white !important; | ||
63 | } | ||
64 | |||
52 | .comment-account { | 65 | .comment-account { |
53 | @include disable-default-a-behaviour; | 66 | @include disable-default-a-behaviour; |
54 | 67 | ||
55 | word-break: break-all; | 68 | word-break: break-all; |
56 | color: var(--mainForegroundColor); | 69 | color: var(--mainForegroundColor); |
57 | font-weight: $font-bold; | 70 | font-weight: $font-bold; |
71 | font-size: 90%; | ||
58 | } | 72 | } |
59 | 73 | ||
60 | .comment-date { | 74 | .comment-date { |
75 | font-size: 90%; | ||
61 | color: $grey-foreground-color; | 76 | color: $grey-foreground-color; |
62 | margin-left: 10px; | 77 | margin-left: 5px; |
78 | text-decoration: none; | ||
63 | } | 79 | } |
64 | } | 80 | } |
65 | 81 | ||