diff options
author | Chocobozzz <me@florianbigard.com> | 2019-12-10 10:40:25 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-12-10 11:02:58 +0100 |
commit | fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f (patch) | |
tree | a86f75e71f8f67396ec5fd18a18ee05a74f9f638 /client/src/app/videos/+video-watch/comment/video-comment.component.scss | |
parent | cd3d847d63239802553b19f359c290a08fa0850c (diff) | |
download | PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.tar.gz PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.tar.zst PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.zip |
Improve comment tree UI
Diffstat (limited to 'client/src/app/videos/+video-watch/comment/video-comment.component.scss')
-rw-r--r-- | client/src/app/videos/+video-watch/comment/video-comment.component.scss | 59 |
1 files changed, 43 insertions, 16 deletions
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 @@ | |||
5 | font-size: 15px; | 5 | font-size: 15px; |
6 | display: flex; | 6 | display: flex; |
7 | 7 | ||
8 | .left { | ||
9 | display: flex; | ||
10 | flex-direction: column; | ||
11 | align-items: center; | ||
12 | margin-right: 10px; | ||
13 | |||
14 | .vertical-border { | ||
15 | width: 2px; | ||
16 | height: 100%; | ||
17 | background-color: rgba(0, 0, 0, 0.05); | ||
18 | margin: 10px 0; | ||
19 | } | ||
20 | } | ||
21 | |||
8 | .comment-avatar { | 22 | .comment-avatar { |
9 | @include avatar(36px); | 23 | @include avatar(36px); |
10 | 24 | ||
11 | margin-top: 5px; | 25 | margin-top: 5px; |
12 | margin-right: 20px; | ||
13 | } | 26 | } |
14 | 27 | ||
15 | .comment { | 28 | .comment { |
@@ -84,33 +97,47 @@ | |||
84 | } | 97 | } |
85 | } | 98 | } |
86 | } | 99 | } |
87 | } | ||
88 | 100 | ||
89 | // Decrease the space of child comments on small screens | ||
90 | @media screen and (max-width: 1600px) { | ||
91 | .children { | 101 | .children { |
92 | margin-left: -20px; | 102 | // Reduce avatars size for replies |
103 | .comment-avatar { | ||
104 | @include avatar(25px); | ||
105 | } | ||
106 | |||
107 | .left { | ||
108 | margin-right: 6px; | ||
109 | } | ||
93 | } | 110 | } |
94 | } | 111 | } |
95 | 112 | ||
96 | @media screen and (max-width: 1200px) { | 113 | @media screen and (max-width: 1200px) { |
97 | .children { | 114 | .children { |
98 | margin-left: -30px; | 115 | margin-left: -10px; |
99 | } | 116 | } |
100 | } | 117 | } |
101 | 118 | ||
102 | @media screen and (max-width: 600px) { | 119 | @media screen and (max-width: 600px) { |
103 | .children { | ||
104 | margin-left: -35px; | ||
105 | } | ||
106 | |||
107 | .root-comment { | 120 | .root-comment { |
108 | .comment-avatar { margin-right: 10px; } | 121 | .children { |
109 | } | 122 | margin-left: -20px; |
110 | } | ||
111 | 123 | ||
112 | @media screen and (max-width: 450px) { | 124 | .left { |
113 | .root-comment { | 125 | align-items: flex-start; |
114 | font-size: 14px; | 126 | |
127 | .vertical-border { | ||
128 | margin-left: 2px; | ||
129 | } | ||
130 | } | ||
131 | } | ||
132 | |||
133 | .comment { | ||
134 | .comment-account-date { | ||
135 | flex-direction: column; | ||
136 | |||
137 | .comment-date { | ||
138 | margin-left: 0; | ||
139 | } | ||
140 | } | ||
141 | } | ||
115 | } | 142 | } |
116 | } | 143 | } |