fixing grid readjustment with expand and screens < 1150px

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.html

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 c6118b763b3096cdbb56cb2b70e9a7731e9b5b83..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
@@ -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-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 -->
@@ -125,7 +125,7 @@
                 <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
               </a>
 
-              <my-subscribe-button *ngIf="isUserLoggedIn()" [videoChannel]="video.channel" size="small"></my-subscribe-button>
+              <my-subscribe-button #subscribeButton *ngIf="isUserLoggedIn()" [videoChannel]="video.channel" size="small"></my-subscribe-button>
             </div>
 
             <div class="video-info-by">
@@ -197,18 +197,21 @@
           </div>
         </div>
 
-      <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"
-                           [inputVideo]="video" [user]="user"></my-recommended-videos>
+        <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>
   </div>
-
+  
   <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
     <div class="privacy-concerns-text">
       <strong i18n>Friendly Reminder: </strong>
       <ng-container i18n>
-        the sharing system used by this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
+        the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
       </ng-container>
       <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube">More information</a>
     </div>