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
---
 .../+my-library/my-videos/my-videos.component.scss | 68 +++-------------------
 1 file changed, 9 insertions(+), 59 deletions(-)

(limited to 'client/src/app/+my-library/my-videos/my-videos.component.scss')

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;
+  }
 }
-- 
cgit v1.2.3