mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Rework details page for TV
This commit is contained in:
MrTimscampi
parent
350195b5bc
commit
ece0b39d70
9 changed files with 115 additions and 65 deletions
|
|
@ -28,6 +28,10 @@
|
|||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.layout-tv .itemDetailPage {
|
||||
padding-top: 4.2em !important;
|
||||
}
|
||||
|
||||
.standalonePage {
|
||||
padding-top: 4.5em !important;
|
||||
}
|
||||
|
|
@ -453,8 +457,7 @@
|
|||
height: 26.5vh;
|
||||
}
|
||||
|
||||
.layout-desktop .itemBackdrop::after,
|
||||
.layout-tv .itemBackdrop::after {
|
||||
.layout-desktop .itemBackdrop::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -462,8 +465,8 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .itemBackdrop,
|
||||
.layout-tv .noBackdrop .itemBackdrop {
|
||||
.layout-tv .itemBackdrop,
|
||||
.layout-desktop .noBackdrop .itemBackdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -630,6 +633,10 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.layout-tv .detailPagePrimaryContainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPagePrimaryContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -643,12 +650,16 @@
|
|||
padding-left: 32.45vw;
|
||||
}
|
||||
|
||||
.layout-desktop .detailRibbon,
|
||||
.layout-tv .detailRibbon {
|
||||
.layout-desktop .detailRibbon {
|
||||
margin-top: -7.2em;
|
||||
height: 7.2em;
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
margin-top: 0;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailRibbon,
|
||||
.layout-tv .noBackdrop .detailRibbon {
|
||||
margin-top: 0;
|
||||
|
|
@ -754,8 +765,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.layout-desktop .itemBackdrop,
|
||||
.layout-tv .itemBackdrop {
|
||||
.layout-desktop .itemBackdrop {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
|
|
@ -781,13 +791,8 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
|
||||
.emby-button.detailFloatingButton {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 3;
|
||||
top: 100%;
|
||||
left: 90%;
|
||||
margin: -2.2em 0 0 -2.2em;
|
||||
padding: 0.4em;
|
||||
font-size: 1.4em;
|
||||
margin-right: 0.5em !important;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
|
|
@ -850,7 +855,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
margin: 0 !important;
|
||||
padding: 0.5em 0.7em !important;
|
||||
padding: 0.7em 0.7em !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 29em) {
|
||||
|
|
@ -919,10 +924,6 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
|
||||
@media all and (min-width: 100em) {
|
||||
.detailFloatingButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.personBackdrop {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -931,6 +932,11 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
font-size: 108%;
|
||||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.layout-tv .mainDetailButtons {
|
||||
font-size: 108%;
|
||||
margin: 1em 0 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 50em) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div>
|
||||
</div>
|
||||
|
||||
<div class="mainDetailButtons">
|
||||
<div class="mainDetailButtons focuscontainer-x">
|
||||
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" title="${ButtonResume}" data-mode="resume">
|
||||
<div class="detailButton-content">
|
||||
<span class="material-icons detailButton-icon play_arrow"></span>
|
||||
|
|
@ -95,17 +95,17 @@
|
|||
<div class="itemDetailsGroup">
|
||||
<div class="detailsGroupItem genresGroup hide">
|
||||
<div class="genresLabel label"></div>
|
||||
<div class="genres content"></div>
|
||||
<div class="genres content focuscontainer-x"></div>
|
||||
</div>
|
||||
|
||||
<div class="detailsGroupItem directorsGroup hide">
|
||||
<div class="directorsLabel label"></div>
|
||||
<div class="directors content"></div>
|
||||
<div class="directors content focuscontainer-x"></div>
|
||||
</div>
|
||||
|
||||
<div class="detailsGroupItem writersGroup hide">
|
||||
<div class="writersLabel label"></div>
|
||||
<div class="writers content"></div>
|
||||
<div class="writers content focuscontainer-x"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -139,8 +139,8 @@
|
|||
<p id="itemDeathDate"></p>
|
||||
<p id="seriesAirTime"></p>
|
||||
|
||||
<div class="itemTags hide" style="margin: 0.7em 0; font-size: 92%;"></div>
|
||||
<div class="itemExternalLinks hide" style="margin: 0.7em 0; font-size: 92%;"></div>
|
||||
<div class="itemTags focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
|
||||
<div class="itemExternalLinks focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
|
||||
<div class="seriesRecordingEditor"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -383,7 +383,7 @@ import 'emby-select';
|
|||
itemType: 'MusicArtist',
|
||||
serverId: serverId
|
||||
});
|
||||
html.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + href + '">' + artist.Name + '</a>');
|
||||
html.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + href + '">' + artist.Name + '</a>');
|
||||
}
|
||||
|
||||
return html.join(' / ');
|
||||
|
|
@ -416,7 +416,7 @@ import 'emby-select';
|
|||
}, {
|
||||
context: context
|
||||
});
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
|
||||
} else if (item.IsSeries || item.EpisodeTitle) {
|
||||
parentNameHtml.push(item.Name);
|
||||
}
|
||||
|
|
@ -431,7 +431,7 @@ import 'emby-select';
|
|||
}, {
|
||||
context: context
|
||||
});
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
|
||||
} else if (item.ParentIndexNumber != null && item.Type === 'Episode') {
|
||||
parentRoute = appRouter.getRouteUrl({
|
||||
Id: item.SeasonId,
|
||||
|
|
@ -442,7 +442,7 @@ import 'emby-select';
|
|||
}, {
|
||||
context: context
|
||||
});
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeasonName + '</a>');
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeasonName + '</a>');
|
||||
} else if (item.ParentIndexNumber != null && item.IsSeries) {
|
||||
parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber);
|
||||
} else if (item.Album && item.AlbumId && (item.Type === 'MusicVideo' || item.Type === 'Audio')) {
|
||||
|
|
@ -455,7 +455,7 @@ import 'emby-select';
|
|||
}, {
|
||||
context: context
|
||||
});
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.Album + '</a>');
|
||||
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.Album + '</a>');
|
||||
} else if (item.Album) {
|
||||
parentNameHtml.push(item.Album);
|
||||
}
|
||||
|
|
@ -572,9 +572,13 @@ import 'emby-select';
|
|||
|
||||
// Start rendering the artwork first
|
||||
renderImage(page, item);
|
||||
|
||||
// Same some screen real estate in TV mode
|
||||
if (!layoutManager.tv) {
|
||||
renderLogo(page, item, apiClient);
|
||||
renderBackdrop(item);
|
||||
renderDetailPageBackdrop(page, item, apiClient);
|
||||
}
|
||||
renderBackdrop(item);
|
||||
|
||||
// Render the main information for the item
|
||||
page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon');
|
||||
|
|
@ -766,6 +770,9 @@ import 'emby-select';
|
|||
|
||||
elem.innerHTML = cardHtml;
|
||||
imageLoader.lazyChildren(elem);
|
||||
|
||||
// Avoid breaking the design by preventing focus of the poster using the keyboard.
|
||||
elem.querySelector('button').tabIndex = -1;
|
||||
}
|
||||
|
||||
function renderImage(page, item) {
|
||||
|
|
@ -1061,7 +1068,12 @@ import 'emby-select';
|
|||
renderOverview(page, item);
|
||||
renderMiscInfo(page, item);
|
||||
reloadUserDataButtons(page, item);
|
||||
|
||||
// Don't allow redirection to other websites from the TV layout
|
||||
if (!layoutManager.tv) {
|
||||
renderLinks(page, item);
|
||||
}
|
||||
|
||||
renderTags(page, item);
|
||||
renderSeriesAirTime(page, item, isStatic);
|
||||
}
|
||||
|
|
@ -1672,12 +1684,6 @@ import 'emby-select';
|
|||
hideAll(page, 'btnPlay', false);
|
||||
hideAll(page, 'btnShuffle', false);
|
||||
}
|
||||
|
||||
// HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem
|
||||
// FIXME: Sometimes focus does not move until all (?) sections are loaded
|
||||
import('autoFocuser').then(({default: autoFocuser}) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
}
|
||||
|
||||
function renderCollectionItemType(page, parentItem, type, items) {
|
||||
|
|
@ -1982,7 +1988,16 @@ import 'emby-select';
|
|||
let currentItem;
|
||||
const self = this;
|
||||
const apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient;
|
||||
view.querySelectorAll('.btnPlay');
|
||||
|
||||
const btnResume = view.querySelector('.mainDetailButtons .btnResume');
|
||||
const btnPlay = view.querySelector('.mainDetailButtons .btnPlay');
|
||||
if (layoutManager.tv && !btnResume.classList.contains('hide')) {
|
||||
btnResume.classList.add('fab');
|
||||
btnResume.classList.add('detailFloatingButton');
|
||||
} else if (layoutManager.tv && btnResume.classList.contains('hide')) {
|
||||
btnPlay.classList.add('fab');
|
||||
btnPlay.classList.add('detailFloatingButton');
|
||||
}
|
||||
bindAll(view, '.btnPlay', 'click', onPlayClick);
|
||||
bindAll(view, '.btnResume', 'click', onPlayClick);
|
||||
bindAll(view, '.btnInstantMix', 'click', onInstantMixClick);
|
||||
|
|
|
|||
|
|
@ -23,17 +23,17 @@ html {
|
|||
.skinHeader-withBackground {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background: #303030;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
|
||||
background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-dark.png);
|
||||
}
|
||||
|
|
@ -238,12 +238,13 @@ html {
|
|||
|
||||
.detailRibbon {
|
||||
background: #303030;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
|
||||
background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #f8f8f8;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
|
|
|
|||
|
|
@ -21,22 +21,20 @@ html {
|
|||
|
||||
.skinHeader-withBackground {
|
||||
background: #303030;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#291a31), color-stop(#033664), color-stop(#011432), color-stop(#141a3a), to(#291a31));
|
||||
background: -webkit-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
background: -o-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
|
@ -235,6 +233,10 @@ html {
|
|||
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(30, 30, 30, 0.9);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,10 @@ html {
|
|||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
|
@ -211,6 +215,10 @@ html {
|
|||
background: rgba(32, 32, 32, 0.8);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.noBackdrop .detailRibbon {
|
||||
background: #202020;
|
||||
}
|
||||
|
|
@ -458,3 +466,8 @@ html {
|
|||
background-color: #00a4dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layout-tv .emby-button.detailFloatingButton:focus {
|
||||
background-color: #f2f2f2;
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@ html {
|
|||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
|
@ -237,6 +241,10 @@ html {
|
|||
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,21 +17,20 @@ html {
|
|||
|
||||
.skinHeader-withBackground {
|
||||
background: #000420;
|
||||
background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
background: -webkit-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
|
@ -322,6 +321,10 @@ a[data-role=button] {
|
|||
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(30, 30, 30, 0.9);
|
||||
|
|
|
|||
|
|
@ -26,9 +26,6 @@ html {
|
|||
|
||||
.formDialogHeader:not(.formDialogHeader-clear),
|
||||
.skinHeader-withBackground {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0c2450), to(#081b3b));
|
||||
background: -webkit-linear-gradient(top, #0c2450, #081b3b);
|
||||
background: -o-linear-gradient(top, #0c2450, #081b3b);
|
||||
background: linear-gradient(to bottom, #0c2450, #081b3b);
|
||||
background-color: #0c2450;
|
||||
}
|
||||
|
|
@ -36,13 +33,14 @@ html {
|
|||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
|
@ -217,6 +215,10 @@ html {
|
|||
background-color: #081b3b;
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue