mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix card positioning on mobile

Browse source
This commit is contained in:
Bill Thornton 2021-08-10 17:03:40 -04:00
parent d69245361c
commit 602d14a539
2 changed files with 15 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -565,7 +565,7 @@
margin-bottom: 0 !important; margin-bottom: 0 !important;
.mediaInfoItem { .mediaInfoItem {
margin-bottom: 0.6em; margin-top: 0.5em;
} }
} }
} }
@ -587,8 +587,6 @@
@media all and (max-width: 34em) { @media all and (max-width: 34em) {
& { & {
margin-left: -32.5vw;
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -615,13 +613,7 @@
.layout-mobile .detailPagePrimaryContainer { .layout-mobile .detailPagePrimaryContainer {
flex-direction: column; flex-direction: column;
padding: 0.5rem 5% 0.5rem 37.5vw; padding: 0.5rem 5%;
@media all and (min-width: 45em) {
& {
padding-left: 25vw;
}
}
} }
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer, .layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
@ -648,10 +640,13 @@
.infoWrapper { .infoWrapper {
flex: 1 0 0; flex: 1 0 0;
}
.layout-mobile .infoWrapper { .layout-mobile & {
flex: 1 0 0%; flex: 1 0 0%;
position: relative;
padding-left: 37.5%;
overflow: visible;
}
} }
.infoText { .infoText {
@ -661,10 +656,10 @@
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
}
.layout-mobile .infoText { .layout-mobile & {
white-space: normal; white-space: normal;
}
} }
.detailPageSecondaryContainer { .detailPageSecondaryContainer {
@ -687,8 +682,9 @@
} }
.layout-mobile & { .layout-mobile & {
top: initial; top: auto !important;
transform: translateY(-50%); left: 0;
bottom: 0;
max-width: 30vw; max-width: 30vw;
} }

2
src/controllers/itemDetails/index.html
View file

@ -1,12 +1,12 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true"> <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop"></div> <div id="itemBackdrop" class="itemBackdrop"></div>
<div class="detailImageContainer padded-left"></div>
<div class="detailLogo"></div> <div class="detailLogo"></div>
<div class="detailPageWrapperContainer padded-bottom-page"> <div class="detailPageWrapperContainer padded-bottom-page">
<div class="detailPagePrimaryContainer padded-left padded-right"> <div class="detailPagePrimaryContainer padded-left padded-right">
<div class="infoWrapper infoText"> <div class="infoWrapper infoText">
<div class="detailImageContainer padded-left"></div>
<div class="nameContainer"></div> <div class="nameContainer"></div>
<div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div> <div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div> <div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div>