interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix playlist layout on mobile

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
Show Stats 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 {
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);
}
}

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

@ -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 {