diff options
author | Chocobozzz <me@florianbigard.com> | 2018-09-05 11:20:44 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-09-05 11:20:44 +0200 |
commit | 8ff3f88347cb733ca8a3978ba6eb9763fb3ea294 (patch) | |
tree | a8711905f240a8e511659b45d537e780f684e7f1 /client/src/app/videos/+video-watch/video-watch.component.scss | |
parent | 46ae6f67249dea59176488ad1775f80109b8b8db (diff) | |
download | PeerTube-8ff3f88347cb733ca8a3978ba6eb9763fb3ea294.tar.gz PeerTube-8ff3f88347cb733ca8a3978ba6eb9763fb3ea294.tar.zst PeerTube-8ff3f88347cb733ca8a3978ba6eb9763fb3ea294.zip |
Fix watch page responsive
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 48 |
1 files changed, 15 insertions, 33 deletions
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 edd5ae6ba..58c45cde9 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -99,9 +99,10 @@ | |||
99 | } | 99 | } |
100 | 100 | ||
101 | .video-info-date-views { | 101 | .video-info-date-views { |
102 | font-size: 16px; | ||
103 | margin-bottom: 10px; | ||
104 | flex-grow: 1; | 102 | flex-grow: 1; |
103 | margin-bottom: 10px; | ||
104 | margin-right: 10px; | ||
105 | font-size: 16px; | ||
105 | } | 106 | } |
106 | 107 | ||
107 | .video-info-channel { | 108 | .video-info-channel { |
@@ -164,8 +165,7 @@ | |||
164 | } | 165 | } |
165 | 166 | ||
166 | .video-actions-rates { | 167 | .video-actions-rates { |
167 | margin-top: 20px; | 168 | margin: 20px 0 10px 0; |
168 | margin-bottom: 10px; | ||
169 | align-items: start; | 169 | align-items: start; |
170 | 170 | ||
171 | .video-actions { | 171 | .video-actions { |
@@ -361,12 +361,13 @@ | |||
361 | 361 | ||
362 | /deep/ .other-videos { | 362 | /deep/ .other-videos { |
363 | padding-left: 1em; | 363 | padding-left: 1em; |
364 | width: 260px; | ||
364 | 365 | ||
365 | .title-page { | 366 | .title-page { |
366 | margin-top: 0 !important; | 367 | margin-top: 0 !important; |
367 | } | 368 | } |
368 | 369 | ||
369 | /deep/ .video-miniature { | 370 | .video-miniature { |
370 | display: flex; | 371 | display: flex; |
371 | height: 100%; | 372 | height: 100%; |
372 | margin-bottom: 20px; | 373 | margin-bottom: 20px; |
@@ -388,9 +389,16 @@ | |||
388 | width: calc(100% - #{$menu-width}); | 389 | width: calc(100% - #{$menu-width}); |
389 | } | 390 | } |
390 | 391 | ||
392 | @media screen and (max-width: $small-view) { | ||
393 | .privacy-concerns { | ||
394 | margin-left: $menu-width; | ||
395 | } | ||
396 | } | ||
397 | |||
391 | :host-context(.expanded) { | 398 | :host-context(.expanded) { |
392 | .privacy-concerns { | 399 | .privacy-concerns { |
393 | width: 100%; | 400 | width: 100%; |
401 | margin-left: 0; | ||
394 | } | 402 | } |
395 | } | 403 | } |
396 | 404 | ||
@@ -438,34 +446,12 @@ | |||
438 | 446 | ||
439 | 447 | ||
440 | @media screen and (max-width: 1600px) { | 448 | @media screen and (max-width: 1600px) { |
441 | .video-bottom { | 449 | .video-bottom .video-info .video-attributes .video-attribute { |
442 | .video-info { | 450 | margin-bottom: 5px; |
443 | .video-info-first-row { | ||
444 | flex-direction: column; | ||
445 | margin-bottom: 20px; | ||
446 | } | ||
447 | |||
448 | .video-info-date-views { | ||
449 | flex-direction: column; | ||
450 | margin-bottom: 30px; | ||
451 | |||
452 | .video-info-likes-dislikes-bar { | ||
453 | margin-top: 0; | ||
454 | } | ||
455 | } | ||
456 | |||
457 | .video-attributes .video-attribute { | ||
458 | margin-bottom: 5px; | ||
459 | } | ||
460 | } | ||
461 | } | 451 | } |
462 | } | 452 | } |
463 | 453 | ||
464 | @media screen and (max-width: 1300px) { | 454 | @media screen and (max-width: 1300px) { |
465 | .video-bottom { | ||
466 | flex-direction: column; | ||
467 | } | ||
468 | |||
469 | /deep/ .other-videos { | 455 | /deep/ .other-videos { |
470 | padding-left: 0 !important; | 456 | padding-left: 0 !important; |
471 | } | 457 | } |
@@ -480,10 +466,6 @@ | |||
480 | } | 466 | } |
481 | } | 467 | } |
482 | 468 | ||
483 | @media (max-width: 1150px) { | ||
484 | .w-100-until-1150px { width: 100% !important } | ||
485 | } | ||
486 | |||
487 | @media screen and (max-width: 600px) { | 469 | @media screen and (max-width: 600px) { |
488 | .video-bottom { | 470 | .video-bottom { |
489 | margin: 20px 0 0 0; | 471 | margin: 20px 0 0 0; |