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

consolidated detail page sections

Browse source
This commit is contained in:
Luke Pulverenti 2013-05-15 23:39:15 -04:00
parent 2ed61b3c51
commit e9b03f82ff
3 changed files with 82 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

36
dashboard-ui/css/librarybrowser.css
View file

@ -202,15 +202,15 @@
} }
.criticRatingSummary { .criticRatingSummary {
background-color: #FFE482!important; background-color: #ffe482!important;
background-color: rgba(255,228,130,0.7); background-color: rgba(255,228,130,0.85)!important;
color: #000!important; color: #000!important;
} }
.criticRatingScore { .criticRatingScore {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
margin: .5em 0; margin-bottom: .5em;
} }
.itemTag { .itemTag {
@ -362,21 +362,22 @@ a.itemTag:hover {
background: #666 no-repeat center; background: #666 no-repeat center;
} }
.detailSection {
vertical-align: top;
margin-bottom: 3em;
}
.detailSectionHeader { .detailSectionHeader {
padding: .5em 1em; padding: .5em 1em;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
border: 1px solid #181818; border: 1px solid #181818;
background: #222; background: #222;
margin-top: 2em;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.detailSectionContent {
}
@media all and (max-width: 750px) { @media all and (max-width: 750px) {
.itemBackdrop { .itemBackdrop {
@ -519,26 +520,21 @@ a.itemTag:hover {
overflow: hidden; overflow: hidden;
} }
.itemMediaInfo {
padding-left: .5em;
}
.mediaInfoStream { .mediaInfoStream {
display: inline-block; margin: 1em 0;
vertical-align: top; color: #bbb;
margin-right: 2em;
} }
.mediaInfoStreamType { .mediaInfoStreamType {
border-bottom: 1px solid #555; margin-right: 1em;
padding-bottom: 5px; color: #fff;
margin-bottom: .5em; }
.mediaInfoAttribute {
color: #fff;
} }
.mediaInfoDetails { .mediaInfoDetails {
margin: 0 0 0 .25em;
padding: 0;
list-style-type: none;
} }
.mediaInfoLabel { .mediaInfoLabel {

39
dashboard-ui/itemdetails.html
View file

@ -120,35 +120,33 @@
</div> </div>
<div data-role="content"> <div data-role="content">
<div class="detailPageContent"> <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;"> <div class="detailSectionHeader" style="margin-top: 0;">
Details Details
</div> </div>
<div class="detailSectionContent" style="padding: 0 1em;"> <div class="detailSectionContent" style="padding: 0 1em;">
<div id="mediaInfoContent"></div>
<p id="seriesAirTime"></p> <p id="seriesAirTime"></p>
<p id="itemPremiereDate"></p> <p id="itemPremiereDate"></p>
<p class="itemStudios"></p>
<p class="itemExternalLinks"></p>
<p id="itemBudget"></p> <p id="itemBudget"></p>
<p id="itemRevenue"></p> <p id="itemRevenue"></p>
<p class="itemStudios"></p>
<p class="itemExternalLinks"></p>
<div class="mediaInfo"></div>
<p class="itemTags"></p> <p class="itemTags"></p>
</div> </div>
</div> </div>
</div>
<div style="display: inline-block;" class="detailSection">
<div id="childrenCollapsible" class="hide"> <div id="childrenCollapsible" class="hide">
<div class="detailSectionHeader"><span id="childrenTitle"></span></div> <div class="detailSectionHeader"><span id="childrenTitle"></span></div>
<div id="childrenContent" class="detailSectionContent"></div> <div id="childrenContent" class="detailSectionContent"></div>
</div> </div>
<div style="display: inline-block; vertical-align: top;">
<div id="mediaInfoCollapsible" style="display: none;">
<div class="detailSectionHeader">
Media Info
</div> </div>
<div id="mediaInfoContent" class="itemMediaInfo detailSectionContent"></div> <div style="display: inline-block;" class="detailSection">
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div id="trailersCollapsible" style="display: none;"> <div id="trailersCollapsible" style="display: none;">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Trailers Trailers
@ -156,7 +154,7 @@
<div id="trailersContent" class="detailSectionContent"></div> <div id="trailersContent" class="detailSectionContent"></div>
</div> </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 id="specialsCollapsible" style="display: none;">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Special Features Special Features
@ -164,25 +162,25 @@
<div id="specialsContent" class="detailSectionContent"></div> <div id="specialsContent" class="detailSectionContent"></div>
</div> </div>
</div> </div>
<div id="castCollapsible" style="display: none;"> <div id="castCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Cast & Crew Cast & Crew
</div> </div>
<div id="castContent" class="detailSectionContent"></div> <div id="castContent" class="detailSectionContent"></div>
</div> </div>
<div id="similarCollapsible" style="display: none;"> <div id="similarCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Similar Similar
</div> </div>
<div id="similarContent" class="detailSectionContent"></div> <div id="similarContent" class="detailSectionContent"></div>
</div> </div>
<div id="galleryCollapsible" style="display: none;"> <div id="galleryCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Gallery Gallery
</div> </div>
<div id="galleryContent" class="detailSectionContent"></div> <div id="galleryContent" class="detailSectionContent"></div>
</div> </div>
<div id="criticReviewsCollapsible" style="display: none;"> <div id="criticReviewsCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
What the Critics Say What the Critics Say
</div> </div>
@ -192,27 +190,26 @@
<div class="reviewScore"> <div class="reviewScore">
<img src="css/images/fresh.png"> <img src="css/images/fresh.png">
</div> </div>
<div>TOMATOMETER</div>
<div class="criticRatingScore"></div> <div class="criticRatingScore"></div>
<div class="criticRatingSummaryText"></div> <div class="criticRatingSummaryText"></div>
</div> </div>
<div id="criticReviewsContent" class="detailSectionContent"></div> <div id="criticReviewsContent" class="detailSectionContent"></div>
</div> </div>
</div> </div>
<div id="scenesCollapsible" style="display: none;"> <div id="scenesCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Scenes Scenes
</div> </div>
<div id="scenesContent" class="detailSectionContent"></div> <div id="scenesContent" class="detailSectionContent"></div>
</div> </div>
<div id="themeSongsCollapsible" style="display: none;"> <div id="themeSongsCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Theme Songs Theme Songs
</div> </div>
<div id="themeSongsContent" class="detailSectionContent"></div> <div id="themeSongsContent" class="detailSectionContent"></div>
</div> </div>
<div id="themeVideosCollapsible" style="display: none;"> <div id="themeVideosCollapsible" style="display: none;" class="detailSection">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
Theme Videos Theme Videos
</div> </div>

67
dashboard-ui/scripts/Itemdetailpage.js
View file

@ -132,10 +132,7 @@
$('#galleryCollapsible', page).hide(); $('#galleryCollapsible', page).hide();
} }
if (!item.MediaStreams || !item.MediaStreams.length) { if (item.MediaStreams && item.MediaStreams.length) {
$('#mediaInfoCollapsible', page).hide();
} else {
$('#mediaInfoCollapsible', page).show();
renderMediaInfo(page, item); renderMediaInfo(page, item);
} }
if (!item.Chapters || !item.Chapters.length) { if (!item.Chapters || !item.Chapters.length) {
@ -222,13 +219,14 @@
renderTags(page, item); renderTags(page, item);
var elem = $('.detailSectionContent', page)[0]; var detailsSection = $('#detailsSection', page);
var elem = $('.detailSectionContent', detailsSection)[0];
var text = elem.textContent || elem.innerText; var text = elem.textContent || elem.innerText;
if (!text.trim()) { if (!text.trim()) {
$('#detailSection', page).hide(); detailsSection.hide();
} else { } else {
$('#detailSection', page).show(); detailsSection.show();
} }
renderSeriesAirTime(page, item, context); renderSeriesAirTime(page, item, context);
@ -250,7 +248,7 @@
ApiClient.getSimilarItems(item.Id, { ApiClient.getSimilarItems(item.Id, {
userId: Dashboard.getCurrentUserId(), userId: Dashboard.getCurrentUserId(),
limit: 8 limit: item.Type == "MusicAlbum" ? 6 : 8
}).done(function (result) { }).done(function (result) {
@ -567,73 +565,68 @@
html += '<div class="mediaInfoStream">'; 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) { if (stream.Codec) {
html += '<li><span class="mediaInfoLabel">Codec: </span> ' + stream.Codec + '</li>'; attributes.push('<span class="mediaInfoAttribute">' + stream.Codec + '</span>');
} }
if (stream.Profile) { if (stream.Profile) {
html += '<li><span class="mediaInfoLabel">Profile: </span> ' + stream.Profile + '</li>'; attributes.push('<span class="mediaInfoAttribute">' + stream.Profile + '</span>');
} }
if (stream.Level) { 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) { if (stream.Language) {
html += '<li><span class="mediaInfoLabel">Language: </span> ' + stream.Language + '</li>'; attributes.push('<span class="mediaInfoAttribute">' + stream.Language + '</span>');
} }
if (stream.Width) { if (stream.Width) {
html += '<li><span class="mediaInfoLabel">Width: </span> ' + stream.Width + '</li>'; attributes.push('<span class="mediaInfoAttribute">' + stream.Width + '</span>');
} }
if (stream.Height) { if (stream.Height) {
html += '<li><span class="mediaInfoLabel">Height: </span> ' + stream.Height + '</li>'; attributes.push('<span class="mediaInfoAttribute">' + stream.Height + '</span>');
} }
if (stream.AspectRatio) { 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) { 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) { 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) { 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; var framerate = stream.AverageFrameRate || stream.RealFrameRate;
if (framerate) { if (framerate) {
html += '<li><span class="mediaInfoLabel">Framerate: </span> ' + framerate + '</li>'; attributes.push('<span class="mediaInfoAttribute">' + framerate + '</span>');
} }
if (stream.PixelFormat) { 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) { if (stream.IsDefault) {
vals.push("Default"); attributes.push('<span class="mediaInfoAttribute">Default</span>');
} }
if (stream.IsForced) { if (stream.IsForced) {
vals.push("Forced"); attributes.push('<span class="mediaInfoAttribute">Forced</span>');
} }
if (stream.IsExternal) { if (stream.IsExternal) {
vals.push("External"); attributes.push('<span class="mediaInfoAttribute">External</span>');
} }
html += '<li><span class="mediaInfoLabel">Flags: </span> ' + vals.join(", ") + '</li>'; html += attributes.join('&nbsp;&#149;&nbsp;');
}
if (stream.Path) {
html += '<li><span class="mediaInfoLabel">Path: </span> ' + stream.Path + '</li>';
}
html += '</ul>';
html += '</div>'; html += '</div>';
} }