diff options
| author | Chocobozzz <me@florianbigard.com> | 2018-04-18 15:00:42 +0200 |
|---|---|---|
| committer | Chocobozzz <me@florianbigard.com> | 2018-04-18 15:00:42 +0200 |
| commit | c9ffd53217e69395c303ba36532a6eef39645e4e (patch) | |
| tree | 5cd641bce21bd0e225efdf474ed78741e4b370b0 | |
| parent | 80109b2ddb14ec4a54cede7885611cb9244da3cb (diff) | |
| download | PeerTube-c9ffd53217e69395c303ba36532a6eef39645e4e.tar.gz PeerTube-c9ffd53217e69395c303ba36532a6eef39645e4e.tar.zst PeerTube-c9ffd53217e69395c303ba36532a6eef39645e4e.zip | |
Better responsive design on many comment children
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 | ||