Some minor UI tweaks

This commit is contained in:
JonnyWong16 2016-05-04 11:13:33 -07:00
parent 4921458782
commit 68d124ff04
4 changed files with 80 additions and 62 deletions

View file

@ -37,8 +37,8 @@ DOCUMENTATION :: END
% else: % else:
<li> <li>
% endif % endif
<a href="info?rating_key=${child['rating_key']}"> %if data['children_type'] == 'season':
%if data['children_type'] == 'season': <a href="info?rating_key=${child['rating_key']}" title="Season ${child['media_index']}">
<div class="item-children-poster"> <div class="item-children-poster">
% if child['thumb']: % if child['thumb']:
<div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450&fallback=poster);"> <div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450&fallback=poster);">
@ -52,7 +52,9 @@ DOCUMENTATION :: END
</div> </div>
</div> </div>
</div> </div>
% elif data['children_type'] == 'episode': </a>
% elif data['children_type'] == 'episode':
<a href="info?rating_key=${child['rating_key']}" title="Episode ${child['media_index']}">
<div class="item-children-poster"> <div class="item-children-poster">
<div class="item-children-poster-face episode-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=500&height=250&fallback=art);"> <div class="item-children-poster-face episode-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=500&height=250&fallback=art);">
<div class="item-children-card-overlay"> <div class="item-children-card-overlay">
@ -62,36 +64,42 @@ DOCUMENTATION :: END
</div> </div>
</div> </div>
</div> </div>
<div class="item-children-instance-text-wrapper episode-item"> </a>
<h3 title="${child['title']}">${child['title']}</h3> <div class="item-children-instance-text-wrapper episode-item">
</div> <h3>
% elif data['children_type'] == 'album': <a href="info?rating_key=${child['rating_key']}" title="${child['title']}">${child['title']}</a>
</h3>
</div>
% elif data['children_type'] == 'album':
<a href="info?rating_key=${child['rating_key']}" title="${child['title']}">
<div class="item-children-poster"> <div class="item-children-poster">
<div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300&fallback=cover);"></div> <div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300&fallback=cover);"></div>
</div> </div>
<div class="item-children-instance-text-wrapper album-item">
<h3 title="${child['title']}">${child['title']}</h3>
</div>
% elif data['children_type'] == 'track':
% if loop.index % 2 == 0:
<div class="item-children-list-item-even">
<span class="item-children-list-item-index">${child['media_index']}</span>
<span class="item-children-list-item-title">${child['title']}</span>
<span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
<script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("m:ss"));</script>
</span>
</div>
% else:
<div class="item-children-list-item-odd">
<span class="item-children-list-item-index">${child['media_index']}</span>
<span class="item-children-list-item-title">${child['title']}</span>
<span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
<script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("m:ss"));</script>
</span>
</div>
% endif
% endif
</a> </a>
<div class="item-children-instance-text-wrapper album-item">
<h3>
<a href="info?rating_key=${child['rating_key']}" title="${child['title']}">${child['title']}</a>
</h3>
</div>
% elif data['children_type'] == 'track':
% if loop.index % 2 == 0:
<div class="item-children-list-item-even">
<span class="item-children-list-item-index">${child['media_index']}</span>
<span class="item-children-list-item-title"><a href="info?rating_key=${child['rating_key']}" title="${child['title']}">${child['title']}</a></span>
<span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
<script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("m:ss"));</script>
</span>
</div>
% else:
<div class="item-children-list-item-odd">
<span class="item-children-list-item-index">${child['media_index']}</span>
<span class="item-children-list-item-title"><a href="info?rating_key=${child['rating_key']}" title="${child['title']}">${child['title']}</a></span>
<span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
<script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("m:ss"));</script>
</span>
</div>
% endif
% endif
</li> </li>
% endif % endif
% endfor % endfor

View file

@ -37,7 +37,11 @@ DOCUMENTATION :: END
% for item in data: % for item in data:
<li> <li>
% if item['media_type'] == 'episode' or item['media_type'] == 'movie': % if item['media_type'] == 'episode' or item['media_type'] == 'movie':
<a href="info?rating_key=${item['rating_key']}"> % if item['media_type'] == 'movie':
<a href="info?rating_key=${item['rating_key']}" title="${item['title']}">
% elif item['media_type'] == 'episode':
<a href="info?rating_key=${item['rating_key']}" title="${item['grandparent_title']}">
% endif
<div class="dashboard-recent-media-poster"> <div class="dashboard-recent-media-poster">
% if item['media_type'] == 'episode': % if item['media_type'] == 'episode':
% if item['parent_thumb']: % if item['parent_thumb']:
@ -60,24 +64,25 @@ DOCUMENTATION :: END
</a> </a>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
% if item['media_type'] == 'episode': % if item['media_type'] == 'episode':
<h3 title="${item['grandparent_title']}"> <h3>
<a href="info?rating_key=${item['grandparent_rating_key']}">${item['grandparent_title']}</a> <a href="info?rating_key=${item['grandparent_rating_key']}" title="${item['grandparent_title']}">${item['grandparent_title']}</a>
</h3> </h3>
<h3 title="${item['title']}"> <h3>
<a href="info?rating_key=${item['rating_key']}">${item['title']}</a> <a href="info?rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
<h3 class="text-muted"> <h3 class="text-muted">
<a href="info?rating_key=${item['parent_rating_key']}">S${item['parent_media_index']}</a> &middot; <a href="info?rating_key=${item['rating_key']}">E${item['media_index']}</a> <a href="info?rating_key=${item['parent_rating_key']}" title="Season ${item['parent_media_index']}">S${item['parent_media_index']}</a>
&middot; <a href="info?rating_key=${item['rating_key']}" title="Episode ${item['media_index']}">E${item['media_index']}</a>
</h3> </h3>
% elif item['media_type'] == 'movie': % elif item['media_type'] == 'movie':
<h3 title="${item['title']}"> <h3>
<a href="info?rating_key=${item['rating_key']}">${item['title']}</a> <a href="info?rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
<h3 class="text-muted">${item['year']}</h3> <h3 class="text-muted">${item['year']}</h3>
% endif % endif
</div> </div>
% elif item['media_type'] == 'album': % elif item['media_type'] == 'album':
<a href="info?rating_key=${item['rating_key']}"> <a href="info?rating_key=${item['rating_key']}" title="${item['title']}">
<div class="dashboard-recent-media-cover"> <div class="dashboard-recent-media-cover">
<div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);"> <div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay">
@ -90,11 +95,11 @@ DOCUMENTATION :: END
</div> </div>
</div> </div>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
<h3 title="${item['parent_title']}"> <h3>
<a href="info?rating_key=${item['parent_rating_key']}">${item['parent_title']}</a> <a href="info?rating_key=${item['parent_rating_key']}" title="${item['parent_title']}">${item['parent_title']}</a>
</h3> </h3>
<h3 class="text-muted"> <h3 class="text-muted">
<a class="text-muted" href="info?rating_key=${item['rating_key']}">${item['title']}</a> <a class="text-muted" href="info?rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
</div> </div>
</a> </a>

View file

@ -38,7 +38,7 @@ DOCUMENTATION :: END
<div class="dashboard-recent-media-instance"> <div class="dashboard-recent-media-instance">
<li data-type="${item['media_type']}"> <li data-type="${item['media_type']}">
% if item['media_type'] == 'movie': % if item['media_type'] == 'movie':
<a href="info?rating_key=${item['rating_key']}"> <a href="info?rating_key=${item['rating_key']}" title="${item['title']}">
<div class="dashboard-recent-media-poster"> <div class="dashboard-recent-media-poster">
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);"> <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay">
@ -52,13 +52,13 @@ DOCUMENTATION :: END
</div> </div>
</a> </a>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
<h3 title="${item['title']}"> <h3>
<a href="info?rating_key=${item['rating_key']}">${item['title']}</a> <a href="info?rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
<h3 class="text-muted">${item['year']}</h3> <h3 class="text-muted">${item['year']}</h3>
</div> </div>
% elif item['media_type'] == 'season': % elif item['media_type'] == 'season':
<a href="info?rating_key=${item['rating_key']}"> <a href="info?rating_key=${item['rating_key']}" title="${item['parent_title']}">
<div class="dashboard-recent-media-poster"> <div class="dashboard-recent-media-poster">
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['parent_thumb']}&width=300&height=450&fallback=poster);"> <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['parent_thumb']}&width=300&height=450&fallback=poster);">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay">
@ -72,15 +72,15 @@ DOCUMENTATION :: END
</div> </div>
</a> </a>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
<h3 title="${item['parent_title']}"> <h3>
<a href="info?rating_key=${item['parent_rating_key']}">${item['parent_title']}</a> <a href="info?rating_key=${item['parent_rating_key']}" title="${item['parent_title']}">${item['parent_title']}</a>
</h3> </h3>
<h3 class="text-muted"> <h3 class="text-muted">
<a class="text-muted" href="info?rating_key=${item['rating_key']}">${item['title']}</a> <a class="text-muted" href="info?rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
</div> </div>
% elif item['media_type'] == 'album': % elif item['media_type'] == 'album':
<a href="info?rating_key=${item['rating_key']}"> <a href="info?rating_key=${item['rating_key']}" title="${item['parent_title']}">
<div class="dashboard-recent-media-cover"> <div class="dashboard-recent-media-cover">
<div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);"> <div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay">
@ -94,11 +94,11 @@ DOCUMENTATION :: END
</div> </div>
</a> </a>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
<h3 title="${item['parent_title']}"> <h3>
<a href="info?rating_key=${item['parent_rating_key']}">${item['parent_title']}</a> <a href="info?rating_key=${item['parent_rating_key']}" title="${item['parent_title']}">${item['parent_title']}</a>
</h3> </h3>
<h3 class="text-muted"> <h3 class="text-muted">
<a class="text-muted" href="info?rating_key=${item['rating_key']}">${item['title']}</a> <a class="text-muted" href="info?rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
</div> </div>
% endif % endif

View file

@ -34,7 +34,11 @@ DOCUMENTATION :: END
<li> <li>
% if item['media_type'] == 'episode' or item['media_type'] == 'movie': % if item['media_type'] == 'episode' or item['media_type'] == 'movie':
% if item['rating_key']: % if item['rating_key']:
<a href="info?source=history&rating_key=${item['rating_key']}"> % if item['media_type'] == 'movie':
<a href="info?source=history&rating_key=${item['rating_key']}" title="${item['title']}">
% elif item['media_type'] == 'episode':
<a href="info?source=history&rating_key=${item['rating_key']}" title="${item['grandparent_title']}">
% endif
<div class="dashboard-recent-media-poster"> <div class="dashboard-recent-media-poster">
<div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);"> <div class="dashboard-recent-media-poster-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=450&fallback=poster);">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay">
@ -49,18 +53,19 @@ DOCUMENTATION :: END
</a> </a>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
% if item['media_type'] == 'episode': % if item['media_type'] == 'episode':
<h3 title="${item['grandparent_title']}"> <h3>
<a href="info?rating_key=${item['grandparent_rating_key']}">${item['grandparent_title']}</a> <a href="info?rating_key=${item['grandparent_rating_key']}" title="${item['grandparent_title']}">${item['grandparent_title']}</a>
</h3> </h3>
<h3 title="${item['title']}"> <h3 title="${item['title']}">
<a href="info?source=history&rating_key=${item['rating_key']}">${item['title']}</a> <a href="info?source=history&rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
<h3 class="text-muted"> <h3 class="text-muted">
<a href="info?rating_key=${item['parent_rating_key']}">S${item['parent_media_index']}</a> &middot; <a href="info?source=history&rating_key=${item['rating_key']}">E${item['media_index']}</a> <a href="info?rating_key=${item['parent_rating_key']}" title="Season ${item['parent_media_index']}">S${item['parent_media_index']}</a>
&middot; <a href="info?source=history&rating_key=${item['rating_key']}" title="Episode ${item['media_index']}">E${item['media_index']}</a>
</h3> </h3>
% elif item['media_type'] == 'movie': % elif item['media_type'] == 'movie':
<h3 title="${item['title']}"> <h3 title="${item['title']}">
<a href="info?source=history&rating_key=${item['rating_key']}">${item['title']}</a> <a href="info?source=history&rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
<h3 class="text-muted">${item['year']}</h3> <h3 class="text-muted">${item['year']}</h3>
% endif % endif
@ -85,7 +90,7 @@ DOCUMENTATION :: END
% endif % endif
% elif item['media_type'] == 'track': % elif item['media_type'] == 'track':
% if item['rating_key']: % if item['rating_key']:
<a href="info?source=history&rating_key=${item['rating_key']}"> <a href="info?source=history&rating_key=${item['rating_key']}" title="${item['parent_title']}">
<div class="dashboard-recent-media-cover"> <div class="dashboard-recent-media-cover">
<div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);"> <div class="dashboard-recent-media-cover-face" style="background-image: url(pms_image_proxy?img=${item['thumb']}&width=300&height=300&fallback=cover);">
<div class="dashboard-recent-media-overlay"> <div class="dashboard-recent-media-overlay">
@ -100,13 +105,13 @@ DOCUMENTATION :: END
</a> </a>
<div class="dashboard-recent-media-metacontainer"> <div class="dashboard-recent-media-metacontainer">
<h3 title="${item['grandparent_title']}"> <h3 title="${item['grandparent_title']}">
<a href="info?rating_key=${item['grandparent_rating_key']}">${item['grandparent_title']}</a> <a href="info?rating_key=${item['grandparent_rating_key']}" title="${item['grandparent_title']}">${item['grandparent_title']}</a>
</h3> </h3>
<h3 title="${item['title']}"> <h3 title="${item['title']}">
<a href="info?source=history&rating_key=${item['rating_key']}">${item['title']}</a> <a href="info?source=history&rating_key=${item['rating_key']}" title="${item['title']}">${item['title']}</a>
</h3> </h3>
<h3 class="text-muted"> <h3 class="text-muted">
<a href="info?rating_key=${item['parent_rating_key']}">${item['parent_title']}</a> <a href="info?rating_key=${item['parent_rating_key']}" title="${item['parent_title']}">${item['parent_title']}</a>
</h3> </h3>
</div> </div>
% else: % else: