Redesign account's channels page

2 files changed, 32 insertions, 10 deletions

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 134b307b1..326d4677a 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -176,14 +176,41 @@ $play-overlay-width: 18px;
   }
 }
 
-@mixin fluid-videos-miniature-layout {
-  margin-left: $not-expanded-horizontal-margins !important;
-  margin-right: $not-expanded-horizontal-margins !important;
+// Use margin by default, or padding if $margin is false
+@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
+  @if $margin {
+    margin-left: $not-expanded-horizontal-margins !important;
+    margin-right: $not-expanded-horizontal-margins !important;
+  } @else {
+    padding-left: $not-expanded-horizontal-margins !important;
+    padding-right: $not-expanded-horizontal-margins !important;
+  }
 
   @media screen and (max-width: $mobile-view) {
     width: auto;
-    margin: 0 !important;
 
+    @if $margin {
+      margin: $min-margin !important;
+    } @else {
+      padding: $min-margin !important;
+    }
+  }
+
+  @media screen and (min-width: #{breakpoint(fhd)}) {
+    @if $margin {
+      margin-left: 6vw !important;
+      margin-right: 6vw !important;
+    } @else {
+      padding-left: 6vw !important;
+      padding-right: 6vw !important;
+    }
+  }
+}
+
+@mixin fluid-videos-miniature-layout {
+  @include fluid-videos-miniature-margins;
+
+  @media screen and (max-width: $mobile-view) {
     .videos {
       text-align: center;
 
@@ -209,13 +236,7 @@ $play-overlay-width: 18px;
     }
   }
 
-  @media screen and (min-width: #{breakpoint(fhd)}) {
-    margin-left: 6vw !important;
-    margin-right: 6vw !important;
-  }
-
   @media screen and (min-width: $mobile-view) {
-
     .videos {
       --miniature-min-width: #{$video-thumbnail-width - 15px};
       --miniature-max-width: #{$video-thumbnail-width};
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index bcd28215b..724a897fa 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -52,6 +52,7 @@ $sub-menu-color: #F7F7F7;
 $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
+$max-channels-width: 1200px;
 
 $footer-height: 30px;
 $footer-margin: 30px;