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

Changes to details page layout

Browse source
This commit is contained in:
MrTimscampi 2020-02-23 21:14:38 +01:00
parent 4fdab1e8b6
commit 94cdd38de1
2 changed files with 41 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/assets/css/librarybrowser.css
View file

@ -439,10 +439,21 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 50vh;
position: relative;
}
.layout-desktop .itemBackdrop::after,
.layout-tv .itemBackdrop::after {
content: "";
width: 100%;
height: 100%;
background: #000000ad;
background: rgba(0, 0, 0, 0.65);
display: block;
}
.itemBackdrop.noBackdrop {
display: none;
}
@ -525,8 +536,6 @@
display: flex;
align-items: center;
align-content: center;
position: sticky;
top: 3.85em;
z-index: 2;
}
@ -536,13 +545,19 @@
top: 0;
}
.layout-tv .detailPagePrimaryContainer {
.layout-tv .detailPagePrimaryContainer:not(.noBackdrop),
.layout-desktop .detailPagePrimaryContainer:not(.noBackdrop) {
position: relative;
top: 0;
padding-left: 32.45vw;
}
.detailSticky {
background-color: #101010;
margin-top: -7.3em;
}
.detailSticky.noBackdrop {
margin-top: 0;
}
.infoWrapper {
@ -572,15 +587,15 @@
}
.detailImageContainer {
position: sticky;
top: 25%;
position: relative;
margin-top: -25vh;
float: left;
width: 22.786458333333332vw;
width: 25vw;
z-index: 3;
}
.layout-mobile .detailImageContainer,
.layout-tv .detailImageContainer {
position: relative;
.detailImageContainer.noBackdrop {
margin-top: 0;
}
.detailPagePrimaryContent {
@ -588,11 +603,11 @@
}
.detailLogo {
width: 25em;
height: 9.375em;
width: 67.25vw;
height: 14.5vh;
position: absolute;
top: 14.5%;
right: 10.5%;
top: 15vh;
right: 0;
-webkit-background-size: contain;
background-size: contain;
}
@ -623,8 +638,8 @@
.itemDetailImage {
width: 100% !important;
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-webkit-box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
}
div.itemDetailGalleryLink.defaultCardBackground {
@ -865,6 +880,10 @@ div.itemDetailGalleryLink.defaultCardBackground {
border-collapse: collapse;
}
.detailPageWrapperContainer.noBackdrop {
margin-top: 4em;
}
.mediaInfoStream {
margin: 0 3em 0 0;
display: inline-block;

6
src/controllers/itemdetailpage.js
View file

@ -515,6 +515,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
hasbackdrop = true;
} else {
itemBackdropElement.classList.add("noBackdrop");
page.querySelector(".detailPageWrapperContainer").add("noBackdrop");
itemBackdropElement.style.backgroundImage = "";
}
@ -530,6 +531,11 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
function reloadFromItem(instance, page, params, item, user) {
var context = params.context;
page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky");
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
page.querySelector(".detailSticky").classList.add("noBackdrop");
}
renderName(item, page.querySelector(".nameContainer"), false, context);
var apiClient = connectionManager.getApiClient(item.ServerId);
renderSeriesTimerEditor(page, item, apiClient, user);