Merge pull request #2971 from consul/dashboard-mailer

Dashboard mailer

app/assets/stylesheets/dashboard.scss

@@ -424,7 +424,7 @@
 .dashboard-mail-preview {
 
   .mail-header {
-    background-color: $brand;
+    background: #3700fd;
     color: #fff;
     padding: $line-height;
     text-align: center;
@@ -432,6 +432,10 @@
 
   .mail-body {
     text-align: justify;
+
+    .button {
+      background: #3700fd;
+    }
   }
 }
 

app/assets/stylesheets/dashboard_mailer.scss

@@ -1,66 +0,0 @@
-@import 'application';
-
-body {
-  padding-left: 30%;
-  padding-right: 30%;
-
-  p {
-    text-align: justify;
-  }
-}
-
-header {
-  background-color: #3700fd;
-  color: #fff;
-  padding: 20pt;
-  margin-bottom: 0;
-  border-bottom: 0;
-
-  h1 {
-    font-size: 40pt;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: 25pt;
-    text-align: center;
-  }
-}
-
-.proposal-image {
-  width: 100%;
-}
-
-.mail-body {
-  color: #838383;
-  font-size: 18pt;
-  margin-top: 20pt;
-}
-
-.support-link {
-  display: block;
-  background-color: #004a84;
-  color: #dff;
-  text-decoration: none;
-  border: 1px solid $border;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  font-size: 40pt;
-  padding: 20pt;
-  border-radius: 5pt;
-  text-align: center;
-  margin-top: 50pt;
-  margin-bottom: 50pt;
-}
-
-.support-link:hover {
-  color: #ddffffff;
-  text-decoration: none;
-}
-
-.share-title {
-  font-weight: bold;
-  font-size: 25pt;
-}
-

app/mailers/dashboard/mailer.rb

@@ -1,5 +1,5 @@
 class Dashboard::Mailer < ApplicationMailer
-  layout 'dashboard/mailer'
+  layout 'mailer'
 
   def forward(proposal)
     @proposal = proposal

app/views/dashboard/mailer/forward.html.erb

@@ -1,19 +1,61 @@
-<header>
-  <h1><%= @proposal.title %></h1>
-  <h2><%= t("dashboard.mailer.forward.subtitle") %></h2>
-</header>
-<%= image_tag @proposal.image.attachment.url(:large), class: 'proposal-image' if @proposal.image.present? %>
-<%= image_tag 'default_mailing.jpg', class: 'proposal-image' unless @proposal.image.present? %>
-<div class="mail-body">
-  <%== t("dashboard.mailer.forward.introduction") %>
-  <%= link_to t("dashboard.mailer.forward.support_it"), proposal_url(@proposal), class: 'support-link' %>
-  <%== t("dashboard.mailer.forward.share_info") %>
+<td style="padding-bottom: 20px;padding-left: 10px;font-size: 14px;font-weight: normal;
+           font-family:'Open Sans',arial,sans-serif;line-height: 24px; text-align: justify;">
 
-  <p class="share-title"><%= t("dashboard.mailer.forward.share_in") %></p>
-  <%= render partial: 'shared/social_share', locals: {
-            title: @proposal.title,
-            url: proposal_url(@proposal),
-            description: @proposal.summary
-          } %>
+  <table cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;width: 100%;">
+    <tbody>
+      <tr>
+        <td style="background: #3700fd; padding: 20px; text-align: center;">
+          <h1 style="color: #fff;"><%= @proposal.title %></h1>
+          <h2 style="color: #fff;"><%= t("dashboard.mailer.forward.subtitle") %></h2>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
-</div>
+  <% if @proposal.image.present? %>
+    <%= image_tag @proposal.image.attachment.url(:large), style: "max-width: 100%;" %>
+  <% else %>
+    <%= image_tag "default_mailing.jpg", style: "max-width: 100%;" %>
+  <% end %>
+
+  <p><%= t("dashboard.mailer.forward.hi")%></p>
+  <p><%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %></p>
+  <p><%= t("dashboard.mailer.forward.support") %></p>
+
+  <table style="width: 100%;">
+    <tbody>
+      <tr>
+        <td style="padding-bottom: 12px; padding-top: 24px; text-align: center;">
+          <%= link_to proposal_url(@proposal),
+                      style: "font-family: 'Open Sans',arial,sans-serif; background: #3700fd;
+                      border-radius: 6px; color: #fff !important; font-weight: bold;
+                      padding: 17px 20px; text-align: center; text-decoration: none;
+                      font-size: 20px; min-width: 200px; display: inline-block;",
+                      target: "_blank" do %>
+            <%= t("dashboard.mailer.forward.support_button") %>
+          <% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <p><%= t("dashboard.mailer.forward.share") %></p>
+
+  <table style="width: 100%; margin-top: 24px;">
+    <tbody>
+      <tr>
+        <td style="text-align: center;">
+          <h3><%= t("dashboard.mailer.forward.share_in") %></h3>
+        </td>
+      </tr>
+      <tr>
+        <td style="text-align: center;">
+          <%= link_to proposal_url(@proposal, anchor: "social-share") do %>
+            <%= image_tag("social_buttons_mailer.png", alt: t("dashboard.mailer.forward.share_in"),
+                           style: "max-width: 100%;") %>
+          <% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</td>

app/views/dashboard/mailing/index.html.erb

@@ -15,14 +15,16 @@
     </div>
 
     <div class="mail-body">
-      <%== t("dashboard.mailer.forward.introduction") %>
+      <p><%= t("dashboard.mailer.forward.hi") %></p>
+      <p><%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %></p>
+      <p><%= t("dashboard.mailer.forward.support") %></p>
 
       <div class="text-center">
-        <%= link_to t("dashboard.mailer.forward.support_it"),
+        <%= link_to t("dashboard.mailer.forward.support_button"),
                     proposal_url(@proposal), class: "button large" %>
       </div>
 
-      <%== t("dashboard.mailer.forward.share_info") %>
+      <%= t("dashboard.mailer.forward.share") %>
 
       <div class="text-center">
         <h3><%= t("dashboard.mailer.forward.share_in") %></h3>

app/views/layouts/dashboard/mailer.html.erb

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <%= stylesheet_link_tag "dashboard_mailer" %>
-</head>
-<body>
-  <%= yield %>
-</body>
-</html>