From 0f7407d926cf7774f8f730dba08327569c11680c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 1 Apr 2021 11:10:27 +0200
Subject: Refactor video miniature

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
---
 .../account-video-channels/account-video-channels.component.html    | 1 +
 .../account-video-channels/account-video-channels.component.scss    | 6 ++++--
 client/src/app/+accounts/accounts.component.scss                    | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'client/src/app/+accounts')

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 19a4b3c9c..96780e938 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -39,6 +39,7 @@
         <my-video-miniature
           *ngFor="let video of getVideosOf(videoChannel)"
           [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
+          thumbnailSize="medium"
         ></my-video-miniature>
 
         <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 8f1e9deb5..7e88802f3 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -3,7 +3,7 @@
 @import '_miniature';
 
 .margin-content {
-  @include fluid-videos-miniature-margins;
+  @include grid-videos-miniature-margins;
 }
 
 .channel {
@@ -93,6 +93,8 @@ my-subscribe-button {
 
   my-video-miniature {
     margin-right: 15px;
+    min-width: $video-thumbnail-medium-width;
+    max-width: $video-thumbnail-medium-width;
   }
 
   .no-results {
@@ -105,7 +107,7 @@ my-subscribe-button {
   position: absolute;
   right: 0;
   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
-  padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px;
+  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
   z-index: z(miniature) + 1;
 
   a {
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index d7213df1d..a836e84ce 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -15,7 +15,7 @@
 }
 
 .links {
-  @include fluid-videos-miniature-margins;
+  @include grid-videos-miniature-margins;
 
   display: flex;
   justify-content: space-between;
@@ -44,7 +44,7 @@ my-user-moderation-dropdown,
 }
 
 .account-info {
-  @include fluid-videos-miniature-margins(false, 15px);
+  @include grid-videos-miniature-margins(false, 15px);
 
   display: grid;
   grid-template-columns: 1fr min-content;
-- 
cgit v1.2.3