fixing grid readjustment with expand and screens < 1150px

5 files changed, 27 insertions, 8 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 697abec8e..3eb8ef40a 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -22,7 +22,7 @@
   <div class="sub-header-container">
     <my-menu *ngIf="isMenuDisplayed"></my-menu>
 
-    <div class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
+    <div id="right-container" class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
 
       <div class="main-row">
         <router-outlet></router-outlet>
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 3b6b5d8ed..582cf6e37 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -28,7 +28,7 @@
   <!-- Video information -->
   <div *ngIf="video" class="margin-content video-bottom">
     <div class="row fullWidth">
-      <div class="col-12 col-lg-9 video-info">
+      <div class="col-12 col-lg-auto 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 -->
@@ -197,12 +197,16 @@
           </div>
         </div>
 
-      <my-video-comments [video]="video" [user]="user"></my-video-comments>
+        <my-video-comments [video]="video" [user]="user"></my-video-comments>
+      </div>
+
+      <div *ngIf="!isMenuExpanded()" class="w-100-until-1150px"></div>
+      
+      <my-recommended-videos class="col-12 col-lg-3"
+        [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
     </div>
-    <my-recommended-videos class="col-12 col-lg-3"
-      [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
   </div>
-
+  
   <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
     <div class="privacy-concerns-text">
       <strong i18n>Friendly Reminder: </strong>
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 633b16c05..be1388a83 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -37,8 +37,9 @@
   }
 
   /deep/ .video-js {
-    width: 888px;
-    height: 500px;
+    width: calc(100vw - 240px);
+    height: auto;
+    max-height: 500px;
 
     &.vjs-theater-enabled {
       height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@@ -479,6 +480,10 @@
   }
 }
 
+@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 768a08d42..95198f0aa 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -317,6 +317,10 @@ 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 8e663d32f..a4fea13c2 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -363,3 +363,9 @@ table {
     }
   }
 }
+
+@media screen and (max-width: 400px) {
+  menu {
+    width: 100%;
+  }
+}