Square cover for music home stats

This commit is contained in:
JonnyWong16 2016-09-17 14:39:58 -07:00
parent a4be73da3b
commit 0478f40d02
2 changed files with 57 additions and 25 deletions

View file

@ -1929,6 +1929,12 @@ a .library-user-instance-box:hover {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
} }
.home-platforms-instance-cover {
margin-left: 0px;
position: absolute;
top: 20px;
overflow: hidden;
}
.home-platforms-instance-poster .home-platforms-poster-face { .home-platforms-instance-poster .home-platforms-poster-face {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -1938,6 +1944,15 @@ a .library-user-instance-box:hover {
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
} }
.home-platforms-instance-cover .home-platforms-cover-face {
background-position: center;
background-size: cover;
height: 80px;
width: 80px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
}
.home-platforms-instance-poster .home-platforms-library-thumb { .home-platforms-instance-poster .home-platforms-library-thumb {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -2087,6 +2102,12 @@ a .library-user-instance-box:hover {
left: 20px; left: 20px;
overflow: hidden; overflow: hidden;
} }
.home-platforms-instance-list-cover {
position: absolute;
top: 10px;
left: 20px;
overflow: hidden;
}
.home-platforms-instance-list-poster .home-platforms-list-poster-face { .home-platforms-instance-list-poster .home-platforms-list-poster-face {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -2096,6 +2117,15 @@ a .library-user-instance-box:hover {
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
} }
.home-platforms-instance-list-cover .home-platforms-list-cover-face {
background-position: center;
background-size: cover;
height: 40px;
width: 40px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
}
.home-platforms-instance-list-box { .home-platforms-instance-list-box {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -2154,7 +2184,9 @@ a .home-platforms-instance-oval:hover,
a .home-platforms-instance-list-box:hover, a .home-platforms-instance-list-box:hover,
a .home-platforms-instance-list-oval:hover, a .home-platforms-instance-list-oval:hover,
a .home-platforms-poster-face:hover, a .home-platforms-poster-face:hover,
a .home-platforms-list-poster-face:hover a .home-platforms-cover-face:hover,
a .home-platforms-list-poster-face:hover,
a .home-platforms-list-cover-face:hover
{ {
-webkit-box-shadow: inset 0 0 0 2px #e9a049; -webkit-box-shadow: inset 0 0 0 2px #e9a049;
-moz-box-shadow: inset 0 0 0 2px #e9a049; -moz-box-shadow: inset 0 0 0 2px #e9a049;

View file

@ -509,21 +509,21 @@ DOCUMENTATION :: END
% if top_stat['rows'][0]['rating_key']: % if top_stat['rows'][0]['rating_key']:
<a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}"> <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
% if top_stat['rows'][0]['grandparent_thumb']: % if top_stat['rows'][0]['grandparent_thumb']:
<div class="home-platforms-instance-poster"> <div class="home-platforms-instance-cover">
<div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div> <div class="home-platforms-cover-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=300&fallback=cover);"></div>
% if _session['user_group'] == 'admin': % if _session['user_group'] == 'admin':
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span> <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% endif % endif
</div> </div>
% else: % else:
<div class="home-platforms-instance-poster"> <div class="home-platforms-instance-cover">
<div class="home-platforms-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
</a> </a>
% else: % else:
<div class="home-platforms-instance-poster"> <div class="home-platforms-instance-cover">
<div class="home-platforms-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
% if len(top_stat['rows']) > 1: % if len(top_stat['rows']) > 1:
@ -558,21 +558,21 @@ DOCUMENTATION :: END
% if top_stat['rows'][loop.index]['rating_key']: % if top_stat['rows'][loop.index]['rating_key']:
<a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}"> <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
% if top_stat['rows'][loop.index]['grandparent_thumb']: % if top_stat['rows'][loop.index]['grandparent_thumb']:
<div class="home-platforms-instance-list-poster"> <div class="home-platforms-instance-list-cover">
<div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div> <div class="home-platforms-list-cover-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=300&fallback=cover);"></div>
% if _session['user_group'] == 'admin': % if _session['user_group'] == 'admin':
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span> <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% endif % endif
</div> </div>
% else: % else:
<div class="home-platforms-instance-list-poster"> <div class="home-platforms-instance-list-cover">
<div class="home-platforms-list-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-list-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
</a> </a>
% else: % else:
<div class="home-platforms-instance-list-poster"> <div class="home-platforms-instance-list-cover">
<div class="home-platforms-list-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-list-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
<div class="home-platforms-instance-list-number"> <div class="home-platforms-instance-list-number">
@ -611,21 +611,21 @@ DOCUMENTATION :: END
% if top_stat['rows'][0]['rating_key']: % if top_stat['rows'][0]['rating_key']:
<a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}"> <a href="info?rating_key=${top_stat['rows'][0]['rating_key']}" title="${top_stat['rows'][0]['title']}">
% if top_stat['rows'][0]['grandparent_thumb'] != '': % if top_stat['rows'][0]['grandparent_thumb'] != '':
<div class="home-platforms-instance-poster"> <div class="home-platforms-instance-cover">
<div class="home-platforms-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div> <div class="home-platforms-cover-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['grandparent_thumb']}&width=300&height=300&fallback=cover);"></div>
% if _session['user_group'] == 'admin': % if _session['user_group'] == 'admin':
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span> <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% endif % endif
</div> </div>
% else: % else:
<div class="home-platforms-instance-poster"> <div class="home-platforms-instance-cover">
<div class="home-platforms-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
</a> </a>
% else: % else:
<div class="home-platforms-instance-poster"> <div class="home-platforms-instance-cover">
<div class="home-platforms-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
% if len(top_stat['rows']) > 1: % if len(top_stat['rows']) > 1:
@ -656,21 +656,21 @@ DOCUMENTATION :: END
% if top_stat['rows'][loop.index]['rating_key']: % if top_stat['rows'][loop.index]['rating_key']:
<a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}"> <a href="info?rating_key=${top_stat['rows'][loop.index]['rating_key']}" title="${top_stat['rows'][loop.index]['title']}">
% if top_stat['rows'][loop.index]['grandparent_thumb']: % if top_stat['rows'][loop.index]['grandparent_thumb']:
<div class="home-platforms-instance-list-poster"> <div class="home-platforms-instance-list-cover">
<div class="home-platforms-list-poster-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=300&fallback=poster);"></div> <div class="home-platforms-list-cover-face" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][loop.index]['grandparent_thumb']}&width=300&height=300&fallback=cover);"></div>
% if _session['user_group'] == 'admin': % if _session['user_group'] == 'admin':
<span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span> <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
% endif % endif
</div> </div>
% else: % else:
<div class="home-platforms-instance-list-poster"> <div class="home-platforms-instance-list-cover">
<div class="home-platforms-list-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-list-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
</a> </a>
% else: % else:
<div class="home-platforms-instance-list-poster"> <div class="home-platforms-instance-list-cover">
<div class="home-platforms-list-poster-face" style="background-image: url(${http_root}images/poster.png);"></div> <div class="home-platforms-list-cover-face" style="background-image: url(${http_root}images/cover.png);"></div>
</div> </div>
% endif % endif
<div class="home-platforms-instance-list-number"> <div class="home-platforms-instance-list-number">