Refactor video miniature

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size

9 files changed, 147 insertions, 185 deletions

diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index c180161e7..9dec64645 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -4,7 +4,7 @@
 </h1>
 
 <div class="top-buttons">
-  <div>
+  <div class="search-wrapper">
     <div class="input-group has-feedback has-clear">
       <input
         type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div class="history-switch ml-auto mr-3">
+  <div class="history-switch">
     <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
     <label i18n>Track watch history</label>
   </div>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 928a8a3da..af4a34b4b 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -11,16 +11,24 @@
 
 .top-buttons {
   margin-bottom: 30px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 250px 1fr auto auto;
   align-items: center;
-  flex-wrap: wrap;
 
-  #history-search {
-    @include peertube-input-text(250px);
+  .search-wrapper {
+    grid-column: 1;
+
+    input {
+      @include peertube-input-text(250px);
+    }
   }
 
   .history-switch {
+    grid-column: 3;
+
     display: flex;
+    margin-left: auto;
+    margin-right: 15px;
 
     label {
       margin: 0 0 0 5px;
@@ -31,6 +39,8 @@
   }
 
   .delete-history {
+    grid-column: 4;
+
     @include peertube-button;
     @include grey-button;
     @include button-with-icon;
@@ -40,26 +50,27 @@
 }
 
 .video {
-  @include row-blocks;
-
-  .my-video-miniature {
-    flex-grow: 1;
-  }
+  @include row-blocks($column-responsive: false);
 }
 
-@media screen and (max-width: $mobile-view) {
+@media screen and (max-width: $small-view) {
   .top-buttons {
-    .history-switch label, .delete-history {
-      @include ellipsis;
-    }
+    grid-template-columns: auto 1fr auto;
+    row-gap: 20px;
 
-    .history-switch label {
-      width: 60%;
+    .history-switch {
+      grid-row: 1;
+      grid-column: 1;
+      margin: 0;
     }
 
     .delete-history {
-      margin-left: auto;
-      max-width: 32%;
+      grid-row: 1;
+      grid-column: 3;
+    }
+
+    .search-wrapper {
+      grid-column: 1 / 4;
     }
   }
 }
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 510b400c0..ff448ad87 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -6,7 +6,7 @@
   </span>
 </h1>
 
-<div class="video-subscriptions-header d-flex justify-content-between">
+<div class="video-subscriptions-header">
   <div class="has-feedback has-clear">
     <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
       (ngModelChange)="onSubscriptionsSearchChanged()" />
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 9fc8be86c..3c1a4d2ad 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -13,36 +13,36 @@ input[type=text] {
 
     margin-right: 10px;
   }
+}
 
-  .video-channel-info {
-    flex-grow: 1;
-
-    a.video-channel-names {
-      @include disable-default-a-behaviour;
-
-      width: fit-content;
-      display: flex;
-      align-items: baseline;
-      color: pvar(--mainForegroundColor);
-
-      .video-channel-display-name {
-        font-weight: $font-semibold;
-        font-size: 18px;
-      }
-
-      .video-channel-name {
-        font-size: 14px;
-        color: $grey-actor-name;
-        margin-left: 5px;
-      }
+.video-channel-info {
+  flex-grow: 1;
+
+  a.video-channel-names {
+    @include disable-default-a-behaviour;
+
+    width: fit-content;
+    display: flex;
+    align-items: baseline;
+    color: pvar(--mainForegroundColor);
+
+    .video-channel-display-name {
+      font-weight: $font-semibold;
+      font-size: 18px;
+    }
+
+    .video-channel-name {
+      font-size: 14px;
+      color: $grey-actor-name;
+      margin-left: 5px;
     }
   }
+}
 
-  .actor-owner {
-    @include actor-owner;
+.actor-owner {
+  @include actor-owner;
 
-    margin-top: 0;
-  }
+  margin-top: 0;
 }
 
 .video-subscriptions-header {
@@ -50,32 +50,22 @@ input[type=text] {
 }
 
 @media screen and (max-width: $small-view) {
-  .video-channel {
-    .video-channel-info {
-      padding-bottom: 10px;
-      text-align: center;
-
-      .video-channel-names {
-        flex-direction: column;
-        align-items: center !important;
-        margin: auto;
-      }
-    }
-
-    img {
-      margin-right: 0;
-    }
+  .video-subscriptions-header input[type=text] {
+    width: 100% !important;
   }
-}
 
-@media screen and (max-width: $mobile-view) {
-  .video-subscriptions-header {
-    flex-direction: column;
+  .video-channel-info {
+    padding-bottom: 10px;
+    text-align: center;
 
-    input[type=text] {
-      width: 100% !important;
+    .video-channel-names {
+      flex-direction: column;
+      align-items: center !important;
+      margin: auto;
     }
   }
-}
-
 
+  img {
+    margin-right: 0;
+  }
+}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
index a97b2b4fb..e7e3c17b3 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -1,6 +1,6 @@
-<div class="row">
+<div class="root">
 
-  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+  <div class="playlist-info">
     <my-video-playlist-miniature
       *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
       [displayDescription]="true" [displayPrivacy]="true"
@@ -20,7 +20,7 @@
 
   </div>
 
-  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+  <div class="playlist-elements">
     <div class="no-results" *ngIf="pagination.totalItems === 0">
       <div i18n>No videos in this playlist.</div>
 
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 87a836a46..0c68dedf6 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -2,17 +2,21 @@
 @import '_mixins';
 @import '_miniature';
 
+.root {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
 .playlist-info {
+  grid-column: 1;
   background-color: pvar(--submenuBackgroundColor);
   margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
   margin-top: -$sub-menu-margin-bottom;
 
-  padding: 10px;
+  padding: 15px;
 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
 
   /* fix ellipsis dots background color */
   ::ng-deep .miniature-name::after {
@@ -59,15 +63,35 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-@media screen and (max-width: $small-view) {
+.playlist-elements {
+  grid-column: 2;
+}
+
+my-video-playlist-miniature {
+  width: $video-thumbnail-width;
+}
+
+@include on-small-main-col {
+  my-video-playlist-miniature {
+    width: $video-thumbnail-medium-width;
+  }
+}
+
+@include on-mobile-main-col {
+  .root {
+    display: block;
+  }
+
   .playlist-info {
-    width: 100vw;
+    width: calc(100% + (2 * var(--horizontalMarginContent)));
     padding-top: 20px;
     margin-bottom: 10px;
   }
 
-  .playlist-elements {
-    padding: 0 !important;
+  my-video-playlist-miniature,
+  .playlist-buttons {
+    margin-left: auto;
+    margin-right: auto;
   }
 
   ::ng-deep my-video-playlist-element-miniature {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index afcf6a084..b88ea3db7 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,8 +1,6 @@
 <h1>
-  <span>
-    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
-  </span>
+  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="video-playlists-header d-flex justify-content-between">
@@ -21,10 +19,10 @@
 
 <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
-    <div class="miniature-wrapper">
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
-      ></my-video-playlist-miniature>
-    </div>
+    <my-video-playlist-miniature
+      [playlist]="playlist" [toManage]="true" [displayChannel]="true"
+      [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
+    ></my-video-playlist-miniature>
 
     <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
       <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 2b7c88246..94187efd4 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+h1 {
+  display: flex;
+}
+
 .create-button {
   @include create-button;
 }
@@ -9,64 +13,45 @@ input[type=text] {
   @include peertube-input-text(300px);
 }
 
-::ng-deep .action-button {
-  &.action-button-delete {
-    margin-right: 10px;
-  }
-}
-
 .video-playlist {
-  @include row-blocks;
-
-  .miniature-wrapper {
-    flex-grow: 1;
-
-    ::ng-deep .miniature {
-      display: flex;
-
-      .miniature-info {
-        margin-left: 10px;
-        width: auto;
-      }
-    }
-  }
+  @include row-blocks($column-responsive: false);
+}
 
-  .video-playlist-buttons {
-    min-width: 190px;
-    height: max-content;
-  }
+.video-playlist-buttons {
+  display: flex;
+  margin-left: 10px;
+  align-self: flex-end;
 }
 
 .video-playlists-header {
   margin-bottom: 30px;
 }
 
-@media screen and (max-width: $small-view) {
+my-video-playlist-miniature {
+  display: block;
+  flex-grow: 1;
+}
+
+my-delete-button {
+  margin-right: 10px;
+}
+
+@include on-small-main-col {
   .video-playlists-header {
     text-align: center;
   }
 
   .video-playlist {
-
-    .video-playlist-buttons {
-      margin-top: 10px;
-    }
+    flex-wrap: wrap;
   }
 
-  my-video-playlist-miniature ::ng-deep .miniature {
-    flex-direction: column;
-
-    .miniature-info {
-      margin-left: 0 !important;
-    }
-
-    .miniature-name {
-      max-width: $video-thumbnail-width;
-    }
+  .video-playlist-buttons {
+    margin-top: 10px;
+    margin-left: auto;
   }
 }
 
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .video-playlists-header {
     flex-direction: column;
 
@@ -75,4 +60,8 @@ input[type=text] {
       margin-bottom: 12px;
     }
   }
+
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 57473896b..a03baa056 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -32,36 +32,9 @@ h1 {
   }
 }
 
-::ng-deep {
-  .video {
-    flex-wrap: wrap;
-  }
-
-  .action-button span {
-    white-space: nowrap;
-  }
-
-  .video-miniature {
-    &.display-as-row {
-      // width: min-content !important;
-      width: 100% !important;
-
-      .video-bottom .video-miniature-information {
-        width: max-content !important;
-        min-width: unset !important;
-      }
-    }
-
-    .video-bottom {
-      max-width: 350px;
-    }
-  }
-}
-
 .action-button {
   display: flex;
-  margin-left: 55px;
-  margin-top: 10px;
+  margin-left: 10px;
   align-self: flex-end;
 }
 
@@ -69,7 +42,7 @@ my-edit-button {
   margin-right: 10px;
 }
 
-@media screen and (max-width: $small-view) {
+@include on-small-main-col {
   h1 {
     flex-direction: column;
 
@@ -80,39 +53,12 @@ my-edit-button {
   }
 
   .action-button {
-    flex-direction: column;
-    align-self: center;
-    align-items: center;
-    margin-left: 0px;
-  }
-
-  my-edit-button {
-    margin: 15px 0 5px 0;
-    width: 100%;
-    text-align: center;
-
-    ::ng-deep {
-      .action-button {
-        /* same width than a.video-thumbnail */
-        width: $video-thumbnail-width;
-      }
-    }
-  }
-
-  ::ng-deep {
-    .video-miniature {
-      align-items: center;
-
-      .video-bottom,
-      .video-bottom .video-miniature-information {
-        /* same width than a.video-thumbnail */
-        max-width: $video-thumbnail-width !important;
-      }
-    }
+    margin-top: 10px;
+    margin-left: auto;
   }
 }
 
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .videos-header {
     flex-direction: column;
 
@@ -120,4 +66,8 @@ my-edit-button {
       width: 100% !important;
     }
   }
+
+  .action-button {
+    margin-left: 0;
+  }
 }