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 { .layout-tv {
font-size: 2.5vh; font-size: 130%;
} }
.layout-mobile { .layout-mobile {

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

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

25
src/controllers/itemdetailpage.js
View file

@ -457,6 +457,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
var imgUrl; var imgUrl;
var screenWidth = screen.availWidth; var screenWidth = screen.availWidth;
var hasbackdrop = false; var hasbackdrop = false;
console.debug(page);
var itemBackdropElement = page.querySelector("#itemBackdrop"); var itemBackdropElement = page.querySelector("#itemBackdrop");
var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
item.MediaType && item.MediaType !== "Video" || item.MediaType && item.MediaType !== "Video" ||
@ -474,7 +475,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0, index: 0,
tag: item.ImageTags.Thumb tag: item.ImageTags.Thumb
}); });
itemBackdropElement.classList.remove("noBackdrop"); page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false); imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) { } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
@ -483,7 +484,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0, index: 0,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}); });
itemBackdropElement.classList.remove("noBackdrop"); page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false); imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} else if (item.BackdropImageTags && item.BackdropImageTags.length) { } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
@ -492,7 +493,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0, index: 0,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}); });
itemBackdropElement.classList.remove("noBackdrop"); page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false); imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@ -501,7 +502,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0, index: 0,
tag: item.ParentBackdropImageTags[0] tag: item.ParentBackdropImageTags[0]
}); });
itemBackdropElement.classList.remove("noBackdrop"); page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false); imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} else if (item.ImageTags && item.ImageTags.Thumb) { } else if (item.ImageTags && item.ImageTags.Thumb) {
@ -510,16 +511,15 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
index: 0, index: 0,
tag: item.ImageTags.Thumb tag: item.ImageTags.Thumb
}); });
itemBackdropElement.classList.remove("noBackdrop"); page.classList.remove("noBackdrop");
imageLoader.lazyImage(itemBackdropElement, imgUrl, false); imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} else { } else {
itemBackdropElement.classList.add("noBackdrop");
page.querySelector(".detailPageWrapperContainer").add("noBackdrop");
itemBackdropElement.style.backgroundImage = ""; itemBackdropElement.style.backgroundImage = "";
} }
if ("Person" === item.Type) { if ("Person" === item.Type) {
page.classList.add('noBackdrop');
itemBackdropElement.classList.add("personBackdrop"); itemBackdropElement.classList.add("personBackdrop");
} else { } else {
itemBackdropElement.classList.remove("personBackdrop"); itemBackdropElement.classList.remove("personBackdrop");
@ -532,10 +532,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
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);
@ -850,10 +846,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
} }
} }
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
elem.classList.add("noBackdrop");
}
if ("thumb" == shape) { if ("thumb" == shape) {
elem.classList.add("thumbDetailImageContainer"); elem.classList.add("thumbDetailImageContainer");
elem.classList.remove("portraitDetailImageContainer"); elem.classList.remove("portraitDetailImageContainer");
@ -1064,9 +1056,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
function renderDetails(page, item, apiClient, context, isStatic) { function renderDetails(page, item, apiClient, context, isStatic) {
var taglineElement = page.querySelector(".detailPageContent"); var taglineElement = page.querySelector(".detailPageContent");
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
taglineElement.classList.add("noBackdrop");
}
renderSimilarItems(page, item, context); renderSimilarItems(page, item, context);
renderMoreFromSeason(page, item, apiClient); 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="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop noBackdrop"> <div id="itemBackdrop" class="itemBackdrop">
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"> <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
<i class="material-icons play_arrow"></i> <i class="material-icons play_arrow"></i>
</button> </button>

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

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