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

6
src/controllers/itemdetailpage.js
View file

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