aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-18 15:00:42 +0200
committerChocobozzz <me@florianbigard.com>2018-04-18 15:00:42 +0200
commitc9ffd53217e69395c303ba36532a6eef39645e4e (patch)
tree5cd641bce21bd0e225efdf474ed78741e4b370b0
parent80109b2ddb14ec4a54cede7885611cb9244da3cb (diff)
downloadPeerTube-c9ffd53217e69395c303ba36532a6eef39645e4e.tar.gz
PeerTube-c9ffd53217e69395c303ba36532a6eef39645e4e.tar.zst
PeerTube-c9ffd53217e69395c303ba36532a6eef39645e4e.zip
Better responsive design on many comment children
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss27
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss10
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss3
3 files changed, 33 insertions, 7 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 3b0b7eafd..3a3f32b83 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
@@ -14,6 +14,8 @@
14 14
15 .comment { 15 .comment {
16 flex-grow: 1; 16 flex-grow: 1;
17 // Fix word-wrap with flex
18 min-width: 1px;
17 19
18 .highlighted-comment { 20 .highlighted-comment {
19 display: inline-block; 21 display: inline-block;
@@ -44,8 +46,8 @@
44 } 46 }
45 47
46 .comment-html { 48 .comment-html {
47 word-wrap: initial;
48 word-break: normal; 49 word-break: normal;
50 word-wrap: break-word;
49 text-align: justify; 51 text-align: justify;
50 52
51 /deep/ a { 53 /deep/ a {
@@ -76,3 +78,26 @@
76 } 78 }
77 } 79 }
78} 80}
81
82// Decrease the space of child comments on small screens
83@media screen and (max-width: 1600px) {
84 .children {
85 margin-left: -20px;
86 }
87}
88
89@media screen and (max-width: 1200px) {
90 .children {
91 margin-left: -30px;
92 }
93}
94
95@media screen and (max-width: 600px) {
96 .children {
97 margin-left: -40px;
98 }
99
100 .root-comment {
101 img { margin-right: 10px; }
102 }
103} \ No newline at end of file
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 7aadc2866..0b8aa1854 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
@@ -19,8 +19,8 @@
19 font-size: 13px; 19 font-size: 13px;
20} 20}
21 21
22.comment-html { 22@media screen and (max-width: 600px) {
23 word-wrap: normal; 23 .view-replies {
24 word-break: normal; 24 margin-left: 46px;
25 text-align: justify; 25 }
26} 26} \ No newline at end of file
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 8bc9f8d9a..fe3cc4ded 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -215,7 +215,8 @@
215 font-size: 15px; 215 font-size: 15px;
216 216
217 .video-info-description-html { 217 .video-info-description-html {
218 word-wrap: break-word; 218 word-break: normal;
219 word-wrap: normal;
219 text-align: justify; 220 text-align: justify;
220 } 221 }
221 222