From 5dfb7c1dec8222b0bbccac5b56ad46da1438747e Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Wed, 18 Dec 2019 13:27:51 +0100
Subject: Add commentor name alongside fid for video comments

---
 .../videos/+video-watch/comment/video-comment.component.html | 10 +++++-----
 .../videos/+video-watch/comment/video-comment.component.scss | 12 ++++++++++--
 .../src/app/videos/+video-watch/video-watch.component.scss   |  4 ++++
 3 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'client/src/app/videos/+video-watch')

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 @@
         <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
 
         <div class="comment-account-date">
-          <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer"
-             class="comment-account"
-             [ngClass]="{ 'video-author': video.account.id === comment.account.id }"
-          >{{ comment.by }}</a>
+          <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">
+            <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }">{{ comment.account.displayName }}</span>
+            <span class="comment-account-fid ml-1">{{ comment.by }}</span>
+          </a>
           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
-             class="comment-date">{{ comment.createdAt | myFromNow }}</a>
+             class="comment-date" [title]="comment.createdAt">{{ comment.createdAt | myFromNow }}</a>
         </div>
         <div
           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 @@
 
         word-break: break-all;
         color: var(--mainForegroundColor);
-        font-weight: $font-bold;
+        font-weight: 600;
         font-size: 90%;
+
+        .comment-account-fid {
+          opacity: .6;
+        }
       }
 
       .comment-date {
@@ -81,7 +85,6 @@
 
     .comment-html {
       @include peertube-word-wrap;
-      margin-bottom: 10px;
 
       // Mentions
       ::ng-deep a {
@@ -96,6 +99,11 @@
 
       }
 
+      // Paragraphs
+      ::ng-deep p {
+        margin-bottom: .3rem;
+      }
+
       &.comment-html-deleted {
         color: $grey-foreground-color;
       }
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;
       @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
         margin-left: 1rem;
       }
+      @media screen and (max-width: 500px) {
+        margin-left: 0;
+        margin-top: .5rem;
+      }
     }
   }
 }
-- 
cgit v1.2.3