mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
consolidated detail page sections
This commit is contained in:
Luke Pulverenti
parent
2ed61b3c51
commit
e9b03f82ff
3 changed files with 82 additions and 96 deletions
|
|
@ -202,15 +202,15 @@
|
|||
}
|
||||
|
||||
.criticRatingSummary {
|
||||
background-color: #FFE482!important;
|
||||
background-color: rgba(255,228,130,0.7);
|
||||
background-color: #ffe482!important;
|
||||
background-color: rgba(255,228,130,0.85)!important;
|
||||
color: #000!important;
|
||||
}
|
||||
|
||||
.criticRatingScore {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin: .5em 0;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.itemTag {
|
||||
|
|
@ -362,21 +362,22 @@ a.itemTag:hover {
|
|||
background: #666 no-repeat center;
|
||||
}
|
||||
|
||||
.detailSection {
|
||||
vertical-align: top;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.detailSectionHeader {
|
||||
padding: .5em 1em;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: 1px solid #181818;
|
||||
background: #222;
|
||||
margin-top: 2em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detailSectionContent {
|
||||
}
|
||||
|
||||
@media all and (max-width: 750px) {
|
||||
|
||||
.itemBackdrop {
|
||||
|
|
@ -519,26 +520,21 @@ a.itemTag:hover {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.itemMediaInfo {
|
||||
padding-left: .5em;
|
||||
}
|
||||
|
||||
.mediaInfoStream {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 2em;
|
||||
margin: 1em 0;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.mediaInfoStreamType {
|
||||
border-bottom: 1px solid #555;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: .5em;
|
||||
margin-right: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mediaInfoAttribute {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mediaInfoDetails {
|
||||
margin: 0 0 0 .25em;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.mediaInfoLabel {
|
||||
|
|
|
|||
|
|
@ -120,35 +120,33 @@
|
|||
</div>
|
||||
<div data-role="content">
|
||||
<div class="detailPageContent">
|
||||
<div id="detailSection" style="display: none;">
|
||||
|
||||
<div style="display: inline-block;">
|
||||
<div id="detailsSection" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader" style="margin-top: 0;">
|
||||
Details
|
||||
</div>
|
||||
<div class="detailSectionContent" style="padding: 0 1em;">
|
||||
|
||||
<div id="mediaInfoContent"></div>
|
||||
<p id="seriesAirTime"></p>
|
||||
<p id="itemPremiereDate"></p>
|
||||
<p class="itemStudios"></p>
|
||||
<p class="itemExternalLinks"></p>
|
||||
|
||||
<p id="itemBudget"></p>
|
||||
<p id="itemRevenue"></p>
|
||||
<p class="itemStudios"></p>
|
||||
<p class="itemExternalLinks"></p>
|
||||
<div class="mediaInfo"></div>
|
||||
<p class="itemTags"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: inline-block;" class="detailSection">
|
||||
<div id="childrenCollapsible" class="hide">
|
||||
<div class="detailSectionHeader"><span id="childrenTitle"></span></div>
|
||||
<div id="childrenContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
<div style="display: inline-block; vertical-align: top;">
|
||||
<div id="mediaInfoCollapsible" style="display: none;">
|
||||
<div class="detailSectionHeader">
|
||||
Media Info
|
||||
</div>
|
||||
<div id="mediaInfoContent" class="itemMediaInfo detailSectionContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: inline-block; vertical-align: top;">
|
||||
<div style="display: inline-block;" class="detailSection">
|
||||
<div id="trailersCollapsible" style="display: none;">
|
||||
<div class="detailSectionHeader">
|
||||
Trailers
|
||||
|
|
@ -156,7 +154,7 @@
|
|||
<div id="trailersContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: inline-block; vertical-align: top;">
|
||||
<div style="display: inline-block;" class="detailSection">
|
||||
<div id="specialsCollapsible" style="display: none;">
|
||||
<div class="detailSectionHeader">
|
||||
Special Features
|
||||
|
|
@ -164,25 +162,25 @@
|
|||
<div id="specialsContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="castCollapsible" style="display: none;">
|
||||
<div id="castCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
Cast & Crew
|
||||
</div>
|
||||
<div id="castContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
<div id="similarCollapsible" style="display: none;">
|
||||
<div id="similarCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
Similar
|
||||
</div>
|
||||
<div id="similarContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
<div id="galleryCollapsible" style="display: none;">
|
||||
<div id="galleryCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
Gallery
|
||||
</div>
|
||||
<div id="galleryContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
<div id="criticReviewsCollapsible" style="display: none;">
|
||||
<div id="criticReviewsCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
What the Critics Say
|
||||
</div>
|
||||
|
|
@ -192,27 +190,26 @@
|
|||
<div class="reviewScore">
|
||||
<img src="css/images/fresh.png">
|
||||
</div>
|
||||
<div>TOMATOMETER</div>
|
||||
<div class="criticRatingScore"></div>
|
||||
<div class="criticRatingSummaryText"></div>
|
||||
</div>
|
||||
<div id="criticReviewsContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scenesCollapsible" style="display: none;">
|
||||
<div id="scenesCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
Scenes
|
||||
</div>
|
||||
<div id="scenesContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
<div id="themeSongsCollapsible" style="display: none;">
|
||||
<div id="themeSongsCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
Theme Songs
|
||||
</div>
|
||||
<div id="themeSongsContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
|
||||
<div id="themeVideosCollapsible" style="display: none;">
|
||||
<div id="themeVideosCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
Theme Videos
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -132,10 +132,7 @@
|
|||
$('#galleryCollapsible', page).hide();
|
||||
}
|
||||
|
||||
if (!item.MediaStreams || !item.MediaStreams.length) {
|
||||
$('#mediaInfoCollapsible', page).hide();
|
||||
} else {
|
||||
$('#mediaInfoCollapsible', page).show();
|
||||
if (item.MediaStreams && item.MediaStreams.length) {
|
||||
renderMediaInfo(page, item);
|
||||
}
|
||||
if (!item.Chapters || !item.Chapters.length) {
|
||||
|
|
@ -222,13 +219,14 @@
|
|||
|
||||
renderTags(page, item);
|
||||
|
||||
var elem = $('.detailSectionContent', page)[0];
|
||||
var detailsSection = $('#detailsSection', page);
|
||||
var elem = $('.detailSectionContent', detailsSection)[0];
|
||||
var text = elem.textContent || elem.innerText;
|
||||
|
||||
if (!text.trim()) {
|
||||
$('#detailSection', page).hide();
|
||||
detailsSection.hide();
|
||||
} else {
|
||||
$('#detailSection', page).show();
|
||||
detailsSection.show();
|
||||
}
|
||||
|
||||
renderSeriesAirTime(page, item, context);
|
||||
|
|
@ -250,7 +248,7 @@
|
|||
ApiClient.getSimilarItems(item.Id, {
|
||||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
limit: 8
|
||||
limit: item.Type == "MusicAlbum" ? 6 : 8
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
|
|
@ -567,73 +565,68 @@
|
|||
|
||||
html += '<div class="mediaInfoStream">';
|
||||
|
||||
html += '<p class="mediaInfoStreamType">' + type + '</p>';
|
||||
html += '<span class="mediaInfoStreamType">' + type + ':</span>';
|
||||
|
||||
html += '<ul class="mediaInfoDetails">';
|
||||
var attributes = [];
|
||||
|
||||
if (stream.Codec) {
|
||||
html += '<li><span class="mediaInfoLabel">Codec: </span> ' + stream.Codec + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.Codec + '</span>');
|
||||
}
|
||||
if (stream.Profile) {
|
||||
html += '<li><span class="mediaInfoLabel">Profile: </span> ' + stream.Profile + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.Profile + '</span>');
|
||||
}
|
||||
if (stream.Level) {
|
||||
html += '<li><span class="mediaInfoLabel">Level: </span> ' + stream.Level + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">Level ' + stream.Level + '</span>');
|
||||
}
|
||||
if (stream.Language) {
|
||||
html += '<li><span class="mediaInfoLabel">Language: </span> ' + stream.Language + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.Language + '</span>');
|
||||
}
|
||||
|
||||
if (stream.Width) {
|
||||
html += '<li><span class="mediaInfoLabel">Width: </span> ' + stream.Width + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.Width + '</span>');
|
||||
}
|
||||
|
||||
if (stream.Height) {
|
||||
html += '<li><span class="mediaInfoLabel">Height: </span> ' + stream.Height + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.Height + '</span>');
|
||||
}
|
||||
|
||||
if (stream.AspectRatio) {
|
||||
html += '<li><span class="mediaInfoLabel">Aspect Ratio: </span> ' + stream.AspectRatio + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.AspectRatio + '</span>');
|
||||
}
|
||||
|
||||
if (stream.BitRate) {
|
||||
html += '<li><span class="mediaInfoLabel">Bitrate: </span> <span class="autoNumeric" data-a-pad="false">' + (parseInt(stream.BitRate / 1000)) + ' kbps</span></li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + (parseInt(stream.BitRate / 1000)) + ' kbps</span>');
|
||||
}
|
||||
|
||||
if (stream.Channels) {
|
||||
html += '<li><span class="mediaInfoLabel">Channels: </span> ' + stream.Channels + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.Channels + ' ch</span>');
|
||||
}
|
||||
|
||||
if (stream.SampleRate) {
|
||||
html += '<li><span class="mediaInfoLabel">Sample Rate: </span> <span class="autoNumeric" data-a-pad="false">' + stream.SampleRate + ' khz</span></li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.SampleRate + ' khz</span>');
|
||||
}
|
||||
|
||||
var framerate = stream.AverageFrameRate || stream.RealFrameRate;
|
||||
|
||||
if (framerate) {
|
||||
html += '<li><span class="mediaInfoLabel">Framerate: </span> ' + framerate + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + framerate + '</span>');
|
||||
}
|
||||
|
||||
if (stream.PixelFormat) {
|
||||
html += '<li><span class="mediaInfoLabel">Pixel Format: </span> ' + stream.PixelFormat + '</li>';
|
||||
attributes.push('<span class="mediaInfoAttribute">' + stream.PixelFormat + '</span>');
|
||||
}
|
||||
|
||||
if (stream.IsDefault || stream.IsForced || stream.IsExternal) {
|
||||
|
||||
var vals = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
vals.push("Default");
|
||||
attributes.push('<span class="mediaInfoAttribute">Default</span>');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
vals.push("Forced");
|
||||
attributes.push('<span class="mediaInfoAttribute">Forced</span>');
|
||||
}
|
||||
if (stream.IsExternal) {
|
||||
vals.push("External");
|
||||
attributes.push('<span class="mediaInfoAttribute">External</span>');
|
||||
}
|
||||
|
||||
html += '<li><span class="mediaInfoLabel">Flags: </span> ' + vals.join(", ") + '</li>';
|
||||
}
|
||||
|
||||
if (stream.Path) {
|
||||
html += '<li><span class="mediaInfoLabel">Path: </span> ' + stream.Path + '</li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
html += attributes.join(' • ');
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue