From 6f64cffa91d57505da0b1ff49daa810b135584cf Mon Sep 17 00:00:00 2001
From: Vidit <chitkara.vidit@gmail.com>
Date: Thu, 2 Aug 2018 16:37:01 +0530
Subject: [PATCH] improve UI of digest email (#3113)

* improve UI of digest email

* minor changes

* added links to settings and subscriptions
---
 .../subscription_mailer/send_digest.html.erb  | 55 ++++++++++++++-----
 .../previews/subscription_mailer_preview.rb   |  5 ++
 2 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 test/mailers/previews/subscription_mailer_preview.rb

diff --git a/app/views/subscription_mailer/send_digest.html.erb b/app/views/subscription_mailer/send_digest.html.erb
index f89fdc70e26..8365496e243 100644
--- a/app/views/subscription_mailer/send_digest.html.erb
+++ b/app/views/subscription_mailer/send_digest.html.erb
@@ -1,19 +1,46 @@
 <header style="text-align: center;color:black">
 	<img src="https://avatars2.githubusercontent.com/u/4621650?s=200&v=4" style="width: 100px;height: 100px">
-	<p style="font-size: 20px"><%= @user.username.capitalize %>'s Digest</p>
+	<p style="font-size: 20px">[Public Lab] Your Weekly Digest</p>
 </header>
 
-<div style="width: 38vw;margin: 0 auto;margin-top: 54px;color: black;@media (max-width:458px){width: 88vw;}">
-	<p style="font-size: 1.2em; font-family: sans-serif;margin-bottom: 0;color: lightgray;@media (max-width:458px){width: 88vw;}">Top picks for you</p>
-	<hr id="first" style="border: none;height: 1px;background-color: #e2e2e2;width: 38vw;">
-	<ul style="padding: 0;">
-		<% @top_picks.each do |n| %>
-			<li style="display: flex;">
-				<p id="title" style="font-size: 20px;font-weight: bold;font-family: sans-serif;text-align: justify;">
-					<%= n.title %>
-				</p>
-				<a href="<%= n.path %>" style="text-decoration: none;display: flex;align-items: center;padding-left: 20px;">  Read more</a>
-			</li>
-		<% end %>
-	</ul>
+<div style="width: 46vw;margin: 0 auto;margin-top: 54px;color: black;">
+	<p style="font-size: 1.2em; font-family: sans-serif;margin-bottom: 0;color: lightgray;">Top picks for you</p>
+	<hr id="first" style="border: none;height: 1px;background-color: #e2e2e2;margin-bottom: 32px;">
+  <table style="font-family: sans-serif;">
+    <% @top_picks.each do |n| %>
+      <tr>
+        <td>
+          <h3 style="font-weight: 500;margin: 0;" style="margin: 0;"><%= n.title %></h3>
+        </td>
+      </tr>
+      <tr>
+        <td style="padding-top: 26px;">
+          <div style="float: left;">
+            <img style="width:40px;margin-right:8px;border: 1px solid lightgrey;height: 40px;border-radius: 50%;" src="https://www.gravatar.com/avatar/1aedb8d9dc4751e229a335e371db8058" />
+          </div>
+          <div style="float: left;">
+            <b style="font-weight: 500;"><%= n.author.username.capitalize %></b>
+            <p style="margin: 0;color: #999;font-weight: 500;">Published Feb 2</p>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td <% unless n.main_image.present? %> colspan="2" <% end %> style="padding-bottom: 30px;">
+          <p style="font-size: 1.1em;line-height: 1.5;text-align: justify;font-weight: 300;"><%= n.body.truncate(175) %><a href="https://publiclab.org<%= n.path %>" style="text-decoration: none;">  Read more</a></p>
+        </td>
+        <% if n.main_image.present? %>
+          <td style="padding-bottom: 30px;">
+            <img src="<%= node.main_image.path(:default) %>" style="width: 90px;height: 90px;border-radius: 5px;margin-left: 14px;">
+          </td>
+        <% end %>
+      </tr>
+      <tr>
+        <td colspan="2" style="padding-bottom: 32px;">
+          <hr style="border: none;height: 1px;background-color: #e2e2e2;width: 140px;">
+        </td>
+      </tr>
+    <% end %>
+  </table>
+  <p>Click <a href="https://publiclab.org/subscriptions">here</a> to choose your followed topics</p>
+  <p>Click <a href="https://publiclab.org/settings">here</a> to change your subscription settings</p>
 </div>
\ No newline at end of file
diff --git a/test/mailers/previews/subscription_mailer_preview.rb b/test/mailers/previews/subscription_mailer_preview.rb
new file mode 100644
index 00000000000..68b2dad9c65
--- /dev/null
+++ b/test/mailers/previews/subscription_mailer_preview.rb
@@ -0,0 +1,5 @@
+class SubscriptionMailerPreview < ActionMailer::Preview
+  def send_digest
+    SubscriptionMailer.send_digest(User.first.id, Node.last(2))
+  end
+end
\ No newline at end of file