mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-15 01:32:57 -07:00
Changes to info pages
* Style changes * Added missing metadata * Don't show metadata field if data is unavailable
This commit is contained in:
JonnyWong16
parent
317a9f0b8e
commit
5a1516286c
3 changed files with 110 additions and 45 deletions
|
|
@ -628,6 +628,7 @@ input[type="color"],
|
||||||
margin-right: 27px;
|
margin-right: 27px;
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
|
min-height: 340px;
|
||||||
}
|
}
|
||||||
.dashboard-recent-media-metacontainer{
|
.dashboard-recent-media-metacontainer{
|
||||||
width: 153px;
|
width: 153px;
|
||||||
|
|
@ -857,6 +858,25 @@ input[type="color"],
|
||||||
}
|
}
|
||||||
.summary-content-director strong {
|
.summary-content-director strong {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
.summary-content-studio {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.summary-content-studio strong {
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
.summary-content-airdate {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.summary-content-airdate strong {
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
.summary-content-duration {
|
.summary-content-duration {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -865,6 +885,7 @@ input[type="color"],
|
||||||
}
|
}
|
||||||
.summary-content-duration strong {
|
.summary-content-duration strong {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
.summary-content-content-rating {
|
.summary-content-content-rating {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -873,6 +894,7 @@ input[type="color"],
|
||||||
}
|
}
|
||||||
.summary-content-content-rating strong {
|
.summary-content-content-rating strong {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
.summary-content-summary {
|
.summary-content-summary {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -885,6 +907,9 @@ input[type="color"],
|
||||||
max-height: 160px;
|
max-height: 160px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
.summary-content-people-wrapper {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
.summary-content-people-wrapper hidden-phone hidden-tablet {
|
.summary-content-people-wrapper hidden-phone hidden-tablet {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -892,13 +917,16 @@ input[type="color"],
|
||||||
}
|
}
|
||||||
.summary-content-actors {
|
.summary-content-actors {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-left: 35px;
|
margin-left: 0px;
|
||||||
margin-right: 35px;
|
margin-right: 15px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: #999;
|
color: #999;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.summary-content-actors ul {
|
||||||
|
padding-left:20px;
|
||||||
|
}
|
||||||
.summary-content-actors li {
|
.summary-content-actors li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
|
|
@ -907,15 +935,38 @@ input[type="color"],
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.summary-content-writers {
|
.summary-content-genres {
|
||||||
margin-top: 10px;
|
margin-top: 0px;
|
||||||
margin-left: 35px;
|
margin-left: 0px;
|
||||||
margin-right: 35px;
|
margin-right: 15px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: #999;
|
color: #999;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.summary-content-genres ul {
|
||||||
|
padding-left:20px;
|
||||||
|
}
|
||||||
|
.summary-content-genres li {
|
||||||
|
list-style: none;
|
||||||
|
list-style-image: none;
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.summary-content-writers {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #999;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.summary-content-writers ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
.summary-content-writers li {
|
.summary-content-writers li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
|
|
@ -1111,6 +1162,10 @@ input[type="color"],
|
||||||
margin: 0px 0px 0px 0px;
|
margin: 0px 0px 0px 0px;
|
||||||
}
|
}
|
||||||
.user-overview-stats-instance {
|
.user-overview-stats-instance {
|
||||||
|
float: left;
|
||||||
|
width: 350px;
|
||||||
|
height: 80px;
|
||||||
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
.user-overview-stats-instance-device_icon {
|
.user-overview-stats-instance-device_icon {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -1172,7 +1227,7 @@ input[type="color"],
|
||||||
.user-platforms-instance {
|
.user-platforms-instance {
|
||||||
float: left;
|
float: left;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 90px;
|
height: 80px;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
.user-platforms-instance li {
|
.user-platforms-instance li {
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ genres Returns an array of genres.
|
||||||
actors Returns an array of actors.
|
actors Returns an array of actors.
|
||||||
directors Returns an array of directors.
|
directors Returns an array of directors.
|
||||||
studio Returns the name of the studio.
|
studio Returns the name of the studio.
|
||||||
|
originally_available_at Returns the air date of the item.
|
||||||
|
|
||||||
DOCUMENTATION :: END
|
DOCUMENTATION :: END
|
||||||
</%doc>
|
</%doc>
|
||||||
|
|
@ -53,8 +54,10 @@ DOCUMENTATION :: END
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="summary-content-poster hidden-xs hidden-sm">
|
<div class="summary-content-poster hidden-xs hidden-sm">
|
||||||
% if data['type'] == 'episode':
|
% if data['type'] == 'episode' and data['parent_thumb']:
|
||||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster);"></div>
|
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||||
|
% elif data['type'] == 'episode':
|
||||||
|
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||||
% else:
|
% else:
|
||||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster);"></div>
|
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||||
% endif
|
% endif
|
||||||
|
|
@ -62,37 +65,47 @@ DOCUMENTATION :: END
|
||||||
<div class="summary-content">
|
<div class="summary-content">
|
||||||
<div class="summary-content-title">
|
<div class="summary-content-title">
|
||||||
% if data['type'] == 'movie':
|
% if data['type'] == 'movie':
|
||||||
<h1>${data['title']} (${data['year']})</h1>
|
<h1>${data['title']}</h1>
|
||||||
% elif data['type'] == 'season':
|
% elif data['type'] == 'season':
|
||||||
<h1>${data['parent_title']} (${data['title']})</h1>
|
<h1>${data['parent_title']} (${data['title']})</h1>
|
||||||
% elif data['type'] == 'episode':
|
% elif data['type'] == 'episode':
|
||||||
<h1>${data['grandparent_title']} (Season ${data['parent_index']}, Episode
|
<h1>${data['grandparent_title']} - ${data['title']}
|
||||||
${data['index']}) "${data['title']}"</h1>
|
(Season ${data['parent_index']}, Episode ${data['index']})</h1>
|
||||||
% else:
|
% else:
|
||||||
<h1>${data['title']}</h1>
|
<h1>${data['title']}</h1>
|
||||||
% endif
|
% endif
|
||||||
</div>
|
</div>
|
||||||
% if data['type'] == 'movie':
|
% if (data['type'] == 'movie' or data['type'] == 'show' or data['type'] == 'episode') and data['rating']:
|
||||||
<div id="stars" class="rateit hidden-xs hidden-sm" data-rateit-value=""
|
<div id="stars" class="rateit hidden-xs hidden-sm" data-rateit-value=""
|
||||||
data-rateit-ispreset="true" data-rateit-readonly="true"></div>
|
data-rateit-ispreset="true" data-rateit-readonly="true"></div>
|
||||||
% endif
|
% endif
|
||||||
<div class="summary-content-details-wrapper">
|
<div class="summary-content-details-wrapper">
|
||||||
<div class="summary-content-director">
|
<div class="summary-content-director">
|
||||||
% if data['type'] == 'episode' or data['type'] == 'movie':
|
% if (data['type'] == 'episode' or data['type'] == 'movie') and data['directors']:
|
||||||
% if data['directors']:
|
|
||||||
Directed by <strong> ${data['directors'][0]}</strong>
|
Directed by <strong> ${data['directors'][0]}</strong>
|
||||||
% else:
|
|
||||||
Directed by <strong> unknown</strong>
|
|
||||||
% endif
|
% endif
|
||||||
% elif data['type'] == 'show' or data['type'] == 'season':
|
</div>
|
||||||
|
<div class="summary-content-studio">
|
||||||
|
% if (data['type'] == 'show' or data['type'] == 'movie') and data['studio']:
|
||||||
Studio <strong> ${data['studio']}</strong>
|
Studio <strong> ${data['studio']}</strong>
|
||||||
% endif
|
% endif
|
||||||
</div>
|
</div>
|
||||||
|
<div class="summary-content-airdate">
|
||||||
|
% if data['type'] == 'movie':
|
||||||
|
Year <strong> ${data['year']}</strong>
|
||||||
|
% elif data['type'] == 'show':
|
||||||
|
Aired <strong> ${data['year']}</strong>
|
||||||
|
% elif data['type'] == 'episode':
|
||||||
|
Aired <strong> <span id="airdate">${data['originally_available_at']}</span></strong>
|
||||||
|
% endif
|
||||||
|
</div>
|
||||||
<div class="summary-content-duration">
|
<div class="summary-content-duration">
|
||||||
Runtime <strong> <span id="runtime">${data['duration']}</span> mins</strong>
|
Runtime <strong> <span id="runtime">${data['duration']}</span> mins</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-content-content-rating">
|
<div class="summary-content-content-rating">
|
||||||
|
% if (data['type'] == 'episode' or data['type'] == 'movie' or data['type'] == 'show') and data['content_rating']:
|
||||||
Rated <strong> ${data['content_rating']} </strong>
|
Rated <strong> ${data['content_rating']} </strong>
|
||||||
|
% endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-content-summary">
|
<div class="summary-content-summary">
|
||||||
|
|
@ -100,9 +113,23 @@ DOCUMENTATION :: END
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
% if data['type'] == 'episode':
|
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<div class="summary-content-people-wrapper hidden-xs hidden-sm">
|
<div class="summary-content-people-wrapper hidden-xs hidden-sm">
|
||||||
|
% if (data['type'] == 'movie' or data['type'] == 'show') and data['genres']:
|
||||||
|
<div class="summary-content-genres">
|
||||||
|
<strong>Genres</strong>
|
||||||
|
<ul>
|
||||||
|
% for genre in data['genres']:
|
||||||
|
% if loop.index < 5:
|
||||||
|
<li>
|
||||||
|
${genre}
|
||||||
|
</li>
|
||||||
|
% endif
|
||||||
|
% endfor
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
% endif
|
||||||
|
% if (data['type'] == 'episode' or data['type'] == 'movie') and data['writers']:
|
||||||
<div class="summary-content-writers">
|
<div class="summary-content-writers">
|
||||||
<strong>Written by</strong>
|
<strong>Written by</strong>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -115,42 +142,23 @@ DOCUMENTATION :: END
|
||||||
% endfor
|
% endfor
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
% endif
|
||||||
</div>
|
% if (data['type'] == 'movie' or data['type'] == 'show') and data['actors']:
|
||||||
% elif data['type'] == 'movie' or data['type'] == 'show':
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="summary-content-people-wrapper hidden-xs hidden-sm">
|
|
||||||
<div class="summary-content-actors">
|
<div class="summary-content-actors">
|
||||||
<strong>Genres</strong>
|
<strong>Starring</strong>
|
||||||
<ul>
|
<ul>
|
||||||
% for genre in data['genres']:
|
% for actor in data['actors']:
|
||||||
% if loop.index < 5:
|
% if loop.index < 5:
|
||||||
<li>
|
<li>
|
||||||
${genre}
|
${actor}
|
||||||
</li>
|
</li>
|
||||||
% endif
|
% endif
|
||||||
% endfor
|
% endfor
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-content-people-wrapper hidden-xs hidden-sm">
|
% endif
|
||||||
<div class="summary-content-actors">
|
|
||||||
<strong>Starring</strong>
|
|
||||||
<ul>
|
|
||||||
% for actor in data['actors']:
|
|
||||||
% if loop.index < 5:
|
|
||||||
<li>
|
|
||||||
${actor}
|
|
||||||
</li>
|
|
||||||
% endif
|
|
||||||
% endfor
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
% elif data['type'] == 'season':
|
|
||||||
<div class="col-md-3"></div>
|
|
||||||
% endif
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -228,13 +236,14 @@ DOCUMENTATION :: END
|
||||||
<%def name="javascriptIncludes()">
|
<%def name="javascriptIncludes()">
|
||||||
<script src="interfaces/default/js/jquery.rateit.min.js"></script>
|
<script src="interfaces/default/js/jquery.rateit.min.js"></script>
|
||||||
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
||||||
|
<script src="interfaces/default/js/jquery-ui.min.js"></script>
|
||||||
<script src="interfaces/default/js/dataTables.colVis.js"></script>
|
<script src="interfaces/default/js/dataTables.colVis.js"></script>
|
||||||
<script src="interfaces/default/js/dataTables.bootstrap.min.js"></script>
|
<script src="interfaces/default/js/dataTables.bootstrap.min.js"></script>
|
||||||
<script src="interfaces/default/js/dataTables.bootstrap.pagination.js"></script>
|
<script src="interfaces/default/js/dataTables.bootstrap.pagination.js"></script>
|
||||||
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
||||||
|
|
||||||
% if data:
|
% if data:
|
||||||
% if data['type'] == 'movie':
|
% if data['type'] == 'movie' or data['type'] == 'show' or data['type'] == 'episode':
|
||||||
<script>
|
<script>
|
||||||
// Convert rating to 5 star rating type
|
// Convert rating to 5 star rating type
|
||||||
var starRating = Math.round(${data['rating']} / 2)
|
var starRating = Math.round(${data['rating']} / 2)
|
||||||
|
|
@ -294,6 +303,7 @@ DOCUMENTATION :: END
|
||||||
</script>
|
</script>
|
||||||
% endif
|
% endif
|
||||||
<script>
|
<script>
|
||||||
|
$("#airdate").html($.datepicker.formatDate('M dd, yy', new Date($("#airdate").html())));
|
||||||
$("#runtime").html(millisecondsToMinutes($("#runtime").html(), true));
|
$("#runtime").html(millisecondsToMinutes($("#runtime").html(), true));
|
||||||
</script>
|
</script>
|
||||||
% endif
|
% endif
|
||||||
|
|
|
||||||
|
|
@ -343,7 +343,7 @@ from plexpy import helpers
|
||||||
sync_table = $('#sync_table').DataTable(sync_table_options);
|
sync_table = $('#sync_table').DataTable(sync_table_options);
|
||||||
history_table.column(1).visible(false);
|
history_table.column(1).visible(false);
|
||||||
|
|
||||||
var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: '<i class="fa fa-columns"> Select columns</i>', buttonClass: 'btn btn-dark' } );
|
var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark' } );
|
||||||
$( colvis_sync.button() ).appendTo('#button-bar-sync');
|
$( colvis_sync.button() ).appendTo('#button-bar-sync');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue