fix likes bar, grid adjustment and menu width

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 @@
   </div>
 
   <!-- Video information -->
-  <div *ngIf="video" class="container-fluid video-bottom">
+  <div *ngIf="video" class="margin-content video-bottom">
     <div class="row fullWidth">
-      <div class="col-12 col-md-9 video-info">
+      <div class="col-12 col-lg-9 video-info">
         <div class="video-info-first-row">
           <div>
             <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
@@ -199,7 +199,7 @@
 
       <my-video-comments [video]="video" [user]="user"></my-video-comments>
     </div>
-    <my-recommended-videos class="ml-3 ml-sm-0 col-12 col-md-3"
+    <my-recommended-videos class="col-12 col-lg-3"
                            [inputVideo]="video" [user]="user"></my-recommended-videos>
     </div>
   </div>
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;