milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix card positioning on mobile

Browse source
This commit is contained in:
Bill Thornton 2021-08-11 13:12:49 -04:00
parent 602d14a539
commit 8c1ccaf485
1 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/assets/css/librarybrowser.scss
View file

@ -581,14 +581,13 @@
} }
.layout-mobile .mainDetailButtons { .layout-mobile .mainDetailButtons {
flex: 1 0 0%;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-left: 37.5%;
@media all and (max-width: 34em) { @media all and (max-width: 32em) {
& { margin-bottom: 0;
margin-bottom: 0; margin-left: 0;
}
} }
} }
@ -612,7 +611,8 @@
} }
.layout-mobile .detailPagePrimaryContainer { .layout-mobile .detailPagePrimaryContainer {
flex-direction: column; display: block;
position: relative;
padding: 0.5rem 5%; padding: 0.5rem 5%;
} }
@ -642,10 +642,12 @@
flex: 1 0 0; flex: 1 0 0;
.layout-mobile & { .layout-mobile & {
flex: 1 0 0%;
position: relative;
padding-left: 37.5%; padding-left: 37.5%;
overflow: visible; overflow: visible;
@media all and (max-width: 32em) {
position: relative;
}
} }
} }
@ -681,11 +683,29 @@
margin: 0; margin: 0;
} }
&.backdropCard {
top: 35%;
}
&.squareCard {
top: 40%;
}
.layout-mobile & { .layout-mobile & {
top: auto !important; left: 5%;
left: 0; bottom: 1rem;
bottom: 0;
max-width: 30vw; max-width: 30vw;
@media all and (max-width: 32em) {
left: 0;
bottom: 0;
}
&,
&.backdropCard,
&.squareCard {
top: auto;
}
} }
.layout-tv & { .layout-tv & {
@ -694,14 +714,6 @@
} }
} }
.detailImageContainer .card.backdropCard {
top: 35%;
}
.detailImageContainer .card.squareCard {
top: 40%;
}
.layout-mobile .detailImageContainer { .layout-mobile .detailImageContainer {
padding-left: 5%; padding-left: 5%;
} }