From fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 10 Dec 2019 10:40:25 +0100 Subject: Improve comment tree UI --- .../comment/video-comment-add.component.scss | 12 ++- .../comment/video-comment.component.html | 111 +++++++++++---------- .../comment/video-comment.component.scss | 59 ++++++++--- .../comment/video-comments.component.scss | 2 +- 4 files changed, 110 insertions(+), 74 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss index e998cba5e..5087f71b6 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss @@ -10,10 +10,10 @@ form { margin-bottom: 10px; img { - @include avatar(36px); + @include avatar(25px); vertical-align: top; - margin-right: 20px; + margin-right: 10px; } .form-group { @@ -40,10 +40,14 @@ form { } } -@media screen and (max-width: 450px) { +@media screen and (max-width: 600px) { textarea, .submit-comment button { font-size: 14px !important; } + + textarea { + padding: 5px !important; + } } .modal-body { @@ -56,4 +60,4 @@ form { float: left; margin-bottom: 20px; } -} \ No newline at end of file +} 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 6ec35d63b..207be3c7c 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 @@ -1,65 +1,70 @@
- Avatar +
+ Avatar - +
+
-
- -
Highlighted comment
+
+ - -
+
+ +
Highlighted comment
-
-
Reply
-
Delete
-
-
+ +
- - +
+
Reply
+
Delete
+
+
-
- This comment has been deleted -
- + + + +
+ This comment has been deleted +
+
- + -
-
- +
+
+ +
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 ac633fd64..4cc2fddee 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 @@ -5,11 +5,24 @@ font-size: 15px; display: flex; + .left { + display: flex; + flex-direction: column; + align-items: center; + margin-right: 10px; + + .vertical-border { + width: 2px; + height: 100%; + background-color: rgba(0, 0, 0, 0.05); + margin: 10px 0; + } + } + .comment-avatar { @include avatar(36px); margin-top: 5px; - margin-right: 20px; } .comment { @@ -84,33 +97,47 @@ } } } -} -// Decrease the space of child comments on small screens -@media screen and (max-width: 1600px) { .children { - margin-left: -20px; + // Reduce avatars size for replies + .comment-avatar { + @include avatar(25px); + } + + .left { + margin-right: 6px; + } } } @media screen and (max-width: 1200px) { .children { - margin-left: -30px; + margin-left: -10px; } } @media screen and (max-width: 600px) { - .children { - margin-left: -35px; - } - .root-comment { - .comment-avatar { margin-right: 10px; } - } -} + .children { + margin-left: -20px; -@media screen and (max-width: 450px) { - .root-comment { - font-size: 14px; + .left { + align-items: flex-start; + + .vertical-border { + margin-left: 2px; + } + } + } + + .comment { + .comment-account-date { + flex-direction: column; + + .comment-date { + margin-left: 0; + } + } + } } } diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss index 575e331e4..dde10b068 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss @@ -9,7 +9,7 @@ font-weight: $font-semibold; font-size: 15px; cursor: pointer; - margin-left: 56px; + margin-left: 46px; margin-bottom: 10px; } -- cgit v1.2.3