From 1f788f2044928325e48c5d88ecbc72501873558e Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 31 Jan 2018 11:38:05 +0100
Subject: [PATCH] Improve responsive on video watch

---
 client/src/app/app.component.scss             |   2 +-
 client/src/app/header/header.component.scss   |   2 +-
 .../+video-watch/video-watch.component.html   | 138 ++++----
 .../+video-watch/video-watch.component.scss   | 295 ++++++++++--------
 client/src/sass/application.scss              |  11 +
 5 files changed, 244 insertions(+), 204 deletions(-)

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 2aadb1c97..d502d63b5 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -42,7 +42,7 @@
 
       &.icon-menu {
         background-image: url('../assets/images/header/menu.svg');
-        margin: 0 18px 0 24px;
+        margin: 0 18px 0 20px;
       }
     }
 
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 1b67042fc..d589d66c9 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -10,7 +10,7 @@
     color: #000;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 800px) {
     width: calc(100% - 150px);
   }
 
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 5921b4b72..74ead1b76 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -9,91 +9,93 @@
   <!-- Video information -->
   <div *ngIf="video" class="margin-content video-bottom">
     <div class="video-info">
-      <div class="video-info-name-actions">
-        <div class="video-info-name">{{ video.name }}</div>
+      <div class="video-info-first-row">
+        <div>
+          <div class="video-info-name">{{ video.name }}</div>
 
-        <div class="video-info-actions">
-          <div
-            *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
-            class="action-button action-button-like"
-          >
-            <span class="icon icon-like" title="Like this video" ></span>
+          <div class="video-info-date-views">
+            {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
           </div>
 
-          <div
-            *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
-            class="action-button action-button-dislike"
-          >
-            <span class="icon icon-dislike" title="Dislike this video"></span>
+          <div class="video-info-channel">
+            {{ video.channel.displayName }}
+            <!-- Here will be the subscribe button -->
           </div>
 
-          <div (click)="showShareModal()" class="action-button">
-            <span class="icon icon-share"></span>
-            Share
+          <div class="video-info-by">
+            By {{ video.by }}
+            <img [src]="getAvatarPath()" alt="Account avatar" />
           </div>
+        </div>
 
-          <div class="action-more" dropdown dropup="true" placement="right">
-            <div class="action-button" dropdownToggle>
-              <span class="icon icon-more"></span>
+        <div class="video-actions-rates">
+          <div class="video-actions">
+            <div
+                *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
+                class="action-button action-button-like"
+            >
+              <span class="icon icon-like" title="Like this video" ></span>
             </div>
 
-            <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
-              <li role="menuitem">
-                <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
-                  <span class="icon icon-download"></span> Download
-                </a>
-              </li>
+            <div
+                *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
+                class="action-button action-button-dislike"
+            >
+              <span class="icon icon-dislike" title="Dislike this video"></span>
+            </div>
 
-              <li *ngIf="isUserLoggedIn()" role="menuitem">
-                <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
-                  <span class="icon icon-alert"></span> Report
-                </a>
-              </li>
+            <div (click)="showShareModal()" class="action-button">
+              <span class="icon icon-share"></span>
+              Share
+            </div>
 
-              <li *ngIf="isVideoBlacklistable()" role="menuitem">
-                <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
-                  <span class="icon icon-blacklist"></span> Blacklist
-                </a>
-              </li>
+            <div class="action-more" dropdown dropup="true" placement="right">
+              <div class="action-button" dropdownToggle>
+                <span class="icon icon-more"></span>
+              </div>
 
-              <li *ngIf="isVideoUpdatable()" role="menuitem">
-                <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
-                  <span class="icon icon-edit"></span> Update
-                </a>
-              </li>
+              <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
+                <li role="menuitem">
+                  <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
+                    <span class="icon icon-download"></span> Download
+                  </a>
+                </li>
 
-              <li *ngIf="isVideoRemovable()" role="menuitem">
-                <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
-                  <span class="icon icon-blacklist"></span> Delete
-                </a>
-              </li>
-            </ul>
+                <li *ngIf="isUserLoggedIn()" role="menuitem">
+                  <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
+                    <span class="icon icon-alert"></span> Report
+                  </a>
+                </li>
+
+                <li *ngIf="isVideoBlacklistable()" role="menuitem">
+                  <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
+                    <span class="icon icon-blacklist"></span> Blacklist
+                  </a>
+                </li>
+
+                <li *ngIf="isVideoUpdatable()" role="menuitem">
+                  <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
+                    <span class="icon icon-edit"></span> Update
+                  </a>
+                </li>
+
+                <li *ngIf="isVideoRemovable()" role="menuitem">
+                  <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
+                    <span class="icon icon-blacklist"></span> Delete
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div
+              class="video-info-likes-dislikes-bar"
+              *ngIf="video.likes !== 0 || video.dislikes !== 0"  [tooltip]="likesBarTooltipText">
+            <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
           </div>
         </div>
       </div>
 
-      <div class="video-info-date-views-bar">
-        <div class="video-info-date-views">
-          {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
-        </div>
-
-        <div
-          class="video-info-likes-dislikes-bar"
-          *ngIf="video.likes !== 0 || video.dislikes !== 0"  [tooltip]="likesBarTooltipText">
-          <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-        </div>
-      </div>
-
-      <div class="video-info-channel">
-        {{ video.channel.displayName }}
-        <!-- Here will be the subscribe button -->
-      </div>
-
-      <div class="video-info-by">
-        By {{ video.by }}
-        <img [src]="getAvatarPath()" alt="Account avatar" />
-      </div>
-
       <div class="video-info-description">
         <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></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 7ebdfc0c4..d963f713d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -39,146 +39,153 @@
     flex-grow: 1;
     margin-right: 28px;
 
-    .video-info-name-actions {
+    .video-info-first-row {
       display: flex;
-      align-items: center;
+
+      & > div {
+        flex-grow: 1;
+      }
 
       .video-info-name {
         margin-right: 30px;
+        height: 40px; // Align with the action buttons
         font-size: 27px;
         font-weight: $font-semibold;
         flex-grow: 1;
       }
 
-      .video-info-actions {
-        min-width: 215px;
-        display: flex;
-        justify-content: end;
-
-        .action-button:not(:first-child), .action-more {
-          margin-left: 10px;
-        }
-
-        .action-button {
-          @include peertube-button;
-          @include grey-button;
-
-          font-size: 15px;
-          font-weight: $font-semibold;
-          display: inline-block;
-          padding: 0 10px 0 10px;
-
-          .icon {
-            @include icon(21px);
-
-            position: relative;
-            top: -2px;
-
-            &.icon-like {
-              background-image: url('../../../assets/images/video/like-grey.svg');
-            }
-
-            &.icon-dislike {
-              background-image: url('../../../assets/images/video/dislike-grey.svg');
-            }
-
-            &.icon-share {
-              background-image: url('../../../assets/images/video/share.svg');
-            }
-
-            &.icon-more {
-              background-image: url('../../../assets/images/video/more.svg');
-              top: -1px;
-            }
-          }
-
-          &.action-button-like.activated {
-            background-color: #39CC0B;
-
-            .icon-like {
-              background-image: url('../../../assets/images/video/like-white.svg');
-            }
-          }
-
-          &.action-button-dislike.activated {
-            background-color: #FF0000;
-
-            .icon-dislike {
-              background-image: url('../../../assets/images/video/dislike-white.svg');
-            }
-          }
-        }
-
-        .action-more {
-          display: inline-block;
-
-          .dropdown-menu .dropdown-item {
-            padding: 6px 24px;
-
-            .icon {
-              @include icon(24px);
-
-              margin-right: 10px;
-              position: relative;
-              top: -1px;
-
-              &.icon-download {
-                background-image: url('../../../assets/images/video/download-black.svg');
-              }
-
-              &.icon-edit {
-                background-image: url('../../../assets/images/global/edit-black.svg');
-              }
-
-              &.icon-alert {
-                background-image: url('../../../assets/images/video/alert.svg');
-              }
-
-              &.icon-blacklist {
-                background-image: url('../../../assets/images/video/blacklist.svg');
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .video-info-date-views-bar {
-      display: flex;
-
       .video-info-date-views {
         font-size: 16px;
         margin-bottom: 10px;
         flex-grow: 1;
       }
 
-      .video-info-likes-dislikes-bar {
-        height: 5px;
-        width: 186px;
-        background-color: #E5E5E5;
-        margin-top: 25px;
+      .video-info-channel {
+        font-weight: $font-semibold;
+        font-size: 15px;
+      }
 
-        .likes-bar {
-          height: 100%;
-          background-color: #39CC0B;
+      .video-info-by {
+        display: flex;
+        align-items: center;
+        font-size: 13px;
+
+        img {
+          @include avatar(18px);
+
+          margin-left: 7px;
         }
       }
-    }
 
-    .video-info-channel {
-      font-weight: $font-semibold;
-      font-size: 15px;
-    }
+      .video-actions-rates {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
 
-    .video-info-by {
-      display: flex;
-      align-items: center;
-      font-size: 13px;
+        .video-actions {
+          height: 40px; // Align with the title
+          min-width: 215px;
+          display: flex;
+          align-items: center;
 
-      img {
-        @include avatar(18px);
+          .action-button:not(:first-child), .action-more {
+            margin-left: 10px;
+          }
 
-        margin-left: 7px;
+          .action-button {
+            @include peertube-button;
+            @include grey-button;
+
+            font-size: 15px;
+            font-weight: $font-semibold;
+            display: inline-block;
+            padding: 0 10px 0 10px;
+
+            .icon {
+              @include icon(21px);
+
+              position: relative;
+              top: -2px;
+
+              &.icon-like {
+                background-image: url('../../../assets/images/video/like-grey.svg');
+              }
+
+              &.icon-dislike {
+                background-image: url('../../../assets/images/video/dislike-grey.svg');
+              }
+
+              &.icon-share {
+                background-image: url('../../../assets/images/video/share.svg');
+              }
+
+              &.icon-more {
+                background-image: url('../../../assets/images/video/more.svg');
+                top: -1px;
+              }
+            }
+
+            &.action-button-like.activated {
+              background-color: #39CC0B;
+
+              .icon-like {
+                background-image: url('../../../assets/images/video/like-white.svg');
+              }
+            }
+
+            &.action-button-dislike.activated {
+              background-color: #FF0000;
+
+              .icon-dislike {
+                background-image: url('../../../assets/images/video/dislike-white.svg');
+              }
+            }
+          }
+
+          .action-more {
+            display: inline-block;
+
+            .dropdown-menu .dropdown-item {
+              padding: 6px 24px;
+
+              .icon {
+                @include icon(24px);
+
+                margin-right: 10px;
+                position: relative;
+                top: -1px;
+
+                &.icon-download {
+                  background-image: url('../../../assets/images/video/download-black.svg');
+                }
+
+                &.icon-edit {
+                  background-image: url('../../../assets/images/global/edit-black.svg');
+                }
+
+                &.icon-alert {
+                  background-image: url('../../../assets/images/video/alert.svg');
+                }
+
+                &.icon-blacklist {
+                  background-image: url('../../../assets/images/video/blacklist.svg');
+                }
+              }
+            }
+          }
+        }
+
+        .video-info-likes-dislikes-bar {
+          height: 5px;
+          width: 186px;
+          background-color: #E5E5E5;
+          margin-top: 25px;
+
+          .likes-bar {
+            height: 100%;
+            background-color: #39CC0B;
+          }
+        }
       }
     }
 
@@ -203,18 +210,16 @@
       }
     }
 
-    .video-attributes {
-      .video-attribute {
-        font-size: 13px;
-        display: block;
-        margin-bottom: 12px;
+    .video-attributes .video-attribute {
+      font-size: 13px;
+      display: block;
+      margin-bottom: 12px;
 
-        .video-attribute-label {
-          width: 86px;
-          display: inline-block;
-          color: #585858;
-          font-weight: $font-bold;
-        }
+      .video-attribute-label {
+        width: 86px;
+        display: inline-block;
+        color: #585858;
+        font-weight: $font-bold;
       }
     }
   }
@@ -246,14 +251,21 @@
     .video-info {
       margin-right: 0;
 
-      .video-info-name-actions {
-        align-items: left;
+      .video-info-first-row {
         flex-direction: column;
         margin-bottom: 30px;
+
+        .video-actions-rates {
+          margin-top: 20px;
+          align-items: left;
+
+          .video-info-likes-dislikes-bar {
+            margin-top: 10px;
+          }
+        }
       }
 
-      .video-info-date-views-bar {
-        align-items: left;
+      .video-info-date-views {
         flex-direction: column;
         margin-bottom: 30px;
 
@@ -261,12 +273,27 @@
           margin-top: 0;
         }
       }
+
+      .video-attributes .video-attribute {
+        margin-bottom: 5px;
+      }
     }
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 600px) {
   .video-bottom {
     margin: 20px 0 0 0;
+
+    .video-info {
+
+      .video-info-first-row {
+
+        .video-info-name {
+          font-size: 20px;
+          height: auto;
+        }
+      }
+    }
   }
 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5363b759b..84ffbec65 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -360,6 +360,17 @@ table {
   }
 }
 
+@media screen and (max-width: 900px) {
+  .main-col {
+    &, &.expanded {
+      .margin-content {
+        margin-left: 50px;
+        margin-right: 50px;
+      }
+    }
+  }
+}
+
 // On small screen, menu is absolute
 @media screen and (max-width: 600px) {
   .title-menu-left {