jeena/PeerTube
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Fix playlist layout on mobile

Browse source
This commit is contained in:
Chocobozzz 2020-08-07 15:39:25 +02:00
parent 203d594f2d
commit 10846ef656
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
View file

@ -4,10 +4,10 @@
.playlist-info { .playlist-info {
background-color: pvar(--submenuColor); background-color: pvar(--submenuColor);
margin-left: -15px; margin-left: -$not-expanded-horizontal-margins;
margin-top: -$sub-menu-margin-bottom; margin-top: -$sub-menu-margin-bottom;
padding: $sub-menu-margin-bottom 0 -15px 0; padding: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -45,7 +45,9 @@
@media screen and (max-width: $small-view) { @media screen and (max-width: $small-view) {
.playlist-info { .playlist-info {
margin-top: -$sub-menu-margin-bottom-small-view; width: 100vw;
padding-top: 20px;
margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
} }
} }

19
client/src/sass/application.scss
View file

@ -52,6 +52,8 @@ body {
--activatedActionButtonColor: #{$activated-action-button-color}; --activatedActionButtonColor: #{$activated-action-button-color};
--expanded-horizontal-margin-content: $expanded-horizontal-margins;
font-family: $main-fonts; font-family: $main-fonts;
font-weight: $font-regular; font-weight: $font-regular;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
@ -162,13 +164,13 @@ label {
width: 100%; width: 100%;
.margin-content { .margin-content {
margin-left: $expanded-horizontal-margins; margin-left: var(--expanded-horizontal-margin-content);
margin-right: $expanded-horizontal-margins; margin-right: var(--expanded-horizontal-margin-content);
} }
.sub-menu { .sub-menu {
padding-left: $expanded-horizontal-margins; padding-left: var(--expanded-horizontal-margin-content);
padding-right: $expanded-horizontal-margins; padding-right: var(--expanded-horizontal-margin-content);
} }
} }
@ -304,8 +306,7 @@ table {
.main-col { .main-col {
&.expanded { &.expanded {
.margin-content { .margin-content {
margin-left: $expanded-horizontal-margins/2; --expanded-horizontal-margin-content: $expanded-horizontal-margins/2;
margin-right: $expanded-horizontal-margins/2;
} }
} }
} }
@ -316,8 +317,7 @@ table {
.main-col { .main-col {
&, &.expanded { &, &.expanded {
.margin-content { .margin-content {
margin-left: $expanded-horizontal-margins/3; --expanded-horizontal-margin-content: $expanded-horizontal-margins/3;
margin-right: $expanded-horizontal-margins/3;
} }
.sub-menu { .sub-menu {
@ -344,8 +344,7 @@ table {
&, &.expanded { &, &.expanded {
.margin-content { .margin-content {
margin-left: 15px; --expanded-horizontal-margin-content: 15px;
margin-right: 15px;
} }
.sub-menu { .sub-menu {