fixing grid readjustment with expand and screens < 1150px

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 697abec8e78847fdf79f5129ed15442ae338e7de..3eb8ef40a060f03755ee32926931cd8c8cada320 100644 (file)
--- 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 3b6b5d8ed500c03580b53d79268b1d3cd1d5721e..582cf6e37fa2067d450131c01e891a40c44d3a2b 100644 (file)
--- 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 633b16c05a664417a550b8ac8a27dc4957849902..be1388a836a872c8ca7eac25778f31b281c848fe 100644 (file)
--- 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 768a08d42f9d8cbb0718a91fd496676c4db72816..95198f0aad560337d811ad45c49c3a9ee7d7e72a 100644 (file)
--- 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 8e663d32fda8ce901b0937376bd376244c21c1af..a4fea13c26ba768a938048cdf320e76f4231de9b 100644 (file)
--- 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%;
+  }
+}