From 2303a803aa19c2857efac9f2af2223ccae5757e2 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 3 Sep 2018 15:01:52 +0200 Subject: [PATCH] fix likes bar, grid adjustment and menu width --- .../+video-watch/video-watch.component.html | 6 +++--- .../+video-watch/video-watch.component.scss | 16 +++++--------- client/src/sass/application.scss | 21 ++++++++++++++++--- client/src/sass/include/_bootstrap.scss | 20 ++++++++++++++++++ 4 files changed, 46 insertions(+), 17 deletions(-) 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 0f2f3cf11..937f25eb6 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -26,9 +26,9 @@ -
+
-
+
@@ -199,7 +199,7 @@
-
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 912016f8c..633b16c05 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -163,9 +163,9 @@ } .video-actions-rates { - display: flex; - flex-direction: column; - align-items: flex-end; + margin-top: 20px; + margin-bottom: 10px; + align-items: start; .video-actions { height: 40px; // Align with the title @@ -442,12 +442,6 @@ .video-info-first-row { flex-direction: column; margin-bottom: 20px; - - .video-actions-rates { - margin-top: 20px; - margin-bottom: 10px; - align-items: start; - } } .video-info-date-views { @@ -471,7 +465,7 @@ flex-direction: column; } - .other-videos { + /deep/ .other-videos { padding-left: 0 !important; } @@ -501,7 +495,7 @@ } } - .other-videos { + /deep/ .other-videos { /deep/ .video-miniature { flex-direction: column; } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 38b7ea8d4..8e663d32f 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -302,12 +302,23 @@ table { font-weight: $font-semibold; } +@media screen and (max-width: 1000px) { + .main-col { + &.expanded { + .margin-content { + margin-left: $expanded-horizontal-margins/2; + margin-right: $expanded-horizontal-margins/2; + } + } + } +} + @media screen and (max-width: 900px) { .main-col { - &, &.expanded { + &.expanded { .margin-content { - margin-left: 50px; - margin-right: 50px; + margin-left: $expanded-horizontal-margins/3; + margin-right: $expanded-horizontal-margins/3; } .sub-menu { @@ -327,6 +338,10 @@ table { z-index: 10000; } + menu { + width: $menu-width; + } + .main-col { margin-left: 0; diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index a8777af71..4abc887ad 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -4,6 +4,26 @@ $zindex-modal: 10005; $modal-footer-border-width: 0; $modal-md: 600px; +$grid-breakpoints: ( + // Extra small screen / phone + xs: 0, + // Small screen / phone + sm: 576px, + // Medium screen / tablet + md: 768px, + // Large screen / desktop + lg: 900px, + // Extra large screen / wide desktop + xl: 1200px +); + +$container-max-widths: ( + sm: 420px, + md: 720px, + lg: 900px, + xl: 1140px +); + $input-btn-focus-width: 0; $input-btn-focus-color: inherit; $input-focus-border-color: #ced4da; -- 2.41.0