From 10846ef656585ee857ec43fc22b490409ddd0d44 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 7 Aug 2020 15:39:25 +0200
Subject: Fix playlist layout on mobile

---
 .../my-account-video-playlist-elements.component.scss |  8 +++++---
 client/src/sass/application.scss                      | 19 +++++++++----------
 2 files changed, 14 insertions(+), 13 deletions(-)

(limited to 'client/src')

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 3f2c345d2..4531e475a 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -4,10 +4,10 @@
 
 .playlist-info {
   background-color: pvar(--submenuColor);
-  margin-left: -15px;
+  margin-left: -$not-expanded-horizontal-margins;
   margin-top: -$sub-menu-margin-bottom;
 
-  padding: $sub-menu-margin-bottom 0 -15px 0;
+  padding: 10px;
 
   display: flex;
   justify-content: center;
@@ -45,7 +45,9 @@
 
 @media screen and (max-width: $small-view) {
   .playlist-info {
-    margin-top: -$sub-menu-margin-bottom-small-view;
+    width: 100vw;
+    padding-top: 20px;
+    margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
   }
 }
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9668da39d..cdf0ee992 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -52,6 +52,8 @@ body {
 
   --activatedActionButtonColor: #{$activated-action-button-color};
 
+  --expanded-horizontal-margin-content: $expanded-horizontal-margins;
+
   font-family: $main-fonts;
   font-weight: $font-regular;
   color: pvar(--mainForegroundColor);
@@ -162,13 +164,13 @@ label {
     width: 100%;
 
     .margin-content {
-      margin-left: $expanded-horizontal-margins;
-      margin-right: $expanded-horizontal-margins;
+      margin-left: var(--expanded-horizontal-margin-content);
+      margin-right: var(--expanded-horizontal-margin-content);
     }
 
     .sub-menu {
-      padding-left: $expanded-horizontal-margins;
-      padding-right: $expanded-horizontal-margins;
+      padding-left: var(--expanded-horizontal-margin-content);
+      padding-right: var(--expanded-horizontal-margin-content);
     }
   }
 
@@ -304,8 +306,7 @@ table {
   .main-col {
     &.expanded {
       .margin-content {
-        margin-left: $expanded-horizontal-margins/2;
-        margin-right: $expanded-horizontal-margins/2;
+        --expanded-horizontal-margin-content: $expanded-horizontal-margins/2;
       }
     }
   }
@@ -316,8 +317,7 @@ table {
   .main-col {
     &, &.expanded {
       .margin-content {
-        margin-left: $expanded-horizontal-margins/3;
-        margin-right: $expanded-horizontal-margins/3;
+        --expanded-horizontal-margin-content: $expanded-horizontal-margins/3;
       }
 
       .sub-menu {
@@ -344,8 +344,7 @@ table {
 
     &, &.expanded {
       .margin-content {
-        margin-left: 15px;
-        margin-right: 15px;
+        --expanded-horizontal-margin-content: 15px;
       }
 
       .sub-menu {
-- 
cgit v1.2.3