From: Chocobozzz Date: Wed, 5 Sep 2018 09:20:44 +0000 (+0200) Subject: Fix watch page responsive X-Git-Tag: v1.0.0-beta.12~25 X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=8ff3f88347cb733ca8a3978ba6eb9763fb3ea294;p=oweals%2Fpeertube.git Fix watch page responsive --- diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index c725580d1..a699da12f 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -6,6 +6,7 @@ height: calc(100vh - #{$header-height}); padding: 0; width: $menu-width; + z-index: 10000; } menu { @@ -16,7 +17,6 @@ menu { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - z-index: 1000; color: $menu-color; display: flex; flex-direction: column; @@ -230,7 +230,6 @@ menu { @media screen and (max-width: 400px) { .menu-wrapper { width: 100% !important; - z-index: 10000; } .top-menu { diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts index 2e01839b2..1cbc96b14 100644 --- a/client/src/app/shared/misc/screen.service.ts +++ b/client/src/app/shared/misc/screen.service.ts @@ -11,7 +11,7 @@ export class ScreenService { } isInSmallView () { - return this.getWindowInnerWidth() < 600 + return this.getWindowInnerWidth() < 800 } isInMobileView () { diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 582cf6e37..cafd92dbd 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -110,8 +110,9 @@
+ >
@@ -200,13 +201,10 @@ -
- - + - +
Friendly Reminder: 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 @@ } .video-info-date-views { - font-size: 16px; - margin-bottom: 10px; flex-grow: 1; + margin-bottom: 10px; + margin-right: 10px; + font-size: 16px; } .video-info-channel { @@ -164,8 +165,7 @@ } .video-actions-rates { - margin-top: 20px; - margin-bottom: 10px; + margin: 20px 0 10px 0; align-items: start; .video-actions { @@ -361,12 +361,13 @@ /deep/ .other-videos { padding-left: 1em; + width: 260px; .title-page { margin-top: 0 !important; } - /deep/ .video-miniature { + .video-miniature { display: flex; height: 100%; margin-bottom: 20px; @@ -388,9 +389,16 @@ width: calc(100% - #{$menu-width}); } +@media screen and (max-width: $small-view) { + .privacy-concerns { + margin-left: $menu-width; + } +} + :host-context(.expanded) { .privacy-concerns { width: 100%; + margin-left: 0; } } @@ -438,34 +446,12 @@ @media screen and (max-width: 1600px) { - .video-bottom { - .video-info { - .video-info-first-row { - flex-direction: column; - margin-bottom: 20px; - } - - .video-info-date-views { - flex-direction: column; - margin-bottom: 30px; - - .video-info-likes-dislikes-bar { - margin-top: 0; - } - } - - .video-attributes .video-attribute { - margin-bottom: 5px; - } - } + .video-bottom .video-info .video-attributes .video-attribute { + margin-bottom: 5px; } } @media screen and (max-width: 1300px) { - .video-bottom { - flex-direction: column; - } - /deep/ .other-videos { padding-left: 0 !important; } @@ -480,10 +466,6 @@ } } -@media (max-width: 1150px) { - .w-100-until-1150px { width: 100% !important } -} - @media screen and (max-width: 600px) { .video-bottom { margin: 20px 0 0 0; diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 95198f0aa..768a08d42 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -317,10 +317,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video.state.id === VideoState.TO_IMPORT } - isMenuExpanded () { - return document.getElementById('right-container').classList.contains('expanded') - } - hasVideoScheduledPublication () { return this.video && this.video.scheduledUpdate !== undefined } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index c380fe5bf..fd0d5e458 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -307,7 +307,7 @@ table { font-weight: $font-semibold; } -@media screen and (max-width: 1000px) { +@media screen and (max-width: 1200px) { .main-col { &.expanded { .margin-content { @@ -337,7 +337,7 @@ table { } } -@media screen and (max-width: 600px) { +@media screen and (max-width: $small-view) { .main-col { margin-left: 0; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 792a3f9c2..fb253fc1f 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -1,3 +1,6 @@ +$small-view: 800px; +$mobile-view: 500px; + $main-fonts: 'Source Sans Pro', sans-serif; $font-regular: 400; $font-semibold: 600;