aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-07 15:39:25 +0200
committerChocobozzz <me@florianbigard.com>2020-08-10 09:43:44 +0200
commit10846ef656585ee857ec43fc22b490409ddd0d44 (patch)
treef1780290b36d02c11191d0444e6a3ea9bbce5ccc
parent203d594f2d20c6a573e80f7044cce4bce5dd72a9 (diff)
downloadPeerTube-10846ef656585ee857ec43fc22b490409ddd0d44.tar.gz
PeerTube-10846ef656585ee857ec43fc22b490409ddd0d44.tar.zst
PeerTube-10846ef656585ee857ec43fc22b490409ddd0d44.zip
Fix playlist layout on mobile
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss8
-rw-r--r--client/src/sass/application.scss19
2 files changed, 14 insertions, 13 deletions
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 @@
4 4
5.playlist-info { 5.playlist-info {
6 background-color: pvar(--submenuColor); 6 background-color: pvar(--submenuColor);
7 margin-left: -15px; 7 margin-left: -$not-expanded-horizontal-margins;
8 margin-top: -$sub-menu-margin-bottom; 8 margin-top: -$sub-menu-margin-bottom;
9 9
10 padding: $sub-menu-margin-bottom 0 -15px 0; 10 padding: 10px;
11 11
12 display: flex; 12 display: flex;
13 justify-content: center; 13 justify-content: center;
@@ -45,7 +45,9 @@
45 45
46@media screen and (max-width: $small-view) { 46@media screen and (max-width: $small-view) {
47 .playlist-info { 47 .playlist-info {
48 margin-top: -$sub-menu-margin-bottom-small-view; 48 width: 100vw;
49 padding-top: 20px;
50 margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
49 } 51 }
50} 52}
51 53
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 {
52 52
53 --activatedActionButtonColor: #{$activated-action-button-color}; 53 --activatedActionButtonColor: #{$activated-action-button-color};
54 54
55 --expanded-horizontal-margin-content: $expanded-horizontal-margins;
56
55 font-family: $main-fonts; 57 font-family: $main-fonts;
56 font-weight: $font-regular; 58 font-weight: $font-regular;
57 color: pvar(--mainForegroundColor); 59 color: pvar(--mainForegroundColor);
@@ -162,13 +164,13 @@ label {
162 width: 100%; 164 width: 100%;
163 165
164 .margin-content { 166 .margin-content {
165 margin-left: $expanded-horizontal-margins; 167 margin-left: var(--expanded-horizontal-margin-content);
166 margin-right: $expanded-horizontal-margins; 168 margin-right: var(--expanded-horizontal-margin-content);
167 } 169 }
168 170
169 .sub-menu { 171 .sub-menu {
170 padding-left: $expanded-horizontal-margins; 172 padding-left: var(--expanded-horizontal-margin-content);
171 padding-right: $expanded-horizontal-margins; 173 padding-right: var(--expanded-horizontal-margin-content);
172 } 174 }
173 } 175 }
174 176
@@ -304,8 +306,7 @@ table {
304 .main-col { 306 .main-col {
305 &.expanded { 307 &.expanded {
306 .margin-content { 308 .margin-content {
307 margin-left: $expanded-horizontal-margins/2; 309 --expanded-horizontal-margin-content: $expanded-horizontal-margins/2;
308 margin-right: $expanded-horizontal-margins/2;
309 } 310 }
310 } 311 }
311 } 312 }
@@ -316,8 +317,7 @@ table {
316 .main-col { 317 .main-col {
317 &, &.expanded { 318 &, &.expanded {
318 .margin-content { 319 .margin-content {
319 margin-left: $expanded-horizontal-margins/3; 320 --expanded-horizontal-margin-content: $expanded-horizontal-margins/3;
320 margin-right: $expanded-horizontal-margins/3;
321 } 321 }
322 322
323 .sub-menu { 323 .sub-menu {
@@ -344,8 +344,7 @@ table {
344 344
345 &, &.expanded { 345 &, &.expanded {
346 .margin-content { 346 .margin-content {
347 margin-left: 15px; 347 --expanded-horizontal-margin-content: 15px;
348 margin-right: 15px;
349 } 348 }
350 349
351 .sub-menu { 350 .sub-menu {