From 49a6cf88094744a097520ac64f62971bcd54f0e5 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <JonnyWong16@users.noreply.github.com>
Date: Fri, 12 Jan 2018 09:53:56 -0800
Subject: [PATCH] Add newsletter star rating on hover

---
 .../interfaces/default/newsletter_config.html |   1 +
 .../newsletters/recently_added.html           | 478 +++++++++++++++++-
 .../newsletters/recently_added_master.html    |  10 +-
 3 files changed, 478 insertions(+), 11 deletions(-)

diff --git a/data/interfaces/default/newsletter_config.html b/data/interfaces/default/newsletter_config.html
index d558c3d1..b8fb30c3 100644
--- a/data/interfaces/default/newsletter_config.html
+++ b/data/interfaces/default/newsletter_config.html
@@ -439,6 +439,7 @@
     });
 
     function previewNewsletter() {
+        showMsg('<i class="fa fa-check"></i>&nbsp; Check pop-up blocker if no response.', false, true, 2000);
         window.open('preview_newsletter?newsletter_id=' + $('#newsletter_id').val());
     }
 
diff --git a/data/interfaces/newsletters/recently_added.html b/data/interfaces/newsletters/recently_added.html
index d7b62450..dcee1f1b 100644
--- a/data/interfaces/newsletters/recently_added.html
+++ b/data/interfaces/newsletters/recently_added.html
@@ -6,6 +6,470 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Tautulli ${title} Newsletter</title>
     <style>
+        /* -------------------------------------
+            GLOBAL RESETS
+        ------------------------------------- */
+        img {
+            border: none;
+            -ms-interpolation-mode: bicubic;
+            max-width: 100%;
+        }
+
+        body {
+            font-family: sans-serif;
+            -webkit-font-smoothing: antialiased;
+            font-size: 14px;
+            line-height: 1.4;
+            margin: 0;
+            padding: 0;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%;
+        }
+
+        table td {
+            font-family: sans-serif;
+            font-size: 14px;
+            vertical-align: top;
+        }
+
+        /* -------------------------------------
+            BODY & CONTAINER
+        ------------------------------------- */
+
+        .body {
+            width: 100%;
+        }
+
+        /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+        .container {
+            display: block;
+            margin: 0 auto !important;
+            /* makes it centered */
+            max-width: 1046px;
+            padding: 10px;
+            width: 1046px;
+        }
+
+        /* This should also be a block element, so that it will fill 100% of the .container */
+        .content {
+            box-sizing: border-box;
+            display: block;
+            margin: 0 auto;
+            max-width: 1046px;
+            padding: 10px;
+        }
+
+        /* -------------------------------------
+            HEADER, FOOTER, MAIN
+        ------------------------------------- */
+        .main {
+            background: #282A2D;
+            border-radius: 3px;
+            width: 100%;
+            color: #ffffff;
+        }
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 5px;
+            overflow: auto;
+        }
+
+        .content-block {
+            padding-bottom: 10px;
+            padding-top: 10px;
+        }
+
+        .footer {
+            clear: both;
+            margin-top: 10px;
+            text-align: center;
+            width: 100%;
+            font-size: 12px;
+        }
+        .footer-bar {
+            margin-left: auto;
+            margin-right: auto;
+            width: 200px;
+            border-top: 1px solid #E5A00D;
+            margin-top: 25px;
+        }
+
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #fff;
+            font-size: 12px;
+            text-align: center;
+        }
+
+        /* -------------------------------------
+            TYPOGRAPHY
+        ------------------------------------- */
+        h1,
+        h2,
+        h3,
+        h4 {
+            color: #ffffff;
+            font-family: sans-serif;
+            font-weight: 400;
+            margin: 0;
+        }
+
+        p,
+        ul,
+        ol {
+            font-family: sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin: 0;
+            margin-bottom: 15px;
+        }
+
+        p li,
+        ul li,
+        ol li {
+            list-style-position: inside;
+            margin-left: 5px;
+        }
+
+        a {
+            color: #3498db;
+            text-decoration: underline;
+        }
+
+        /* -------------------------------------
+            BUTTONS
+        ------------------------------------- */
+        .btn {
+            box-sizing: border-box;
+            width: 100%;
+        }
+
+        .btn > tbody > tr > td {
+            padding-bottom: 15px;
+        }
+
+        .btn table {
+            width: auto;
+        }
+
+        .btn table td {
+            background-color: #ffffff;
+            border-radius: 5px;
+            text-align: center;
+        }
+
+        .btn a {
+            background-color: #ffffff;
+            border: solid 1px #3498db;
+            border-radius: 5px;
+            box-sizing: border-box;
+            color: #3498db;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 14px;
+            font-weight: bold;
+            margin: 0;
+            padding: 12px 25px;
+            text-decoration: none;
+            text-transform: capitalize;
+        }
+
+        .btn-primary table td {
+            background-color: #3498db;
+        }
+
+        .btn-primary a {
+            background-color: #3498db;
+            border-color: #3498db;
+            color: #ffffff;
+        }
+
+        /* -------------------------------------
+            OTHER STYLES THAT MIGHT BE USEFUL
+        ------------------------------------- */
+        .last {
+            margin-bottom: 0;
+        }
+
+        .first {
+            margin-top: 0;
+        }
+
+        .align-center {
+            text-align: center;
+        }
+
+        .align-right {
+            text-align: right;
+        }
+
+        .align-left {
+            text-align: left;
+        }
+
+        .clear {
+            clear: both;
+        }
+
+        .mt0 {
+            margin-top: 0;
+        }
+
+        .mb0 {
+            margin-bottom: 0;
+        }
+        .mb5 {
+            margin-bottom: 5px;
+        }
+
+        .nowrap {
+            white-space: nowrap;
+        }
+
+        .preheader {
+            color: transparent;
+            display: none;
+            height: 0;
+            max-height: 0;
+            max-width: 0;
+            opacity: 0;
+            overflow: hidden;
+            mso-hide: all;
+            visibility: hidden;
+            width: 0;
+        }
+
+        .powered-by a {
+            text-decoration: underline;
+        }
+
+        /* -------------------------------------
+            HEADER
+        ------------------------------------- */
+        .header {
+            background: url(https://i.imgur.com/oqMQJxp.png) no-repeat;
+            background-position: calc(50% - 20px) 50%;
+            background-size: contain;
+            width: 100%;
+            height: 100px;
+        }
+        .dates {
+            font-size: 20px;
+            text-align: center;
+        }
+        /* -------------------------------------
+            MEDIA SECTIONS
+        ------------------------------------- */
+        h2 {
+            font-size: 30px;
+            font-weight: 300;
+            margin: 20px 10px 0 10px;
+            text-align: center;
+        }
+
+        h3 {
+            font-size: 25px;
+            font-weight: 300;
+            margin: 0 0 10px 0;
+        }
+
+        img.sub-header-icon {
+            height: 30px;
+            vertical-align: middle;
+            margin-right: 5px;
+            margin-bottom: 5px;
+        }
+        .sub-header > div {
+            margin-left: auto;
+            margin-right: auto;
+            font-size: 30px;
+            text-align: center;
+        }
+        .sub-header-bar {
+            width: 200px;
+            border-top: 1px solid #E5A00D;
+            margin-top: 25px;
+            margin-bottom: 25px;
+        }
+        .sub-header-title {
+            font-weight: lighter;
+        }
+        .sub-header-count .count {
+            color: #E5A00D;
+        }
+        .sub-header-count .count-units {
+            color: #aaaaaa;
+            font-size: 20px;
+            text-transform: uppercase;
+        }
+        /* -------------------------------------
+            MEDIA CARDS
+        ------------------------------------- */
+        .card-instance {
+            float: left;
+            width: 500px;
+            margin: 3px;
+            border: 1px solid rgba(255,255,255,.1);
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            font-size: 12px;
+            overflow: hidden;
+            position: relative;
+        }
+        .card-instance.movie,
+        .card-instance.show {
+            height: 235px;
+        }
+        .card-instance.album {
+            height: 160px;
+        }
+        .card-instance.odd {
+            float: none !important;
+            margin: 3px auto !important;
+        }
+        .card-background {
+            background-color: #3F4245;
+            background-position: center;
+            background-size: cover;
+            width: 100%;
+            height: 100%;
+        }
+        .card-background-preview {
+            background-color: #3F4245;
+            background-position: center;
+            background-size: cover;
+            opacity: 0.25;
+            -webkit-filter: blur(3px);
+            filter: blur(3px);
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 0;
+        }
+        .card-poster-container {
+            width: 150px;
+            margin: 3px;
+            border: 1px solid rgba(255,255,255,.1);
+            float: left;
+            position: relative;
+            z-index: 1;
+        }
+        .card-instance.movie .card-poster-container,
+        .card-instance.show .card-poster-container{
+            height: 225px;
+        }
+        .card-instance.album .card-poster-container {
+            height: 150px;
+        }
+        .card-poster {
+            background-color: #3F4245;
+            background-position: center;
+            background-size: cover;
+            height: 100%;
+            width: 100%;
+        }
+        .card-poster-overlay {
+            background: url(https://cdn.discordapp.com/attachments/334355557706235906/401064397780287489/newsletter-view-on-plex-flat.png) bottom right no-repeat;
+            width: 100%;
+            height: 100%;
+        }
+        .card-info-container {
+            margin: 4px;
+            width: 332px;
+            float: left;
+            position: relative;
+            z-index: 1;
+        }
+        .card-instance.movie .card-info-container,
+        .card-instance.show .card-info-container{
+            height: 225px;
+        }
+        .card-instance.album .card-info-container {
+            height: 150px;
+        }
+        .card-info-container > div {
+            padding: 5px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .card-info-title {
+            border-bottom: 1px solid rgba(255, 255, 255, .1);
+            line-height: 20px;
+            font-size: 15px;
+        }
+        .card-info-title a {
+            text-decoration: none;
+            color: #ffffff;
+        }
+        .card-info-body > div {
+            color: #ffffff;
+            font-size: 12px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .card-instance.movie .card-info-body,
+        .card-instance.show .card-info-body {
+            min-height: 157px;
+        }
+        .card-instance.album .card-info-body {
+            min-height: 82px;
+        }
+        .card-info-footer {
+            font-size: 10px;
+        }
+        .card-info-footer .star-rating {
+            width: 60px;
+            font-size: 14px;
+            line-height: 17px;
+            float: right;
+        }
+        .star-rating-full {
+            color: #E5A00D;
+            direction: ltr;
+            padding: 0;
+            overflow: hidden;
+            float: left;
+        }
+        .star-rating-empty {
+            color: #aaaaaa;
+            direction: rtl;
+            padding: 0;
+            overflow: hidden;
+            float: left;
+        }
+        .star-rating span {
+            display: inline-block;
+            text-align: center;
+            width: 12px;
+        }
+        .badge {
+            display: inline-block;
+            min-width: 10px;
+            padding: 3px 7px;
+            font-size: 11px;
+            font-style: normal;
+            line-height: 1;
+            color: #fff;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: middle;
+            background-color: rgba(0, 0, 0, .25);
+            border-radius: 2px;
+        }
+
         /* -------------------------------------
             RESPONSIVE AND MOBILE FRIENDLY STYLES
         ------------------------------------- */
@@ -120,7 +584,7 @@
                             % if recently_added.get('movie'):
                             <div class="wrapper" style="box-sizing: border-box;padding: 5px;overflow: auto;">
                                 <div class="sub-header">
-                                    <div class="sub-header-bar" style="width: 200px;border-top: 1px solid #E5A00D;margin-bottom: 15px;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;"></div>
+                                    <div class="sub-header-bar" style="width: 200px;border-top: 1px solid #E5A00D;margin-top: 25px;margin-bottom: 25px;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;"></div>
                                     <div class="sub-header-title" style="font-weight: lighter;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;">
                                         <img src="http://tautulli.com/images/libraries/movie.png" class="sub-header-icon" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%;height: 30px;vertical-align: middle;margin-right: 5px;margin-bottom: 5px;"> Recently Added Movies
                                     </div>
@@ -178,7 +642,7 @@
                                                 <span class="badge" style="display: inline-block;min-width: 10px;padding: 3px 7px;font-size: 11px;font-style: normal;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: middle;background-color: rgba(0, 0, 0, .25);border-radius: 2px;">${int(int(movie['duration'])/60000)} mins</span>
                                                 % endif
                                                 % if movie['rating']:
-                                                <span class="star-rating" style="width: 60px;font-size: 14px;line-height: 17px;float: right;">
+                                                <span class="star-rating" title="${int(float(movie['rating'])/0.1)}%" style="width: 60px;font-size: 14px;line-height: 17px;float: right;">
                                                     <div class="star-rating-full nowrap" style="width: ${float(movie['rating'])/0.1}%;white-space: nowrap;color: #E5A00D;direction: ltr;padding: 0;overflow: hidden;float: left;">
                                                         <span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span>
                                                     </div>
@@ -197,7 +661,7 @@
                             % if recently_added.get('show'):
                             <div class="wrapper" style="box-sizing: border-box;padding: 5px;overflow: auto;">
                                 <div class="sub-header">
-                                    <div class="sub-header-bar" style="width: 200px;border-top: 1px solid #E5A00D;margin-bottom: 15px;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;"></div>
+                                    <div class="sub-header-bar" style="width: 200px;border-top: 1px solid #E5A00D;margin-top: 25px;margin-bottom: 25px;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;"></div>
                                     <div class="sub-header-title" style="font-weight: lighter;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;">
                                         <img src="http://tautulli.com/images/libraries/show.png" class="sub-header-icon" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%;height: 30px;vertical-align: middle;margin-right: 5px;margin-bottom: 5px;"> Recently Added TV Shows
                                     </div>
@@ -292,7 +756,7 @@
                                                 <span class="badge" style="display: inline-block;min-width: 10px;padding: 3px 7px;font-size: 11px;font-style: normal;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: middle;background-color: rgba(0, 0, 0, .25);border-radius: 2px;">${int(int(show['duration'])/60000)} mins</span>
                                                 % endif
                                                 % if show['rating']:
-                                                <span class="star-rating" style="width: 60px;font-size: 14px;line-height: 17px;float: right;">
+                                                <span class="star-rating" title="${int(float(show['rating'])/0.1)}%" style="width: 60px;font-size: 14px;line-height: 17px;float: right;">
                                                     <div class="star-rating-full nowrap" style="width: ${float(show['rating'])/0.1}%;white-space: nowrap;color: #E5A00D;direction: ltr;padding: 0;overflow: hidden;float: left;">
                                                         <span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span>
                                                     </div>
@@ -311,7 +775,7 @@
                             % if recently_added.get('artist'):
                             <div class="wrapper" style="box-sizing: border-box;padding: 5px;overflow: auto;">
                                 <div class="sub-header">
-                                    <div class="sub-header-bar" style="width: 200px;border-top: 1px solid #E5A00D;margin-bottom: 15px;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;"></div>
+                                    <div class="sub-header-bar" style="width: 200px;border-top: 1px solid #E5A00D;margin-top: 25px;margin-bottom: 25px;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;"></div>
                                     <div class="sub-header-title" style="font-weight: lighter;margin-left: auto;margin-right: auto;font-size: 30px;text-align: center;">
                                         <img src="http://tautulli.com/images/libraries/artist.png" class="sub-header-icon" style="border: none;-ms-interpolation-mode: bicubic;max-width: 100%;height: 30px;vertical-align: middle;margin-right: 5px;margin-bottom: 5px;"> Recently Added Music
                                     </div>
@@ -373,7 +837,7 @@
                                                 % endfor
                                                 % endif
                                                 % if album['rating']:
-                                                <span class="star-rating" style="width: 60px;font-size: 14px;line-height: 17px;float: right;">
+                                                <span class="star-rating" title="${int(float(album['rating'])/0.1)}%" style="width: 60px;font-size: 14px;line-height: 17px;float: right;">
                                                     <div class="star-rating-full nowrap" style="width: ${float(album['rating'])/0.1}%;white-space: nowrap;color: #E5A00D;direction: ltr;padding: 0;overflow: hidden;float: left;">
                                                         <span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span><span style="display: inline-block;text-align: center;width: 12px;">&#9733;</span>
                                                     </div>
@@ -393,7 +857,7 @@
 
                             <!-- START FOOTER -->
                             <div class="footer" style="clear: both;margin-top: 10px;text-align: center;width: 100%;font-size: 12px;">
-                                <div class="footer-bar" style="margin-left: auto;margin-right: auto;width: 200px;border-top: 1px solid #E5A00D;"></div>
+                                <div class="footer-bar" style="margin-left: auto;margin-right: auto;width: 200px;border-top: 1px solid #E5A00D;margin-top: 25px;"></div>
                                 <div class="content-block powered-by" style="padding-bottom: 10px;padding-top: 10px;">
                                     Newsletter generated by <a href="http://tautulli.com" target="_blank" style="color: #fff;text-decoration: underline;font-size: 12px;text-align: center;">Tautulli</a>.
                                 </div>
diff --git a/data/interfaces/newsletters/recently_added_master.html b/data/interfaces/newsletters/recently_added_master.html
index 8088703c..596d9fea 100644
--- a/data/interfaces/newsletters/recently_added_master.html
+++ b/data/interfaces/newsletters/recently_added_master.html
@@ -99,6 +99,7 @@
             margin-right: auto;
             width: 200px;
             border-top: 1px solid #E5A00D;
+            margin-top: 25px;
         }
 
         .footer td,
@@ -297,7 +298,8 @@
         .sub-header-bar {
             width: 200px;
             border-top: 1px solid #E5A00D;
-            margin-bottom: 15px;
+            margin-top: 25px;
+            margin-bottom: 25px;
         }
         .sub-header-title {
             font-weight: lighter;
@@ -640,7 +642,7 @@
                                                 <span class="badge">${int(int(movie['duration'])/60000)} mins</span>
                                                 % endif
                                                 % if movie['rating']:
-                                                <span class="star-rating">
+                                                <span class="star-rating" title="${int(float(movie['rating'])/0.1)}%">
                                                     <div class="star-rating-full nowrap" style="width: ${float(movie['rating'])/0.1}%">
                                                         <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
                                                     </div>
@@ -754,7 +756,7 @@
                                                 <span class="badge">${int(int(show['duration'])/60000)} mins</span>
                                                 % endif
                                                 % if show['rating']:
-                                                <span class="star-rating">
+                                                <span class="star-rating" title="${int(float(show['rating'])/0.1)}%">
                                                     <div class="star-rating-full nowrap" style="width: ${float(show['rating'])/0.1}%">
                                                         <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
                                                     </div>
@@ -835,7 +837,7 @@
                                                 % endfor
                                                 % endif
                                                 % if album['rating']:
-                                                <span class="star-rating">
+                                                <span class="star-rating" title="${int(float(album['rating'])/0.1)}%">
                                                     <div class="star-rating-full nowrap" style="width: ${float(album['rating'])/0.1}%">
                                                         <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
                                                     </div>