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 noBackdrop pages

Browse source
This commit is contained in:
MrTimscampi 2020-02-29 20:14:21 +01:00
parent 94cdd38de1
commit 57bc5e5ee4
5 changed files with 46 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/fonts.css
View file

@ -29,7 +29,7 @@ h3 {
}
.layout-tv {
font-size: 2.5vh;
font-size: 130%;
}
.layout-mobile {

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

@ -454,19 +454,18 @@
display: block;
}
.itemBackdrop.noBackdrop {
.layout-desktop .noBackdrop .itemBackdrop,
.layout-tv .noBackdrop .itemBackdrop {
display: none;
}
.detailPageContent.noBackdrop {
margin-top: 6.75em;
.layout-desktop .noBackdrop .detailPageContent,
.layout-tv .noBackdrop .detailPageContent {
margin-top: 2.5em;
}
.layout-desktop .detailImageContainer.noBackdrop img {
margin-top: -2.5em;
}
.layout-tv .detailImageContainer.noBackdrop img {
.layout-desktop .noBackdrop .detailImageContainer img,
.layout-tv .noBackdrop .detailImageContainer img {
margin-top: 0;
}
@ -545,18 +544,20 @@
top: 0;
}
.layout-tv .detailPagePrimaryContainer:not(.noBackdrop),
.layout-desktop .detailPagePrimaryContainer:not(.noBackdrop) {
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
position: relative;
top: 0;
padding-left: 32.45vw;
}
.detailSticky {
margin-top: -7.3em;
.layout-desktop .detailSticky,
.layout-tv .detailSticky {
margin-top: -7.2em;
}
.detailSticky.noBackdrop {
.layout-desktop .noBackdrop .detailSticky,
.layout-tv .noBackdrop .detailSticky {
margin-top: 0;
}
@ -594,7 +595,8 @@
z-index: 3;
}
.detailImageContainer.noBackdrop {
.layout-desktop .noBackdrop .detailImageContainer,
.layout-tv .noBackdrop .detailImageContainer {
margin-top: 0;
}
@ -612,6 +614,10 @@
background-size: contain;
}
.noBackdrop .detailLogo {
display: none;
}
@media all and (max-width: 87.5em) {
.detailLogo {
right: 5%;
@ -666,6 +672,16 @@ div.itemDetailGalleryLink.defaultCardBackground {
position: relative;
}
.layout-desktop .detailPageWrapperContainer,
.layout-tv .detailPageWrapperContainer {
margin-top: 7.2em;
}
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
padding-left: 3.3%;
}
.btnPlaySimple {
display: none !important;
}
@ -880,7 +896,8 @@ div.itemDetailGalleryLink.defaultCardBackground {
border-collapse: collapse;
}
.detailPageWrapperContainer.noBackdrop {
.layout-desktop .noBackdrop .detailPageWrapperContainer,
.layout-tv .noBackdrop .detailPageWrapperContainer {
margin-top: 4em;
}

25
src/controllers/itemdetailpage.js
View file

@ -457,6 +457,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
var imgUrl;
var screenWidth = screen.availWidth;
var hasbackdrop = false;
console.debug(page);
var itemBackdropElement = page.querySelector("#itemBackdrop");
var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
item.MediaType && item.MediaType !== "Video" ||
@ -474,7 +475,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0,
tag: item.ImageTags.Thumb
});
itemBackdropElement.classList.remove("noBackdrop");
page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true;
} else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
@ -483,7 +484,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0,
tag: item.ImageTags.Primary
});
itemBackdropElement.classList.remove("noBackdrop");
page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true;
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
@ -492,7 +493,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0,
tag: item.BackdropImageTags[0]
});
itemBackdropElement.classList.remove("noBackdrop");
page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true;
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@ -501,7 +502,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0,
tag: item.ParentBackdropImageTags[0]
});
itemBackdropElement.classList.remove("noBackdrop");
page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true;
} else if (item.ImageTags && item.ImageTags.Thumb) {
@ -510,16 +511,15 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0,
tag: item.ImageTags.Thumb
});
itemBackdropElement.classList.remove("noBackdrop");
page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true;
} else {
itemBackdropElement.classList.add("noBackdrop");
page.querySelector(".detailPageWrapperContainer").add("noBackdrop");
itemBackdropElement.style.backgroundImage = "";
}
if ("Person" === item.Type) {
page.classList.add('noBackdrop');
itemBackdropElement.classList.add("personBackdrop");
} else {
itemBackdropElement.classList.remove("personBackdrop");
@ -532,10 +532,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
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);
@ -850,10 +846,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
}
}
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
elem.classList.add("noBackdrop");
}
if ("thumb" == shape) {
elem.classList.add("thumbDetailImageContainer");
elem.classList.remove("portraitDetailImageContainer");
@ -1064,9 +1056,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
function renderDetails(page, item, apiClient, context, isStatic) {
var taglineElement = page.querySelector(".detailPageContent");
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
taglineElement.classList.add("noBackdrop");
}
renderSimilarItems(page, item, context);
renderMoreFromSeason(page, item, apiClient);

4
src/itemdetails.html
View file

@ -1,5 +1,5 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop">
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
<i class="material-icons play_arrow"></i>
</button>

4
src/themes/dark/theme.css
View file

@ -201,6 +201,10 @@ html {
}
.detailSticky {
background: rgba(32, 32, 32, 0.8);
}
.noBackdrop .detailSticky {
background: #202020;
}