mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #611 from grafixeyehero/itemdetailpage-layout
Item detail page layout improvements
This commit is contained in:
dkanada
GitHub
commit
f805b45229
14 changed files with 302 additions and 355 deletions
|
|
@ -200,6 +200,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width:40em) {
|
||||
|
||||
.dashboardDocument .adminDrawerLogo,
|
||||
.dashboardDocument .mainDrawerButton {
|
||||
display: none !important
|
||||
|
|
@ -380,6 +381,8 @@
|
|||
|
||||
.itemBackdrop {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 50vh;
|
||||
position: relative
|
||||
}
|
||||
|
|
@ -391,23 +394,59 @@
|
|||
right: 0
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 15vh
|
||||
}
|
||||
|
||||
.desktopMiscInfoContainer {
|
||||
position: absolute;
|
||||
bottom: .75em
|
||||
}
|
||||
|
||||
.layout-mobile .detailPagePrimaryContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-tv .detailPagePrimaryContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detailPagePrimaryContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.infoWrapper {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.detailPageSecondaryContainer {
|
||||
margin: 1.25em 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.layout-mobile .detailImageContainer,
|
||||
.layout-tv .detailImageContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detailImageContainer {
|
||||
width: 280px;
|
||||
margin-right: 2em;
|
||||
flex-shrink: 0;
|
||||
margin: 1.25em 0;
|
||||
position: sticky;
|
||||
top: 15%;
|
||||
float: left;
|
||||
width: 22.786458333333332vw;
|
||||
}
|
||||
|
||||
.detailPagePrimaryContent {
|
||||
|
|
@ -416,11 +455,11 @@
|
|||
}
|
||||
|
||||
.detailLogo {
|
||||
width: 21.3em;
|
||||
height: 5em;
|
||||
width: 25em;
|
||||
height: 9.375em;
|
||||
position: absolute;
|
||||
top: 13.5%;
|
||||
right: 19.5%;
|
||||
top: 14.5%;
|
||||
right: 10.5%;
|
||||
background-size: contain
|
||||
}
|
||||
|
||||
|
|
@ -449,12 +488,8 @@
|
|||
}
|
||||
|
||||
.itemDetailImage {
|
||||
width: 100%;
|
||||
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
|
||||
}
|
||||
|
||||
.thumbDetailImageContainer {
|
||||
width: 400px
|
||||
width: 100% !important;
|
||||
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
|
||||
}
|
||||
|
||||
@media all and (max-width:62.5em) {
|
||||
|
|
@ -462,34 +497,11 @@
|
|||
position: relative
|
||||
}
|
||||
|
||||
.detailImageContainer {
|
||||
position: absolute;
|
||||
top: -90px;
|
||||
left: 5%;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.itemDetailImage {
|
||||
height: 120px;
|
||||
width: auto !important
|
||||
}
|
||||
|
||||
.btnPlaySimple {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width:62.5em) {
|
||||
.itemBackdrop {
|
||||
display: none
|
||||
}
|
||||
|
||||
.detailPagePrimaryContainer {
|
||||
display: flex;
|
||||
margin-bottom: 3em
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width:75em) {
|
||||
.lnkSibling {
|
||||
display: none !important
|
||||
|
|
@ -568,7 +580,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.recordingFields button {
|
||||
|
|
@ -629,11 +641,8 @@
|
|||
}
|
||||
|
||||
.detailImageProgressContainer {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 1px;
|
||||
left: 1px;
|
||||
text-align: center
|
||||
margin-left: 6px;
|
||||
width: 21.886458333333332vw;
|
||||
}
|
||||
|
||||
.detailButton-mobile-text {
|
||||
|
|
@ -653,7 +662,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width:62.5em) {
|
||||
.detailButton-mobile {
|
||||
.detailFloatingButton {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
|
|
@ -698,13 +707,11 @@
|
|||
.detailPageContent {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
padding-top: 3em
|
||||
}
|
||||
|
||||
@media all and (max-width:62.5em) {
|
||||
.detailPageContent-nodetailimg {
|
||||
padding-top: 0;
|
||||
margin-top: -3em
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
.emby-tab-button.show-focus:focus {
|
||||
/* these buttons are small so scale larger than usual */
|
||||
transform: scale(1.6) !important;
|
||||
transform: scale(1.3) !important;
|
||||
background: 0 !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -419,13 +419,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
var offset = parentNameLast ? ".25em" : ".5em";
|
||||
|
||||
if (html && !parentNameLast) {
|
||||
html += '<h3 class="itemName" style="margin: .25em 0 .5em;">' + name + '</h3>';
|
||||
html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
|
||||
} else {
|
||||
html = '<h1 class="itemName" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
|
||||
html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
|
||||
}
|
||||
|
||||
if (item.OriginalTitle && item.OriginalTitle != item.Name) {
|
||||
html += '<h4 class="itemName" style="margin: -' + offset + ' 0 0">' + item.OriginalTitle + '</h4>';
|
||||
html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0">' + item.OriginalTitle + '</h4>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
|
|
@ -801,10 +801,8 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
});
|
||||
}
|
||||
|
||||
html += '<div style="position:relative;">';
|
||||
|
||||
if (editable) {
|
||||
html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;padding:2px;margin:0;' href='#'>";
|
||||
html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin-top:.7em;padding:0' href='#'>";
|
||||
}
|
||||
|
||||
if (detectRatio && item.PrimaryImageAspectRatio) {
|
||||
|
|
@ -828,7 +826,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
html += progressHtml;
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
html += "</div>";
|
||||
elem.innerHTML = html;
|
||||
|
||||
|
|
@ -898,7 +895,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
|
||||
var html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: getThumbShape(false),
|
||||
shape: "overflowBackdrop",
|
||||
showTitle: true,
|
||||
displayAsSpecial: "Season" == item.Type && item.IndexNumber,
|
||||
overlayText: false,
|
||||
|
|
@ -1403,7 +1400,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
scrollX = enableScrollX();
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: getPortraitShape(),
|
||||
shape: "overflowPortrait",
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
|
|
@ -1422,7 +1419,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
if ("Episode" === item.Type) {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: getThumbShape(scrollX),
|
||||
shape: "overflowBackdrop",
|
||||
showTitle: true,
|
||||
displayAsSpecial: "Season" == item.Type && item.IndexNumber,
|
||||
playFromHere: true,
|
||||
|
|
@ -1861,7 +1858,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
|
|||
coverImage: true,
|
||||
serverId: item.ServerId,
|
||||
width: 160,
|
||||
shape: getPortraitShape()
|
||||
shape: "overflowPortrait"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
transform: scale(1.4);
|
||||
transform: scale(1.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
}
|
||||
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
transform: scale(1.6);
|
||||
transform: scale(1.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,11 +74,11 @@ _:-ms-input-placeholder {
|
|||
}
|
||||
|
||||
.mdl-slider:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.6);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
|
||||
transform: scale(1.6);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.slider-no-webkit-thumb::-webkit-slider-thumb {
|
||||
|
|
|
|||
|
|
@ -1,292 +1,235 @@
|
|||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
|
||||
|
||||
<style>
|
||||
@media all and (min-width: 62.5em) {
|
||||
|
||||
.itemBackdrop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
|
||||
<div class="itemBackdropFader">
|
||||
</div>
|
||||
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"><i class="md-icon">play_arrow</i></button>
|
||||
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
|
||||
<i class="md-icon">play_arrow</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="detailLogo"></div>
|
||||
|
||||
<div class="detailPageContent padded-bottom-page">
|
||||
|
||||
<div class="detailPagePrimaryContainer padded-left padded-right">
|
||||
<div class="detailImageContainer">
|
||||
<div class="detailPageWrapperContainer">
|
||||
<div class="detailPagePrimaryContainer appfooter-blurred padded-left padded-right">
|
||||
<div class="infoWrapper infoText">
|
||||
<div class="nameContainer"></div>
|
||||
<div class="itemMiscInfo itemMiscInfo-primary"></div>
|
||||
<div class="itemMiscInfo itemMiscInfo-secondary"></div>
|
||||
</div>
|
||||
<div class="detailPagePrimaryContent">
|
||||
|
||||
<div class="detailSection" style="margin-bottom: 0;">
|
||||
|
||||
<div class="nameContainer">
|
||||
|
||||
<div class="mainDetailButtons">
|
||||
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">play_arrow</i>
|
||||
<div class="detailButton-mobile-text">${ButtonResume}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="itemMiscInfo nativeName hide">
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" data-mode="play">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">play_arrow</i>
|
||||
<div class="detailButton-mobile-text">${ButtonPlay}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="itemMiscInfo itemMiscInfo-primary" style="margin: .7em 0;font-size:92%;">
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">get_app</i>
|
||||
<div class="detailButton-mobile-text">${ButtonDownload}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin: .7em 0;font-size:92%;">
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">theaters</i>
|
||||
<div class="detailButton-mobile-text">${ButtonTrailer}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="genres hide" style="margin: .7em 0;font-size:92%;">
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">shuffle</i>
|
||||
<div class="detailButton-mobile-text">${HeaderInstantMix}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="directors hide" style="margin: .7em 0;font-size:92%;">
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">shuffle</i>
|
||||
<div class="detailButton-mobile-text">${ButtonShuffle}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<form class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x" style="margin: .5em 0;font-size:92%; padding: 0;">
|
||||
<div class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
|
||||
<select is="emby-select" class="selectSource detailTrackSelect" label=""></select>
|
||||
<button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">delete</i>
|
||||
<div class="detailButton-mobile-text">${CancelSeries}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">stop</i>
|
||||
<div class="detailButton-mobile-text">${StopRecording}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">delete</i>
|
||||
<div class="detailButton-mobile-text">${Delete}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">check</i>
|
||||
<div class="detailButton-mobile-text button-text"></div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">favorite</i>
|
||||
<div class="detailButton-mobile-text button-text">${Rate}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">call_split</i>
|
||||
<div class="detailButton-mobile-text">${ButtonSplit}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon"></i>
|
||||
<div class="detailButton-mobile-text">${ButtonMore}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
|
||||
<div class="detailPageSecondaryContainer">
|
||||
<div class="detailPageContent">
|
||||
<div class="detailPagePrimaryContent padded-left padded-right">
|
||||
<div class="detailSection" style="margin-bottom: 0;">
|
||||
<div class="itemMiscInfo nativeName hide"></div>
|
||||
<div class="genres hide" style="margin: .7em 0;font-size:92%;"></div>
|
||||
<div class="directors hide" style="margin: .7em 0;font-size:92%;"></div>
|
||||
|
||||
<form class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x" style="margin: .5em 0;font-size:92%; padding: 0;">
|
||||
<div class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
|
||||
<select is="emby-select" class="selectSource detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
<div class="selectContainer selectContainer-inline selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
|
||||
<select is="emby-select" class="selectVideo detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
<div class="selectContainer selectContainer-inline selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
|
||||
<select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
<div class="selectContainer selectContainer-inline selectSubtitlesContainer hide trackSelectionFieldContainer">
|
||||
<select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="recordingFields hide" style="margin: .5em 0 1.5em;"></div>
|
||||
<div class="detailSectionContent">
|
||||
<div class="itemLastPlayed hide"></div>
|
||||
|
||||
<p class="itemGenres"></p>
|
||||
<h3 class="tagline"></h3>
|
||||
<p class="overview"></p>
|
||||
<p id="itemBirthday"></p>
|
||||
<p id="itemBirthLocation"></p>
|
||||
<p id="itemDeathDate"></p>
|
||||
<p id="seriesAirTime"></p>
|
||||
|
||||
<div class="itemTags hide" style="margin: .7em 0;font-size:92%;"></div>
|
||||
<div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;"></div>
|
||||
<div class="seriesRecordingEditor"></div>
|
||||
</div>
|
||||
<div class="selectContainer selectContainer-inline selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
|
||||
<select is="emby-select" class="selectVideo detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
<div class="selectContainer selectContainer-inline selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
|
||||
<select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
<div class="selectContainer selectContainer-inline selectSubtitlesContainer hide trackSelectionFieldContainer">
|
||||
<select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mainDetailButtons">
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnResume hide detailButton" data-mode="resume">
|
||||
<span>${ButtonResume}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnPlay hide detailButton" data-mode="play">
|
||||
<span>${ButtonPlay}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">get_app</i>
|
||||
<div class="detailButton-mobile-text">${ButtonDownload}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnDownload hide detailButton">
|
||||
<span>${ButtonDownload}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">theaters</i>
|
||||
<div class="detailButton-mobile-text">${ButtonTrailer}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnPlayTrailer hide detailButton">
|
||||
<span>${ButtonTrailer}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">shuffle</i>
|
||||
<div class="detailButton-mobile-text">${HeaderInstantMix}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnInstantMix hide detailButton">
|
||||
<span>${HeaderInstantMix}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">shuffle</i>
|
||||
<div class="detailButton-mobile-text">${ButtonShuffle}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnShuffle hide detailButton">
|
||||
<span>${ButtonShuffle}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">delete</i>
|
||||
<div class="detailButton-mobile-text">${CancelSeries}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnCancelSeriesTimer hide detailButton">
|
||||
<span>${CancelSeries}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">stop</i>
|
||||
<div class="detailButton-mobile-text">${StopRecording}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised btnCancelTimer hide detailButton">
|
||||
<span>${StopRecording}</span>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">delete</i>
|
||||
<div class="detailButton-mobile-text">${Delete}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="fab btnDeleteItem hide detailButton">
|
||||
<i class="md-icon">delete</i>
|
||||
</button>
|
||||
|
||||
<button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">check</i>
|
||||
<div class="detailButton-mobile-text button-text"></div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-playstatebutton" type="button" class="fab btnPlaystate hide detailButton">
|
||||
<i class="md-icon">check</i>
|
||||
</button>
|
||||
|
||||
<button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon">favorite</i>
|
||||
<div class="detailButton-mobile-text button-text">${Rate}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-ratingbutton" type="button" class="fab btnUserRating hide detailButton">
|
||||
<i class="md-icon">favorite</i>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="fab btnSplitVersions hide detailButton">
|
||||
<i class="md-icon">call_split</i>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
|
||||
<div class="detailButton-mobile-content">
|
||||
<i class="md-icon detailButton-mobile-icon"></i>
|
||||
<div class="detailButton-mobile-text">${ButtonMore}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button is="emby-button" type="button" class="fab btnMoreCommands hide detailButton">
|
||||
<i class="md-icon">more_horiz</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recordingFields hide" style="margin: .5em 0 1.5em;">
|
||||
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
|
||||
<h2 class="sectionTitle padded-left">${HeaderSchedule}</h2>
|
||||
<div class="seriesTimerSchedule padded-left padded-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="collectionItems"></div>
|
||||
|
||||
<div class="nextUpSection verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
|
||||
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="programGuideSection hide verticalSection detailVerticalSection">
|
||||
<div class="programGuide"></div>
|
||||
</div>
|
||||
|
||||
<div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
|
||||
<h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left">
|
||||
<span id="childrenTitle"></span>
|
||||
</h2>
|
||||
<div id="childrenContent">
|
||||
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detailSectionContent">
|
||||
<div class="itemLastPlayed hide"></div>
|
||||
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
|
||||
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
|
||||
</div>
|
||||
|
||||
<p class="itemGenres"></p>
|
||||
<h3 class="tagline"></h3>
|
||||
<p class="overview"></p>
|
||||
<p id="itemBirthday"></p>
|
||||
<p id="itemBirthLocation"></p>
|
||||
<p id="itemDeathDate"></p>
|
||||
<p id="seriesAirTime"></p>
|
||||
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="itemTags hide" style="margin: .7em 0;font-size:92%;">
|
||||
</div>
|
||||
<div class="verticalSection itemVerticalSection moreFromArtistSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;">
|
||||
</div>
|
||||
<div id="castCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seriesRecordingEditor">
|
||||
</div>
|
||||
<div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
|
||||
<div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
|
||||
<div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
|
||||
</div>
|
||||
|
||||
<div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
|
||||
<div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
|
||||
</div>
|
||||
|
||||
<div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
|
||||
<h2 class="sectionTitle padded-left">
|
||||
${HeaderSchedule}
|
||||
</h2>
|
||||
<div class="seriesTimerSchedule padded-left padded-right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="collectionItems"></div>
|
||||
<div class="nextUpSection verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
|
||||
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
|
||||
</div>
|
||||
<div class="programGuideSection hide verticalSection detailVerticalSection">
|
||||
<div class="programGuide"></div>
|
||||
</div>
|
||||
<div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
|
||||
<h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left">
|
||||
<span id="childrenTitle"></span>
|
||||
</h2>
|
||||
<div id="childrenContent">
|
||||
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
|
||||
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
|
||||
</div>
|
||||
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalSection itemVerticalSection moreFromArtistSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="castCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
|
||||
<div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-left padded-right"></div>
|
||||
</div>
|
||||
|
||||
<div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
|
||||
<div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
|
||||
</div>
|
||||
<div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
|
||||
<div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
|
||||
</div>
|
||||
|
||||
<div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
|
||||
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
|
||||
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
|
||||
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -127,6 +127,7 @@
|
|||
"ButtonSort": "Sort",
|
||||
"ButtonStart": "Start",
|
||||
"ButtonStop": "Stop",
|
||||
"ButtonSplit": "Split",
|
||||
"ButtonSubmit": "Submit",
|
||||
"ButtonSubtitles": "Subtitles",
|
||||
"ButtonTrailer": "Trailer",
|
||||
|
|
|
|||
|
|
@ -392,10 +392,6 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #E4E2DC)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #000;
|
||||
background: #fff3a5;
|
||||
|
|
|
|||
|
|
@ -398,10 +398,6 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #181818)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #ddd;
|
||||
background: #111;
|
||||
|
|
|
|||
|
|
@ -375,10 +375,6 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #101010)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #ddd;
|
||||
background: #111;
|
||||
|
|
|
|||
|
|
@ -375,10 +375,6 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #1a1a1a)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #ddd;
|
||||
background: #111;
|
||||
|
|
|
|||
|
|
@ -392,10 +392,6 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #000;
|
||||
background: #fff3a5;
|
||||
|
|
|
|||
|
|
@ -491,10 +491,6 @@ a[data-role=button] {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #181818)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #0e0f2d;
|
||||
background: #dbe6ff;
|
||||
|
|
@ -562,3 +558,30 @@ a[data-role=button] {
|
|||
.metadataSidebarIcon {
|
||||
color: #dbe6ff
|
||||
}
|
||||
|
||||
.personCard .overflowPortraitCard {
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.personCard .cardScalable {
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.personCard .cardPadder-overflowPortrait,
|
||||
.personCard .cardPadder-portrait {
|
||||
padding-bottom: 100%;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.personCard .coveredImage {
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
}
|
||||
|
||||
.personCard .cardOverlayContainer {
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
}
|
||||
|
||||
.personCard .cardOverlayButton-br {
|
||||
right: 20%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -377,10 +377,6 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.itemBackdropFader {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), #115E9E)
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #000;
|
||||
background: #fff3a5;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue