From af3501a6a6cabf7e9e4b8008190911db4d8e46ab Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Sun, 7 Jan 2018 00:53:01 -0800 Subject: [PATCH] Add view on Plex to newsletter --- data/interfaces/default/css/tautulli.css | 3 +- .../newsletters/recently_added.html | 104 ++++++++++++++---- plexpy/newsletters.py | 2 +- plexpy/pmsconnect.py | 2 +- 4 files changed, 84 insertions(+), 27 deletions(-) diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css index fbfc9bff..881b23a7 100644 --- a/data/interfaces/default/css/tautulli.css +++ b/data/interfaces/default/css/tautulli.css @@ -1776,8 +1776,7 @@ a:hover .dashboard-recent-media-cover { } .summary-poster-face-overlay span { display: block; - width: 100%; - height: 100%; + height: 70px; background-image: url(../images/plex-logo-light.svg); background-size: 100px; background-repeat: no-repeat; diff --git a/data/interfaces/newsletters/recently_added.html b/data/interfaces/newsletters/recently_added.html index e681427a..befab83f 100644 --- a/data/interfaces/newsletters/recently_added.html +++ b/data/interfaces/newsletters/recently_added.html @@ -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 @@
% if movie['tagline']:
@@ -735,7 +784,7 @@
% endif
- ${movie['summary'][:425] + (movie['summary'][425:] and '...')} + ${movie['summary'][:410] + (movie['summary'][410:] and '...')}
<% total_show_episodes = sum(s['episode_count'] for s in show['season']) %> ${total_show_episodes} new episode${'s' if total_show_episodes > 1 else ''}
- % 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 -
+ % if i < min(show['season_count'], 7): +
+ % elif i == 7 and show['season_count'] > 8: + ...plus ${show['season_count'] - 8} more seasons! + % endif % endfor
@@ -907,22 +962,25 @@
- ${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 ''}
- <% 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':
- ${album['summary'][:155] + (album['summary'][155:] and '...')} + ${album['summary'][:150] + (album['summary'][150:] and '...')}
+ % endif