aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-18 13:27:51 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-18 13:28:29 +0100
commit5dfb7c1dec8222b0bbccac5b56ad46da1438747e (patch)
tree9a344b2074dd106ba314db6a1d012eedfd4cc949 /client/src/app/videos
parent9f0327aeb39c307ce7da28dda57cc526c928ca62 (diff)
downloadPeerTube-5dfb7c1dec8222b0bbccac5b56ad46da1438747e.tar.gz
PeerTube-5dfb7c1dec8222b0bbccac5b56ad46da1438747e.tar.zst
PeerTube-5dfb7c1dec8222b0bbccac5b56ad46da1438747e.zip
Add commentor name alongside fid for video comments
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html10
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss12
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss4
3 files changed, 19 insertions, 7 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 f53852385..e26100346 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,12 +19,12 @@
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" 22 <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">
23 class="comment-account" 23 <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }">{{ comment.account.displayName }}</span>
24 [ngClass]="{ 'video-author': video.account.id === comment.account.id }" 24 <span class="comment-account-fid ml-1">{{ comment.by }}</span>
25 >{{ comment.by }}</a> 25 </a>
26 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" 26 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
27 class="comment-date">{{ comment.createdAt | myFromNow }}</a> 27 class="comment-date" [title]="comment.createdAt">{{ comment.createdAt | myFromNow }}</a>
28 </div> 28 </div>
29 <div 29 <div
30 class="comment-html" 30 class="comment-html"
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 0f95078c2..d8fd5c5de 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
@@ -67,8 +67,12 @@
67 67
68 word-break: break-all; 68 word-break: break-all;
69 color: var(--mainForegroundColor); 69 color: var(--mainForegroundColor);
70 font-weight: $font-bold; 70 font-weight: 600;
71 font-size: 90%; 71 font-size: 90%;
72
73 .comment-account-fid {
74 opacity: .6;
75 }
72 } 76 }
73 77
74 .comment-date { 78 .comment-date {
@@ -81,7 +85,6 @@
81 85
82 .comment-html { 86 .comment-html {
83 @include peertube-word-wrap; 87 @include peertube-word-wrap;
84 margin-bottom: 10px;
85 88
86 // Mentions 89 // Mentions
87 ::ng-deep a { 90 ::ng-deep a {
@@ -96,6 +99,11 @@
96 99
97 } 100 }
98 101
102 // Paragraphs
103 ::ng-deep p {
104 margin-bottom: .3rem;
105 }
106
99 &.comment-html-deleted { 107 &.comment-html-deleted {
100 color: $grey-foreground-color; 108 color: $grey-foreground-color;
101 } 109 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index fe6a891d5..1b5d355f8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -412,6 +412,10 @@ $video-info-margin-left: 44px;
412 @media screen and (max-width: 1800px - (3* $video-miniature-width)) { 412 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
413 margin-left: 1rem; 413 margin-left: 1rem;
414 } 414 }
415 @media screen and (max-width: 500px) {
416 margin-left: 0;
417 margin-top: .5rem;
418 }
415 } 419 }
416 } 420 }
417} 421}