From e66883b37ae0796256b3aba550670a2d76cfc98a Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Tue, 9 Jun 2020 09:33:28 +0200
Subject: `fitWidth` for `video-miniature`, fluid grid (#2830)

* Fluid abstract video list

* normalize timestamp display on miniatures

* use grid for abstract-video-list

- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen

* move sceenratio function in a mixin

* display no miniature avatar in channel videos view
---
 client/src/sass/include/_miniature.scss | 55 ++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 25 deletions(-)

(limited to 'client/src/sass/include/_miniature.scss')

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d0ee1e2f0..d89d6f9ff 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -6,7 +6,7 @@
 
   transition: color 0.2s;
   font-weight: $font-semibold;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
   margin-top: 10px;
   margin-bottom: 5px;
 
@@ -80,7 +80,7 @@ $play-overlay-width: 18px;
   }
 
   &.focus-visible {
-    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     outline: none;
   }
 
@@ -168,7 +168,7 @@ $play-overlay-width: 18px;
         outline: none;
       }
 
-      color: var(--mainForegroundColor);
+      color: pvar(--mainForegroundColor);
     }
   }
 
@@ -187,7 +187,7 @@ $play-overlay-width: 18px;
       }
 
       .followers {
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         font-weight: normal;
         font-size: 14px;
         margin-left: 10px;
@@ -203,7 +203,7 @@ $play-overlay-width: 18px;
     display: inline-block;
     font-size: 16px;
     text-transform: uppercase;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     margin-bottom: 10px;
     font-weight: $font-semibold;
     text-decoration: none;
@@ -221,32 +221,37 @@ $play-overlay-width: 18px;
   }
 }
 
-@mixin adapt-margin-content-width {
-  width: $video-miniature-width * 6;
-  margin: auto !important;
+@mixin adapt-margin-content-width($fluid: false) {
+  @if $fluid {
+    margin-left: 3vw !important;
+    margin-right: 3vw !important;
+  } @else {
+    width: $video-miniature-width * 6;
+    margin: auto !important;
 
-  @media screen and (max-width: 1800px) {
-    width: $video-miniature-width * 5;
-  }
+    @media screen and (max-width: 1800px) {
+      width: $video-miniature-width * 5;
+    }
 
-  @media screen and (max-width: 1800px - $video-miniature-width) {
-    width: $video-miniature-width * 4;
-  }
+    @media screen and (max-width: 1800px - $video-miniature-width) {
+      width: $video-miniature-width * 4;
+    }
 
-  @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
-    width: $video-miniature-width * 3;
-  }
+    @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+      width: $video-miniature-width * 3;
+    }
 
-  @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-    width: $video-miniature-width * 2;
-  }
+    @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+      width: $video-miniature-width * 2;
+    }
 
-  @media screen and (max-width: $mobile-view) {
-    width: auto;
-    margin: 0 !important;
+    @media screen and (max-width: $mobile-view) {
+      width: auto;
+      margin: 0 !important;
 
-    .videos {
-      @include video-miniature-small-screen;
+      .videos {
+        @include video-miniature-small-screen;
+      }
     }
   }
 }
-- 
cgit v1.2.3