aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html5
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss22
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