mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-08-14 10:36:57 -07:00
Add view on Plex to newsletter
This commit is contained in:
parent
0f39201774
commit
af3501a6a6
4 changed files with 84 additions and 27 deletions
|
@ -260,13 +260,19 @@
|
|||
font-size: 20px !important;
|
||||
}
|
||||
table[class=body] h2 .count-units {
|
||||
font-size: 16px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
table[class=body] h2 .sub-header,
|
||||
table[class=body] h2 .sub-header-count {
|
||||
float: left !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] h2 .sub-header {
|
||||
margin-left: -14px !important;
|
||||
}
|
||||
table[class=body] h2 img.section_type {
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
table[class=body] p,
|
||||
table[class=body] ul,
|
||||
|
@ -309,6 +315,10 @@
|
|||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-position: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------
|
||||
|
@ -351,9 +361,9 @@
|
|||
HEADER
|
||||
------------------------------------- */
|
||||
.header {
|
||||
background: url(images/logo-tautulli-newsletter.png) center;
|
||||
background: url(images/logo-tautulli-newsletter.png) no-repeat;
|
||||
background-position: calc(50% - 20px) 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
@ -524,6 +534,7 @@
|
|||
height: 225px;
|
||||
width: 150px;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
.card-cover-container {
|
||||
background-color: #282828;
|
||||
|
@ -543,6 +554,39 @@
|
|||
height: 150px;
|
||||
width: 150px;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
.card-poster-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.card-poster-overlay span {
|
||||
display: block;
|
||||
height: 55px;
|
||||
background: url(images/plex-logo-light-small.png) center no-repeat;
|
||||
background-size: 75px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
.card-poster-overlay span:before {
|
||||
display: block;
|
||||
content: "VIEW ON";
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
.card-poster .card-poster-overlay span {
|
||||
margin-top: 85px;
|
||||
}
|
||||
.card-cover .card-poster-overlay span {
|
||||
margin-top: 47.5px;
|
||||
}
|
||||
.card-info-container {
|
||||
height: 225px;
|
||||
|
@ -575,7 +619,7 @@
|
|||
.card-info-title {
|
||||
padding: 5px;
|
||||
line-height: 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
.card-info-title h4 {
|
||||
margin: 0;
|
||||
|
@ -649,12 +693,15 @@
|
|||
color: #E9A049;
|
||||
overflow: hidden;
|
||||
}
|
||||
a:hover .card-poster,
|
||||
a:hover .card-cover {
|
||||
a:hover .card-poster-overlay {
|
||||
-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;
|
||||
}
|
||||
a:hover .card-poster-overlay,
|
||||
a:hover .card-poster-overlay span {
|
||||
opacity: 1;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
|
@ -666,7 +713,7 @@
|
|||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
@ -720,14 +767,16 @@
|
|||
<div class="card-background-overlay">
|
||||
<div class="card-background" style="background-image: url(pms_image_proxy?img=${movie['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
|
||||
<div class="card-poster-container hidden-xs">
|
||||
<a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${movie['rating_key']}" title="${movie['title']}">
|
||||
<div class="card-poster" style="background-image: url(pms_image_proxy?img=${movie['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
|
||||
<a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${movie['rating_key']}" title="${movie['title']}" target="_blank">
|
||||
<div class="card-poster" style="background-image: url(pms_image_proxy?img=${movie['thumb']}&width=300&height=450&fallback=poster&refresh=true);">
|
||||
<div class="card-poster-overlay"><span></span></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-info-container">
|
||||
<div class="card-info">
|
||||
<div class="card-info-title">
|
||||
<h4><a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${movie['rating_key']}" title="${movie['title']}">${movie['title']}</a></h4>
|
||||
<h4><a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${movie['rating_key']}" title="${movie['title']}" target="_blank">${movie['title']}</a></h4>
|
||||
</div>
|
||||
% if movie['tagline']:
|
||||
<div class="card-info-tagline">
|
||||
|
@ -735,7 +784,7 @@
|
|||
</div>
|
||||
% endif
|
||||
<div class="card-info-summary">
|
||||
${movie['summary'][:425] + (movie['summary'][425:] and '...')}
|
||||
${movie['summary'][:410] + (movie['summary'][410:] and '...')}
|
||||
</div>
|
||||
<div class="card-info-footer">
|
||||
% if movie['year']:
|
||||
|
@ -806,28 +855,34 @@
|
|||
link_rating_key = show['rating_key']
|
||||
link_title = show['title']
|
||||
%>
|
||||
<a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${link_rating_key}" title="${link_title}">
|
||||
<div class="card-poster" style="background-image: url(pms_image_proxy?img=${show['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
|
||||
<a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${link_rating_key}" title="${link_title}" target="_blank">
|
||||
<div class="card-poster" style="background-image: url(pms_image_proxy?img=${show['thumb']}&width=300&height=450&fallback=poster&refresh=true);">
|
||||
<div class="card-poster-overlay"><span></span></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-info-container">
|
||||
<div class="card-info">
|
||||
<div class="card-info-title">
|
||||
<h4><a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${link_rating_key}" title="${link_title}">${show['title']}</a></h4>
|
||||
<h4><a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${link_rating_key}" title="${link_title}" target="_blank">${show['title']}</a></h4>
|
||||
</div>
|
||||
<div class="card-info-tagline">
|
||||
<% total_show_episodes = sum(s['episode_count'] for s in show['season']) %>
|
||||
${total_show_episodes} new episode${'s' if total_show_episodes > 1 else ''}
|
||||
</div>
|
||||
<div class="card-info-episode">
|
||||
% for season in show['season']:
|
||||
Season ${season['media_index']} -
|
||||
% for i, season in enumerate(show['season'][:8]):
|
||||
Season ${season['media_index']} ·
|
||||
% if season['episode_count'] == 1:
|
||||
Episode ${season['episode'][0]['media_index']} - ${season['episode'][0]['title']}
|
||||
% else:
|
||||
Episodes ${season['episode_range']}
|
||||
% endif
|
||||
<br>
|
||||
% if i < min(show['season_count'], 7):
|
||||
<br>
|
||||
% elif i == 7 and show['season_count'] > 8:
|
||||
...plus ${show['season_count'] - 8} more seasons!
|
||||
% endif
|
||||
% endfor
|
||||
</div>
|
||||
<div class="card-info-summary-episode">
|
||||
|
@ -907,22 +962,25 @@
|
|||
<div class="card-background-overlay">
|
||||
<div class="card-background-album" style="background-image: url(pms_image_proxy?img=${album['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
|
||||
<div class="card-cover-container hidden-xs">
|
||||
<a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${album['rating_key']}" title="${album['title']}">
|
||||
<div class="card-cover" style="background-image: url(pms_image_proxy?img=${album['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
|
||||
<a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${album['rating_key']}" title="${album['title']}" target="_blank">
|
||||
<div class="card-cover" style="background-image: url(pms_image_proxy?img=${album['thumb']}&width=300&height=450&fallback=poster&refresh=true);">
|
||||
<div class="card-poster-overlay"><span></span></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-info-container-album">
|
||||
<div class="card-info-album">
|
||||
<div class="card-info-title">
|
||||
<h4><a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${album['rating_key']}" title="${album['title']}">${album['title']}</a></h4>
|
||||
<h4><a href="${plexpy_config['pms_web_url']}#!/server/${plexpy_config['pms_identifier']}/details?key=%2Flibrary%2Fmetadata%2F${album['rating_key']}" title="${album['title']}" target="_blank">${album['title']}</a></h4>
|
||||
</div>
|
||||
<div class="card-info-tagline">
|
||||
${artist['title']} - ${album['track_count']} track${'s' if album['track_count'] > 1 else ''}
|
||||
${artist['title']} · ${album['track_count']} track${'s' if album['track_count'] > 1 else ''}
|
||||
</div>
|
||||
<% album['summary'] = """Adventure Time follows two best friends: Finn (a 12-year old boy) and Jake (a wise 28-year-old dog with magical powers), and the surreal adventures undertaken by the duo as they traverse the mystical Land of Ooo. A world built for adventure, Ooo is filled to the brim with various landscapes for the """ %>
|
||||
% if artist['title'].lower() != 'various artists':
|
||||
<div class="card-info-summary-album">
|
||||
${album['summary'][:155] + (album['summary'][155:] and '...')}
|
||||
${album['summary'][:150] + (album['summary'][150:] and '...')}
|
||||
</div>
|
||||
% endif
|
||||
<div class="card-info-footer">
|
||||
% if album['year']:
|
||||
<span class="badge">${album['year']}</span>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue