aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-09-20 14:49:12 +0200
committerChocobozzz <me@florianbigard.com>2018-09-20 14:59:19 +0200
commit93ea9c47d989e28405cf1039f89be71e592e36a5 (patch)
tree76db0d70705d83b3a7feb109985ade3873449ffc
parent89724816ae79e0c4f9fba6f47267711f505ec7af (diff)
downloadPeerTube-93ea9c47d989e28405cf1039f89be71e592e36a5.tar.gz
PeerTube-93ea9c47d989e28405cf1039f89be71e592e36a5.tar.zst
PeerTube-93ea9c47d989e28405cf1039f89be71e592e36a5.zip
Improve responsive on small screens
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss7
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss8
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss27
-rw-r--r--client/src/sass/include/_mixins.scss1
5 files changed, 45 insertions, 4 deletions
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 a55e743fb..bb809296a 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
@@ -39,3 +39,9 @@ form {
39 @include orange-button 39 @include orange-button
40 } 40 }
41} 41}
42
43@media screen and (max-width: 450px) {
44 textarea, .submit-comment button {
45 font-size: 14px !important;
46 }
47} \ No newline at end of file
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 f331fab80..84da5727e 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
@@ -35,6 +35,7 @@
35 .comment-account { 35 .comment-account {
36 @include disable-default-a-behaviour; 36 @include disable-default-a-behaviour;
37 37
38 word-break: break-all;
38 color: var(--mainForegroundColor); 39 color: var(--mainForegroundColor);
39 font-weight: $font-bold; 40 font-weight: $font-bold;
40 } 41 }
@@ -102,3 +103,9 @@
102 img { margin-right: 10px; } 103 img { margin-right: 10px; }
103 } 104 }
104} 105}
106
107@media screen and (max-width: 450px) {
108 .root-comment {
109 font-size: 14px;
110 }
111} \ 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 d5af929d7..04518e079 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
@@ -31,4 +31,10 @@ my-help {
31 .view-replies { 31 .view-replies {
32 margin-left: 46px; 32 margin-left: 46px;
33 } 33 }
34} \ No newline at end of file 34}
35
36@media screen and (max-width: 450px) {
37 .view-replies {
38 font-size: 14px;
39 }
40}
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 15adf0f61..eb63cbde7 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -473,6 +473,7 @@ my-video-comments {
473 margin: 20px 0 0 0; 473 margin: 20px 0 0 0;
474 474
475 .video-info { 475 .video-info {
476 padding: 0;
476 477
477 .video-info-first-row { 478 .video-info-first-row {
478 479
@@ -485,6 +486,8 @@ my-video-comments {
485 } 486 }
486 487
487 /deep/ .other-videos { 488 /deep/ .other-videos {
489 padding-left: 0 !important;
490
488 /deep/ .video-miniature { 491 /deep/ .video-miniature {
489 flex-direction: column; 492 flex-direction: column;
490 } 493 }
@@ -500,7 +503,27 @@ my-video-comments {
500} 503}
501 504
502@media screen and (max-width: 450px) { 505@media screen and (max-width: 450px) {
503 .video-bottom .action-button .icon-text { 506 .video-bottom {
504 display: none !important; 507 .action-button .icon-text {
508 display: none !important;
509 }
510
511 .video-info .video-info-first-row {
512 .video-info-name {
513 font-size: 18px;
514 }
515
516 .video-info-date-views {
517 font-size: 14px;
518 }
519
520 .video-actions-rates {
521 margin-top: 10px;
522 }
523 }
524
525 .video-info-description {
526 font-size: 14px !important;
527 }
505 } 528 }
506} 529}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d755e7df3..544f39957 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -53,7 +53,6 @@
53 -ms-hyphens: auto; 53 -ms-hyphens: auto;
54 -moz-hyphens: auto; 54 -moz-hyphens: auto;
55 hyphens: auto; 55 hyphens: auto;
56 text-align: justify;
57} 56}
58 57
59@mixin peertube-input-text($width) { 58@mixin peertube-input-text($width) {