Merge pull request #3261 from Platoniq/dashboard-poster-email-styles

Dashboard poster email styles

app/assets/fonts/quote-after.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<g style="fill:#0300ff;">
+	<path d="M9.223,5.404c-4.342,0-7.979,3.634-7.979,7.977c0,4.342,3.028,7.27,6.865,7.27c0.809,0,1.617-0.102,2.02-0.303
+		c-0.898,3.602-4.307,7.642-7.512,9.387c-0.008,0.003-0.013,0.008-0.019,0.011c-0.024,0.013-0.048,0.031-0.071,0.044l0.003,0.002
+		c-0.354,0.19-0.604,0.553-0.604,0.983c0,0.388,0.207,0.713,0.505,0.916l-0.025,0.024l4.196,2.649l0.013-0.011
+		c0.189,0.143,0.413,0.242,0.669,0.242c0.184,0,0.35-0.055,0.504-0.133l0.021,0.02c6.26-4.443,10.401-11.206,10.401-18.78
+		C18.207,9.139,13.967,5.404,9.223,5.404z"/>
+	<path d="M29.77,5.404c-4.342,0-7.979,3.634-7.979,7.977c0,4.342,3.028,7.27,6.865,7.27c0.809,0,1.617-0.102,2.021-0.303
+		c-0.899,3.602-4.308,7.642-7.513,9.387c-0.008,0.003-0.013,0.008-0.019,0.011c-0.024,0.013-0.048,0.031-0.071,0.044l0.004,0.002
+		c-0.355,0.19-0.605,0.553-0.605,0.983c0,0.388,0.208,0.713,0.505,0.916l-0.024,0.024l4.195,2.649l0.014-0.011
+		c0.188,0.143,0.412,0.242,0.668,0.242c0.184,0,0.35-0.055,0.504-0.133l0.021,0.02c6.26-4.443,10.401-11.206,10.401-18.78
+		C38.754,9.139,34.514,5.404,29.77,5.404z"/>
+</g>
+</svg>

app/assets/fonts/quote-before.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<path style="fill:#0300ff;" d="M11.572,19.713c-0.809,0-1.617,0.101-2.02,0.303c0.899-3.602,4.307-7.642,7.513-9.387c0.007-0.003,0.012-0.008,0.018-0.011
+	c0.024-0.013,0.048-0.031,0.071-0.044l-0.003-0.002c0.355-0.19,0.605-0.552,0.605-0.983c0-0.388-0.208-0.713-0.505-0.916
+	l0.025-0.024l-4.196-2.65L13.067,6.01c-0.189-0.143-0.413-0.242-0.668-0.242c-0.184,0-0.35,0.054-0.504,0.132l-0.021-0.019
+	c-6.26,4.442-10.401,11.206-10.401,18.78c0,6.562,4.241,10.297,8.985,10.297c4.342,0,7.978-3.634,7.978-7.978
+	C18.437,22.641,15.409,19.713,11.572,19.713z"/>
+<path style="fill:#0300ff;" d="M32.119,19.713c-0.809,0-1.617,0.101-2.02,0.303c0.897-3.602,4.307-7.642,7.512-9.387c0.008-0.003,0.013-0.008,0.019-0.011
+	c0.024-0.013,0.048-0.031,0.071-0.044l-0.003-0.002c0.354-0.19,0.604-0.552,0.604-0.983c0-0.388-0.206-0.713-0.505-0.916
+	l0.025-0.024l-4.196-2.65L33.613,6.01c-0.188-0.143-0.412-0.242-0.668-0.242c-0.184,0-0.35,0.054-0.504,0.132L32.42,5.881
+	c-6.26,4.442-10.4,11.206-10.4,18.78c0,6.562,4.242,10.297,8.984,10.297c4.344,0,7.979-3.634,7.979-7.978
+	C38.984,22.641,35.956,19.713,32.119,19.713z"/>
+</svg>

app/assets/stylesheets/_consul_settings.scss

@@ -65,6 +65,9 @@ $alert-bg:          #f2dede;
 $alert-border:      #ebccd1;
 $color-alert:       #a94442;
 
+$pdf-primary:       #0300ff;
+$pdf-secondary:     #ff9e00;
+
 // 2. Foundation settings overrides
 // ---------------------------------
 

app/assets/stylesheets/dashboard.scss

@@ -436,18 +436,54 @@
 
 .dashboard-mail-preview {
 
+  max-width: rem-calc(600);
+
   .mail-header {
-    background: #3700fd;
+    background: $pdf-primary;
     color: #fff;
-    padding: $line-height;
+    padding: $line-height * 2;
-    text-align: center;
+
+    img {
+      max-width: rem-calc(40);
+      vertical-align: top;
+    }
+
+    h1 {
+      font-size: rem-calc(60);
+    }
+
+    h2 {
+      margin-top: $line-height;
+    }
+  }
+
+  .margin-bottom {
+    img {
+      box-shadow: -16px 61px 49px -19px rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
   }
 
   .mail-body {
-    text-align: justify;
+    color: $text-medium;
+    padding: $line-height * 2;
+    text-align: left;
 
     .button {
-      background: #3700fd;
+      background: #064c86;
+      box-shadow: -4px 18px 45px -19px rgba(0, 0, 0, 0.75);
+      margin-bottom: $line-height * 2;
+      margin-top: $line-height;
+    }
+
+    img {
+      margin-top: $line-height;
+      max-width: rem-calc(120);
+    }
+
+    p {
+      font-size: rem-calc(24);
+      line-height: rem-calc(30);
     }
   }
 }
@@ -455,21 +491,85 @@
 // 10. Poster preview
 // ------------------
 
-.dashboard-poster-preview {
+.dashboard-poster-preview,
-
+.dashboard-poster-pdf {
   .poster-header {
-    background: $brand;
+    background: $pdf-primary;
     color: #fff;
-    padding: $line-height * 2 $line-height $line-height * 6;
 
     h1 {
       color: #fff;
-      font-size: rem-calc(80);
+      text-align: left;
+    }
+  }
+
+  .proposal-image {
+    margin: 0 auto;
+    position: relative;
+
+    &::before {
+      background: $pdf-secondary;
+      content: '';
+      position: absolute;
+    }
+
+    .overflow-image {
+      background-position: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      overflow: hidden;
+      position: relative;
+    }
+  }
+
+  .poster-content {
+    max-width: 90%;
+    margin: 0 auto;
+
+    h2 {
+      color: $text-medium;
+      text-align: left;
+    }
+
+    h3 {
+      color: $pdf-primary;
+      display: inline;
+    }
+
+    .title-quote {
+      display: inline-block;
+    }
+
+    .poster-footer {
+      border-left: 2px solid $border;
+      color: $text-medium;
+    }
+  }
+}
+
+.dashboard-poster-preview {
+
+  .preview-width {
+    width: rem-calc(661);
+  }
+
+  .poster-header {
+    height: rem-calc(600);
+    padding: $line-height * 2 $line-height;
+
+    h1 {
+      font-size: rem-calc(60);
       line-height: rem-calc(80);
+
+      img {
+        max-width: rem-calc(50);
+      }
     }
 
     p {
-      font-size: rem-calc(24);
+      font-size: rem-calc(18);
+      max-width: 60%;
+      margin: 0 auto;
     }
 
     .intro {
@@ -481,51 +581,59 @@
 
   .proposal-image {
     margin: 0 auto;
-    max-width: 80%;
+    max-width: 90%;
     position: relative;
 
+    .overflow-image {
+      height: 400px;
+    }
+
     &::before {
-      background: #ff9e00;
-      content: '';
       height: rem-calc(120);
-      left: -36px;
+      left: -30px;
-      position: absolute;
+      top: -20px;
-      top: -180px;
       width: rem-calc(120);
     }
 
     img {
       box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
-      margin-top: rem-calc(-144);
+      margin-top: rem-calc(10);
       position: relative;
       width: 100%;
     }
+
+    h2 {
+      margin: $line-height 0;
+    }
   }
 
-  h2 {
+  .poster-content {
-    color: $text-medium;
-    margin: $line-height 0;
-    margin-left: 10%;
-    text-align: left;
-  }
 
-  h3 {
+    img {
-    color: $brand;
+      max-width: rem-calc(40);
-    font-size: rem-calc(50);
+      vertical-align: top;
-    margin-bottom: $line-height * 2;
+    }
+
+    h2 {
+      font-size: rem-calc(28);
+      margin: $line-height 0;
+    }
+
+    h3 {
+      font-size: rem-calc(45);
+      margin-bottom: $line-height * 2;
+    }
 
     .title-quote {
       display: inline-block;
-      top: rem-calc(-12);
+      font-size: rem-calc(50);
-      vertical-align: baseline;
     }
   }
 
   .poster-footer {
-    border-left: 2px solid $border;
+    font-size: rem-calc(19);
-    font-size: rem-calc(20);
+    margin-top: rem-calc(50);
-    margin: 0 auto;
+    padding-left: rem-calc(40);
-    padding-left: $line-height / 2;
     width: 50%;
   }
 }
@@ -533,90 +641,87 @@
 // 11. Poster PDF
 // --------------
 
+
 .dashboard-poster-pdf {
 
   .poster-header {
-    background: $brand;
+    font-weight: normal;
-    color: #fff;
+    height: 60cm;
-    padding: rem-calc(320) rem-calc(160) rem-calc(640);
+    padding: 5cm;
-    text-align: center;
 
     h1 {
-      color: #fff;
+      font-size: 6cm;
-      font-size: rem-calc(250);
+      font-weight: bold;
       line-height: rem-calc(250);
-      text-align: left;
+
+      img {
+        max-width: rem-calc(150);
+      }
     }
 
     p {
+      color: #fff;
       font-size: rem-calc(80);
-      line-height: rem-calc(80);
+      line-height: rem-calc(100);
 
       &.intro {
         margin: rem-calc(160) auto;
-        max-width: 60%;
+        max-width: 70%;
         text-align: justify;
       }
+
+      &.proposal-code {
+        font-size: 1.7cm;
+      }
     }
   }
 
   .proposal-image {
     margin: 0 auto;
-    max-width: rem-calc(2000);
+    max-width: 90%;
     position: relative;
 
     &::before {
-      background: #ff9e00;
+      height: rem-calc(420);
-      content: '';
+      left: rem-calc(-130);
-      height: rem-calc(400);
+      top: rem-calc(-130);
-      left: -120px;
+      width: rem-calc(420);
-      position: absolute;
-      top: -720px;
-      width: rem-calc(400);
     }
 
-    img {
+    .overflow-image {
-      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
+      height: 37cm;
-      margin-top: rem-calc(-600);
+    }
-      position: relative;
+
-      width: 100%;
+    h2 {
+      margin: $line-height 0;
     }
   }
 
   .poster-content {
-    margin: 0 auto;
+    img {
-    max-width: rem-calc(2000);
+      height: 3cm;
-  }
+      vertical-align: top;
+      width: 3cm;
+    }
 
-  h2 {
+    h2 {
-    color: $text-medium;
+      font-size: 3cm;
-    font-size: rem-calc(80);
+      margin: $line-height 0;
-    margin-top: rem-calc(80);
+    }
-  }
 
-  h3 {
+    h3 {
-    color: $brand;
+      font-size: 4.7cm;
-    font-size: rem-calc(200);
+      line-height: 5.5cm;
-    line-height: rem-calc(240);
+      margin-top: $line-height;
-    margin: rem-calc(80) 0;
+      max-width: 80%;
-    position: relative;
-    width: 90%;
-
-    .title-quote {
-      display: inline-block;
-      top: rem-calc(-40);
-      vertical-align: baseline;
     }
   }
 
   .poster-footer {
-    border-left: 10px solid $border;
+    display: block;
-    color: $text-medium;
+    margin-left: 15cm;
-    font-size: rem-calc(60);
+    margin-top: 2cm;
-    line-height: rem-calc(60);
+    max-width: 55%;
-    margin: 0 auto;
+    padding-left: 4cm;
-    max-width: 60%;
-    padding-left: rem-calc(40);
-    width: 100%;
   }
 }

app/assets/stylesheets/icons.scss

@@ -292,3 +292,34 @@
 .icon-bars::before {
   content: '\22';
 }
+
+.icon-quote-before::before {
+  content: '';
+  background-size: cover;
+  display: block;
+  width: 60px;
+  height: 60px;
+  background-image: url(quote-before.svg);
+  background-repeat: no-repeat;
+}
+
+.icon-quote-after::before {
+  content: '';
+  background-size: cover;
+  display: block;
+  width: 60px;
+  height: 60px;
+  background-image: url(quote-after.svg);
+  background-repeat: no-repeat;
+}
+
+
+.icon-finger::before {
+  content: '';
+  background-size: cover;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background-image: url(finger.svg);
+  background-repeat: no-repeat;
+}

app/assets/stylesheets/pdf_fonts.scss.erb

@@ -53,12 +53,13 @@
 }
 
 @font-face {
-  font-family: 'Lato PDF'; 
+  font-family: 'Lato PDF';
   src: url("<%= ApplicationHelper.asset_data_base64('lato-bold.ttf') %>");
   font-weight: bold;
   font-style: normal;
 }
 
 body, h1, h2, h3 {
-  font-family: Source Sans Pro PDF !important;
+  font-family: Lato PDF !important;
+  font-weight: lighter !important;
 }

app/controllers/dashboard/poster_controller.rb

@@ -7,6 +7,8 @@ class Dashboard::PosterController < Dashboard::BaseController
       format.pdf do
         render pdf: 'poster',
                page_size: 'A4',
+               dpi: 300,
+               zoom: 0.32,
                show_as_html: Rails.env.test? || params.key?('debug'),
                margin:  { top: 0 }
       end

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

@@ -4,33 +4,36 @@
   <table cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;width: 100%;">
     <tbody>
       <tr>
-        <td style="background: #3700fd; padding: 20px; text-align: center;">
+        <td style="background: #0300ff; padding: 50px; padding-top:40px; text-align: left;">
-          <h1 style="color: #fff;"><%= @proposal.title %></h1>
+          <%= image_tag 'quote-before-white.png', style: 'max-width: 40px; vertical-align: top;' %>
-          <h2 style="color: #fff;"><%= t("dashboard.mailer.forward.subtitle") %></h2>
+          <h1 style="color: #fff; font-size: 60px; line-height: 90px; display: inline;"><%= @proposal.title %></h1>
+          <%= image_tag 'quote-after-white.png', style: 'max-width: 40px; vertical-align: top;' %>
+          <h2 style="color: #fff; font-size: 40px; line-height: 60px"><%= t("dashboard.mailer.forward.subtitle").html_safe %></h2>
         </td>
       </tr>
     </tbody>
   </table>
 
   <% if @proposal.image.present? %>
-    <%= image_tag @proposal.image.attachment.url(:large), style: "max-width: 100%;" %>
+    <%= image_tag @proposal.image.attachment.url(:large), style: "width: 100%; box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);" %>
   <% else %>
-    <%= image_tag "default_mailing.jpg", style: "max-width: 100%;" %>
+    <%= image_tag "default_mailing.jpg", style: "width: 100%; box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);" %>
   <% end %>
 
-  <p><%= t("dashboard.mailer.forward.hi")%></p>
+  <p style="padding: 0 50px; font-size:32px; text-align: left; line-height:43px; color: #515151;"><%= t("dashboard.mailer.forward.hi")%></p>
-  <p><%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %></p>
+  <p style="padding: 0 50px; font-size:32px; text-align: left; line-height:43px; color: #515151;"><%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %></p>
-  <p><%= t("dashboard.mailer.forward.support") %></p>
+  <p style="padding: 0 50px; font-size:32px; text-align: left; line-height:43px; color: #515151;"><%= 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;
+                      style: "font-family: 'Open Sans',arial,sans-serif; background: #064c86;
                       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;",
+                      font-size: 20px; min-width: 200px; display: inline-block;
+                      box-shadow: -4px 18px 45px -19px rgba(0,0,0,0.75);",
                       target: "_blank" do %>
             <%= t("dashboard.mailer.forward.support_button") %>
           <% end %>
@@ -39,13 +42,13 @@
     </tbody>
   </table>
 
-  <p><%= t("dashboard.mailer.forward.share") %></p>
+  <p style="padding: 0 50px; font-size:32px; text-align: left; line-height:43px; color: #515151;"><%= 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>
+          <h3 style="font-size: 22px; line-height: 10px;"><%= t("dashboard.mailer.forward.share_in") %></h3>
         </td>
       </tr>
       <tr>
@@ -58,4 +61,5 @@
       </tr>
     </tbody>
   </table>
+  <%= image_tag("logo_header_black.png", style: "max-width: 120px; display: block; margin: 0 auto; margin-top: 30px") %>
 </td>

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

@@ -1,9 +1,11 @@
 <% content_for :action_title, t("dashboard.mailing.index.title") %>
 <div class="row expanded">
-  <div class="small-12 medium-9 large-7 column dashboard-mail-preview">
+  <div class="small-12 medium-9 dashboard-mail-preview column dashboard-mail-preview">
-    <div class="mail-header">
+    <div class="mail-header text-left">
-      <h1><%= proposal.title %></h1>
+      <%= image_tag 'quote-before-white.png' %>
-      <h2><%= t("dashboard.mailer.forward.subtitle") %></h2>
+      <h1 class="inline"><%= proposal.title %></h1>
+      <%= image_tag 'quote-after-white.png' %>
+      <h2><%= t("dashboard.mailer.forward.subtitle").html_safe %></h2>
     </div>
 
     <div class="margin-bottom">
@@ -24,7 +26,9 @@
                     proposal_url(@proposal), class: "button large" %>
       </div>
 
-      <%= t("dashboard.mailer.forward.share") %>
+      <p>
+        <%= t("dashboard.mailer.forward.share") %>
+      </p>
 
       <div class="text-center">
         <h3><%= t("dashboard.mailer.forward.share_in") %></h3>
@@ -32,6 +36,8 @@
                    title: @proposal.title,
                    url: proposal_url(@proposal),
                    description: @proposal.summary } %>
+
+        <%= image_tag "logo_header_black.png" %>
       </div>
     </div>
   </div>

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

@@ -1,35 +1,36 @@
 <% content_for :action_title, t("dashboard.poster.index.title") %>
 <div class="row expanded">
   <div class="small-12 medium-9 column dashboard-poster-preview">
-    <div class="poster-header">
+    <div class="preview-width show-for-large">
-      <h1>
+      <div class="poster-header">
-        <%= t("dashboard.poster.index.poster_title") %>
+        <h1>
-        <br>
+          <%= t("dashboard.poster.index.poster_title") %>
-        <%= t("dashboard.poster.index.poster_subtitle") %>
+          <br>
-      </h1>
+          <%= image_tag("finger.png") %>
-      <p class="intro"><%= t("dashboard.poster.index.intro_text") %></p>
+          <%= t("dashboard.poster.index.poster_subtitle") %>
-      <p class="text-center">
+        </h1>
-        <strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
+        <p class="intro"><%= t("dashboard.poster.index.intro_text", org: Setting["org_name"]).html_safe %></p>
-      </p>
-    </div>
 
-    <div class="proposal-image">
+        <p class="text-center">
-      <% if proposal.image.present? %>
+          <strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
-        <%= image_tag proposal.image.attachment.url(:large) %>
+        </p>
-      <% else %>
+        <div class="proposal-image">
-        <%= image_tag "default_mailing.jpg" %>
+          <% if proposal.image.present? %>
-      <% end %>
+            <div class="overflow-image" style="background-image: url(<%= asset_url proposal.image.attachment.url(:large) %>);"></div>
-    </div>
+          <% else %>
-
+            <div class="overflow-image" style="background-image: url(<%= asset_url "default_mailing.jpg"%>);"></div>
-    <div class="poster-content text-center">
+          <% end %>
-      <h2><%= t("dashboard.poster.index.support") %></h2>
+        </div>
-      <h3>
+        <div class="poster-content">
-        <span class="title-quote">"</span>
+          <h2><%= t("dashboard.poster.index.support") %></h2>
-        <%= proposal.title %>
+            <%= image_tag 'quote-before-blue.png' %>
-        <span class="title-quote">"</span>
+            <h3><%= proposal.title %></h3>
-      </h3>
+            <%= image_tag 'quote-after-blue.png' %>
-
+          <p class="poster-footer">
-      <p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
+            <%= t("dashboard.poster.index.footer", link: Setting["url"]).html_safe %>
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 

app/views/dashboard/poster/index.pdf.erb

@@ -9,33 +9,34 @@
 <body class="dashboard-poster-pdf">
   <div class="poster-header">
     <h1>
-      <%= t("dashboard.poster.index.poster_title") %>
+      <strong><%= t("dashboard.poster.index.poster_title") %>
       <br>
+      <%= wicked_pdf_image_tag("finger.png") %>
       <%= t("dashboard.poster.index.poster_subtitle") %>
+      </strong>
     </h1>
-    <p class="intro"><%= t("dashboard.poster.index.intro_text") %></p>
+    <p class="intro">
-    <p class="text-center">
+      <%= t("dashboard.poster.index.intro_text", org: Setting["org_name"]).html_safe %>
+    </p>
+    <p class="text-center proposal-code">
       <strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
     </p>
-  </div>
+    <div class="proposal-image">
-
+      <% if proposal.image.present? %>
-  <div class="proposal-image">
+        <div class="overflow-image" style="background-image: url(<%= asset_url proposal.image.attachment.url(:large) %>);"></div>
-    <% if proposal.image.present? %>
+      <% else %>
-      <%= wicked_pdf_image_tag proposal.image.attachment.url(:large) %>
+        <div class="overflow-image" style="background-image:url('<%= "file://#{Rails.root.join('app','assets','images','default_mailing.jpg')}" %>');"></div>
-    <% else %>
+      <% end %>
-      <%= wicked_pdf_image_tag "default_mailing.jpg" %>
+    </div>
-    <% end %>
+    <div class="poster-content">
-  </div>
+      <h2 class="text-center"><strong><%= t("dashboard.poster.index.support") %></strong></h2>
-
+      <%= wicked_pdf_image_tag 'quote-before-blue.png' %>
-  <div class="poster-content">
+      <h3><strong><%= proposal.title %></strong></h3>
-    <h2><%= t("dashboard.poster.index.support") %></h2>
+      <%= wicked_pdf_image_tag 'quote-after-blue.png' %>
-    <h3>
+      <p class="poster-footer">
-      <span class="title-quote">"</span>
+        <%= t("dashboard.poster.index.footer", link: Setting["url"]).html_safe %>
-      <%= proposal.title %>
+      </p>
-      <span class="title-quote">"</span>
+    </div>
-    </h3>
-
-    <p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
   </div>
 </body>
 </html>

config/locales/en/general.yml

@@ -566,11 +566,11 @@ en:
         poster_title: "Do not keep looking,"
         poster_subtitle: "back me up! ;)"
         intro_text:
-          I am participating in Decide Madrid with my own citizen proposal and only if you also add you can I achieve the
+          <strong>I am participating in %{org}</strong> with my own citizen proposal and only if you also add you can I achieve the
           necessary support to make Madrid the city we all want.
         proposal_code: "Code of the proposal: %{code}"
         support: Support my proposal
-        footer: Visit decide.madrid.es and support this proposal. We need to be many. Decide your too. Thank you!
+        footer: Visit %{link} and support this proposal. We need to be many. Decide your too. Thank you!
       new:
         title: Poster feature
       options:
@@ -588,7 +588,7 @@ en:
         sent: The email has been sent
     mailer:
       forward:
-        subtitle: If you support me, we will achieve it.
+        subtitle: If you support me, <br>we will achieve it.
         support_button: Support this proposal
         share_in: Share in
         hi: "Hello!"

config/locales/es/general.yml

@@ -563,14 +563,14 @@ es:
     poster:
       index:
         title: Previsualización del poster
-        poster_title: "No te quedes mirando"
+        poster_title: "No te quedes mirando,"
         poster_subtitle: "¡apóyame! ;)"
         intro_text:
-          Estoy participando en Decide Madrid con mi propia propuesta ciudadana y sólo si tú también te sumas podré lograr el
+          <strong>Estoy participando en %{org}</strong> con mi propia propuesta ciudadana y sólo si tú también te sumas podré lograr el
           apoyo necesario para hacer de madrid la ciudad que todos queremos.
         proposal_code: "Código de la propuesta: %{code}"
         support: Apoya mi propuesta
-        footer: Entra en decide.madrid.es y apoya esta propuesta. Necesitamos ser muchos. Decide tu también. ¡Gracias!
+        footer: <strong>Entra en %{link} y apoya esta propuesta.</strong> Necesitamos ser muchos. Decide tu también. ¡Gracias!
       new:
         title: Funcionalidad de póster
       options:
@@ -588,7 +588,7 @@ es:
         sent: El e-mail ha sido enviado
     mailer:
       forward:
-        subtitle: Si me apoyas, lo conseguiremos.
+        subtitle: Si me apoyas, <br>lo conseguiremos.
         support_button: Apoyar esta propuesta
         share_in: Compartir en
         hi: "¡Hola!"