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;
.mediaInfoItem {
margin-bottom: 0.6em;
margin-top: 0.5em;
}
}
}
@ -587,8 +587,6 @@
@media all and (max-width: 34em) {
& {
margin-left: -32.5vw;
margin-top: 0;
margin-bottom: 0;
}
}
@ -615,13 +613,7 @@
.layout-mobile .detailPagePrimaryContainer {
flex-direction: column;
padding: 0.5rem 5% 0.5rem 37.5vw;
@media all and (min-width: 45em) {
& {
padding-left: 25vw;
}
}
padding: 0.5rem 5%;
}
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
@ -648,10 +640,13 @@
.infoWrapper {
flex: 1 0 0;
}
.layout-mobile .infoWrapper {
flex: 1 0 0%;
.layout-mobile & {
flex: 1 0 0%;
position: relative;
padding-left: 37.5%;
overflow: visible;
}
}
.infoText {
@ -661,10 +656,10 @@
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.layout-mobile .infoText {
white-space: normal;
.layout-mobile & {
white-space: normal;
}
}
.detailPageSecondaryContainer {
@ -687,8 +682,9 @@
}
.layout-mobile & {
top: initial;
transform: translateY(-50%);
top: auto !important;
left: 0;
bottom: 0;
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="itemBackdrop" class="itemBackdrop"></div>
<div class="detailImageContainer padded-left"></div>
<div class="detailLogo"></div>
<div class="detailPageWrapperContainer padded-bottom-page">
<div class="detailPagePrimaryContainer padded-left padded-right">
<div class="infoWrapper infoText">
<div class="detailImageContainer padded-left"></div>
<div class="nameContainer"></div>
<div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div>