mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-08-19 12:59:42 -07:00
More stylized homepage statistics
Also fixed some formatting on user page and posters on info page.
This commit is contained in:
JonnyWong16
parent
13e6a70a30
commit
5b2beb2b81
4 changed files with 932 additions and 873 deletions
|
|
@ -1073,7 +1073,6 @@ input[type="color"],
|
|||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
.user-overview-stats-instance {
|
||||
line-height: 11px;
|
||||
}
|
||||
.user-overview-stats-instance-device_icon {
|
||||
float: left;
|
||||
|
|
@ -1097,23 +1096,25 @@ input[type="color"],
|
|||
font-size: 12px;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
top: 14px;
|
||||
left: 0px;
|
||||
}
|
||||
.user-overview-stats-instance h3 strong{
|
||||
color: #fff;
|
||||
}
|
||||
.user-overview-stats-instance h3 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #F9AA03;
|
||||
line-height: 30px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
top: 5px;
|
||||
margin: 0 5px 0 10px;
|
||||
float: left;
|
||||
}
|
||||
.user-overview-stats-instance h4 {
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.user-overview-stats-instance h1 {
|
||||
font-size: 54px;
|
||||
|
|
@ -1174,26 +1175,27 @@ input[type="color"],
|
|||
font-size: 12px;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
top: 14px;
|
||||
left: 0px;
|
||||
}
|
||||
.home-platforms-instance-poster {
|
||||
float: left;
|
||||
height: 120px;
|
||||
max-width: 81px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.home-platforms-instance-box {
|
||||
float: left;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
padding: 25px 10px 25px 10px;
|
||||
}
|
||||
.home-platforms-instance-oval {
|
||||
float: left;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
padding: 25px 10px 25px 10px;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
|
@ -1207,21 +1209,60 @@ input[type="color"],
|
|||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
font-weight: bold;
|
||||
width: 180px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 0 0 10px;
|
||||
}
|
||||
.home-platforms-instance {
|
||||
.home-platforms-instance-playcount {
|
||||
float: left;
|
||||
width: 180px;
|
||||
}
|
||||
.home-platforms-instance-mediainfo {
|
||||
float: left;
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
padding: 5px;
|
||||
background-color: #282828;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-left: 170px;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
}
|
||||
.home-platforms-instance-media {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 375px;
|
||||
height: 225px;
|
||||
padding-bottom: 10px;
|
||||
margin-right: 25px;
|
||||
margin-bottom: 25px;
|
||||
webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.home-platforms-instance-info {
|
||||
float: left;
|
||||
background-color: #282828;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-left: 170px;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
}
|
||||
.home-platforms-instance {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 375px;
|
||||
height: 120px;
|
||||
padding-bottom: 10px;
|
||||
margin-right: 25px;
|
||||
margin-bottom: 25px;
|
||||
webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.home-platforms-instance-media a:hover .poster-face {
|
||||
webkit-box-shadow: inset 0 0 0 2px #e9a049;
|
||||
-moz-box-shadow: inset 0 0 0 2px #e9a049;
|
||||
box-shadow: inset 0 0 0 2px #e9a049;
|
||||
}
|
||||
.history-table-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -1495,6 +1536,9 @@ input[type="color"],
|
|||
width: 250px;
|
||||
z-index: 9999;
|
||||
}
|
||||
#home-stats {
|
||||
max-width: 1600px;
|
||||
}
|
||||
#updatebar {
|
||||
background-color: #444;
|
||||
color: #999999;
|
||||
|
|
|
|||
|
|
@ -62,18 +62,9 @@ DOCUMENTATION :: END
|
|||
<ul class="list-unstyled">
|
||||
% for a in data:
|
||||
% if a['stat_id'] == 'top_tv' and a['rows']:
|
||||
<div class="home-platforms-instance">
|
||||
<div class="home-platforms-instance-media">
|
||||
<li>
|
||||
<span>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['grandparent_thumb']:
|
||||
<img class="home-platforms-instance-poster"
|
||||
src="pms_image_proxy?img=${a['rows'][0]['grandparent_thumb']}&width=162&height=240&fallback=poster">
|
||||
% else:
|
||||
<img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
|
||||
% endif
|
||||
</a>
|
||||
</span>
|
||||
<div class="home-platforms-instance-mediainfo">
|
||||
<div class="home-platforms-instance-name">
|
||||
<h4>Most Watched TV</h4>
|
||||
<h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
|
|
@ -88,21 +79,24 @@ DOCUMENTATION :: END
|
|||
${a['rows'][0]['total_duration'] | hd}
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['grandparent_thumb']:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${a['rows'][0]['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||
</div>
|
||||
% else:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
|
||||
</div>
|
||||
% endif
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
% elif a['stat_id'] == 'popular_tv' and a['rows']:
|
||||
<div class="home-platforms-instance">
|
||||
<div class="home-platforms-instance-media">
|
||||
<li>
|
||||
<span>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['grandparent_thumb'] != '':
|
||||
<img class="home-platforms-instance-poster"
|
||||
src="pms_image_proxy?img=${a['rows'][0]['grandparent_thumb']}&width=162&height=240&fallback=poster">
|
||||
% else:
|
||||
<img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
|
||||
% endif
|
||||
</a>
|
||||
</span>
|
||||
<div class="home-platforms-instance-mediainfo">
|
||||
<div class="home-platforms-instance-name">
|
||||
<h4>Most Popular TV</h4>
|
||||
<h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
|
|
@ -113,21 +107,24 @@ DOCUMENTATION :: END
|
|||
<h3>${a['rows'][0]['users_watched']}</h3>
|
||||
<p> users</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['grandparent_thumb'] != '':
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${a['rows'][0]['grandparent_thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||
</div>
|
||||
% else:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
|
||||
</div>
|
||||
% endif
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
% elif a['stat_id'] == 'top_movies' and a['rows']:
|
||||
<div class="home-platforms-instance">
|
||||
<div class="home-platforms-instance-media">
|
||||
<li>
|
||||
<span>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['thumb']:
|
||||
<img class="home-platforms-instance-poster"
|
||||
src="pms_image_proxy?img=${a['rows'][0]['thumb']}&width=162&height=240&fallback=poster">
|
||||
% else:
|
||||
<img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
|
||||
% endif
|
||||
</a>
|
||||
</span>
|
||||
<div class="home-platforms-instance-mediainfo">
|
||||
<div class="home-platforms-instance-name">
|
||||
<h4>Most Watched Movie</h4>
|
||||
<h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
|
|
@ -142,21 +139,24 @@ DOCUMENTATION :: END
|
|||
${a['rows'][0]['total_duration'] | hd}
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['thumb']:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${a['rows'][0]['thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||
</div>
|
||||
% else:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
|
||||
</div>
|
||||
% endif
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
% elif a['stat_id'] == 'popular_movies' and a['rows']:
|
||||
<div class="home-platforms-instance">
|
||||
<div class="home-platforms-instance-media">
|
||||
<li>
|
||||
<span>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['thumb']:
|
||||
<img class="home-platforms-instance-poster"
|
||||
src="pms_image_proxy?img=${a['rows'][0]['thumb']}&width=162&height=240&fallback=poster">
|
||||
% else:
|
||||
<img class="home-platforms-instance-poster" src="interfaces/default/images/poster.png">
|
||||
% endif
|
||||
</a>
|
||||
</span>
|
||||
<div class="home-platforms-instance-mediainfo">
|
||||
<div class="home-platforms-instance-name">
|
||||
<h4>Most Popular Movie</h4>
|
||||
<h5><a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
|
|
@ -167,26 +167,24 @@ DOCUMENTATION :: END
|
|||
<h3>${a['rows'][0]['users_watched']}</h3>
|
||||
<p> users</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="info?item_id=${a['rows'][0]['rating_key']}">
|
||||
% if a['rows'][0]['thumb']:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${a['rows'][0]['thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||
</div>
|
||||
% else:
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="poster-face" style="background-image: url(interfaces/default/images/poster.png);"></div>
|
||||
</div>
|
||||
% endif
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
% elif a['stat_id'] == 'top_users' and a['rows']:
|
||||
<div class="home-platforms-instance">
|
||||
<li>
|
||||
<span>
|
||||
% if a['rows'][0]['user_id']:
|
||||
<a href="user?user_id=${a['rows'][0]['user_id']}">
|
||||
% else:
|
||||
<a href="user?user=${a['rows'][0]['user']}">
|
||||
% endif
|
||||
% if a['rows'][0]['thumb'] != '':
|
||||
<img class="home-platforms-instance-oval" src="${a['rows'][0]['thumb']}"
|
||||
class="poster-face">
|
||||
% else:
|
||||
<img class="home-platforms-instance-oval"
|
||||
src="interfaces/default/images/gravatar-default.png">
|
||||
% endif
|
||||
</a>
|
||||
</span>
|
||||
<div class="home-platforms-instance-info">
|
||||
<div class="home-platforms-instance-name">
|
||||
<h4>Most Active User</h4>
|
||||
<h5>
|
||||
|
|
@ -207,14 +205,27 @@ DOCUMENTATION :: END
|
|||
${a['rows'][0]['total_duration'] | hd}
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
% if a['rows'][0]['user_id']:
|
||||
<a href="user?user_id=${a['rows'][0]['user_id']}">
|
||||
% else:
|
||||
<a href="user?user=${a['rows'][0]['user']}">
|
||||
% endif
|
||||
% if a['rows'][0]['thumb'] != '':
|
||||
<div class="home-platforms-instance-poster">
|
||||
<div class="home-platforms-instance-oval" style="background-image: url(${a['rows'][0]['thumb']});">
|
||||
</div>
|
||||
% else:
|
||||
<img class="home-platforms-instance-oval"
|
||||
src="interfaces/default/images/gravatar-default.png">
|
||||
% endif
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
% elif a['stat_id'] == 'top_platforms' and a['rows']:
|
||||
<div class="home-platforms-instance">
|
||||
<li>
|
||||
<div id="platform-stat">
|
||||
<img class="home-platforms-instance-box" src="interfaces/default/images/platforms/default.png">
|
||||
</div>
|
||||
<div class="home-platforms-instance-info">
|
||||
<div class="home-platforms-instance-name">
|
||||
<h4>Most Active Platform</h4>
|
||||
<h5>${a['rows'][0]['platform_type']}</h5>
|
||||
|
|
@ -227,10 +238,14 @@ DOCUMENTATION :: END
|
|||
${a['rows'][0]['total_duration'] | hd}
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
<div id="platform-stat" class="home-platforms-instance-poster">
|
||||
<div class="home-platforms-instance-box" style="background-image: url(interfaces/default/images/platforms/default.png);">
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<script>
|
||||
$("#platform-stat").html("<img class='home-platforms-instance-box' src='" + getPlatformImagePath('${a['rows'][0]['platform_type']}') + "'>");
|
||||
$("#platform-stat").html("<div class='home-platforms-instance-box' style='background-image: url(" + getPlatformImagePath('${a['rows'][0]['platform_type']}') + ");'>");
|
||||
</script>
|
||||
% endif
|
||||
% endfor
|
||||
|
|
|
|||
|
|
@ -54,9 +54,9 @@ DOCUMENTATION :: END
|
|||
<div class="col-md-9">
|
||||
<div class="summary-content-poster hidden-xs hidden-sm">
|
||||
% if data['type'] == 'episode':
|
||||
<img src="pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster">
|
||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||
% else:
|
||||
<img src="pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster">
|
||||
<div class="poster-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster);"></div>
|
||||
% endif
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ DOCUMENTATION :: END
|
|||
<h4>Last ${a['query_days']} days</h4>
|
||||
% endif
|
||||
<h3>${a['total_plays']}</h3>
|
||||
|
||||
<p>plays</p>
|
||||
<h3><strong>/</strong></h3>
|
||||
<span id="total-time-${a['query_days']}"></span>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue