Style Preview Pdf

- Customized the preview as shown by email
- Added two svg for quote icons. (Need convert to font)
- Ceate two class for quote icons.
- Added tag strong into yml for text decoration
- Customize css

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>
+	<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 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 d="M32.119,19.713c-0.809,0-1.617,0.101-2.02,0.303c0.898-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.207-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.132l-0.021-0.019
+	c-6.26,4.442-10.401,11.206-10.401,18.78c0,6.562,4.242,10.297,8.985,10.297c4.343,0,7.978-3.634,7.978-7.978
+	C38.984,22.641,35.956,19.713,32.119,19.713z"/>
+</svg>

app/assets/stylesheets/dashboard.scss

@@ -446,18 +446,22 @@
 .dashboard-poster-preview {
 
   .poster-header {
-    background: $brand;
+    //background: $brand;
+    background: #0300ff;
     color: #fff;
-    padding: $line-height * 2 $line-height $line-height * 6;
+    padding: $line-height * 2 $line-height $line-height * 2;
+    height: rem-calc(600);
 
     h1 {
       color: #fff;
-      font-size: rem-calc(80);
+      font-size: rem-calc(60);
       line-height: rem-calc(80);
     }
 
     p {
-      font-size: rem-calc(24);
+      font-size: rem-calc(18);
+      max-width: 60%;
+      margin: 0 auto;
     }
 
     .intro {
@@ -469,66 +473,86 @@
 
   .proposal-image {
     margin: 0 auto;
-    max-width: 80%;
+    max-width: 90%;
     position: relative;
 
     &::before {
       background: #ff9e00;
       content: '';
       height: rem-calc(120);
-      left: -36px;
+      left: -30px;
       position: absolute;
-      top: -180px;
+      top: -20px;
       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(-144);
+      margin-top: rem-calc(10);
       position: relative;
       width: 100%;
     }
+
+    h2 {
+      // color: $text-medium;
+      margin: $line-height 0;
+      // margin-left: 10%;
+      // text-align: left;
+    }
   }
 
-  h2 {
+  .poster-content {
-    color: $text-medium;
+    margin-top: rem-calc(260);
-    margin: $line-height 0;
-    margin-left: 10%;
-    text-align: left;
-  }
 
-  h3 {
+    h2 {
-    color: $brand;
+      font-size: rem-calc(28);
-    font-size: rem-calc(50);
+      color: $text-medium;
-    margin-bottom: $line-height * 2;
+      margin: $line-height 0;
+      margin-left: 10%;
+      text-align: left;
+    }
+
+    h3 {
+      //color: $brand;
+      color: #0300ff;
+      font-size: rem-calc(50);
+      margin-bottom: $line-height * 2;
+      margin-top: $line-height * 2;
+      max-width: 80%;
+      display: inline;
+    }
 
     .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(20);
+    font-size: rem-calc(19);
     margin: 0 auto;
     padding-left: $line-height / 2;
     width: 50%;
+    margin-top: rem-calc(50);
   }
 }
 
 // 11. Poster PDF
 // --------------
 
-.dashboard-poster-pdf {
+@page { margin: 0; }
 
+.dashboard-poster-pdf {
   .poster-header {
     background: $brand;
     color: #fff;
-    padding: rem-calc(320) rem-calc(160) rem-calc(640);
+    padding: $line-height * 2 $line-height $line-height * 2;
+    //padding: rem-calc(320) rem-calc(160) rem-calc(160);
     text-align: center;
 
+
     h1 {
       color: #fff;
       font-size: rem-calc(250);
@@ -552,7 +576,6 @@
     margin: 0 auto;
     max-width: rem-calc(2000);
     position: relative;
-
     &::before {
       background: #ff9e00;
       content: '';
@@ -565,26 +588,34 @@
 
     img {
       box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
-      margin-top: rem-calc(-600);
+      margin-top: rem-calc(50);
       position: relative;
       width: 100%;
     }
+
+    h2 {
+      // color: $text-medium;
+      font-size: rem-calc(80);
+      margin-top: rem-calc(80);
+    }
   }
 
   .poster-content {
     margin: 0 auto;
     max-width: rem-calc(2000);
+
+    h2{
+      max-width: 60%;
+      text-align:left;
+      margin-top: rem-calc(100);
+    }
   }
 
-  h2 {
+
-    color: $text-medium;
-    font-size: rem-calc(80);
-    margin-top: rem-calc(80);
-  }
 
   h3 {
     color: $brand;
-    font-size: rem-calc(200);
+    font-size: rem-calc(170);
     line-height: rem-calc(240);
     margin: rem-calc(80) 0;
     position: relative;

app/assets/stylesheets/icons.scss

@@ -292,3 +292,25 @@
 .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);
+  fill:red;
+  background-repeat: no-repeat;
+}
+
+.icon-quote-after::before {
+  content: '';
+  background-size: cover;
+  display: block;
+  width: 60px;
+  height: 60px;
+  background-image: url(quote-after.svg);
+  fill:red;
+  background-repeat: no-repeat;
+}

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

@@ -5,31 +5,29 @@
       <h1>
         <%= t("dashboard.poster.index.poster_title") %>
         <br>
+        <span class="icon-search"></span>
         <%= t("dashboard.poster.index.poster_subtitle") %>
       </h1>
-      <p class="intro"><%= t("dashboard.poster.index.intro_text") %></p>
+      <p class="intro"><%= t("dashboard.poster.index.intro_text").html_safe %></p>
       <p class="text-center">
         <strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
       </p>
+
+      <div class="proposal-image">
+        <% if proposal.image.present? %>
+          <%= image_tag proposal.image.attachment.url(:large) %>
+        <% else %>
+          <%= image_tag "default_mailing.jpg" %>
+        <% end %>
+      </div>
     </div>
 
-    <div class="proposal-image">
+    <div class="poster-content">
-      <% if proposal.image.present? %>
-        <%= image_tag proposal.image.attachment.url(:large) %>
-      <% else %>
-        <%= image_tag "default_mailing.jpg" %>
-      <% end %>
-    </div>
-
-    <div class="poster-content text-center">
       <h2><%= t("dashboard.poster.index.support") %></h2>
-      <h3>
+      <span class="title-quote icon-quote-before"></span>
-        <span class="title-quote">"</span>
+      <h3><%= proposal.title %></h3>
-        <%= proposal.title %>
+      <span class="title-quote icon-quote-after"></span>
-        <span class="title-quote">"</span>
+      <p class="poster-footer"><%= t("dashboard.poster.index.footer").html_safe %></p>
-      </h3>
-
-      <p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
     </div>
   </div>
 

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

@@ -17,18 +17,19 @@
     <p class="text-center">
       <strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
     </p>
+
+    <div class="proposal-image">
+      <% if proposal.image.present? %>
+        <%= wicked_pdf_image_tag proposal.image.attachment.url(:large) %>
+      <% else %>
+        <%= wicked_pdf_image_tag "default_mailing.jpg" %>
+      <% end %>
+      <h2 class="text-center"><%= t("dashboard.poster.index.support") %></h2>
+    </div>
   </div>
 
-  <div class="proposal-image">
-    <% if proposal.image.present? %>
-      <%= wicked_pdf_image_tag proposal.image.attachment.url(:large) %>
-    <% else %>
-      <%= wicked_pdf_image_tag "default_mailing.jpg" %>
-    <% end %>
-  </div>
 
   <div class="poster-content">
-    <h2><%= t("dashboard.poster.index.support") %></h2>
     <h3>
       <span class="title-quote">"</span>
       <%= proposal.title %>

config/locales/en/general.yml

@@ -566,7 +566,7 @@ 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 Decide Madrid</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

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 Decide Madrid</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 decide.madrid.es y apoya esta propuesta.</strong> Necesitamos ser muchos. Decide tu también. ¡Gracias!
       new:
         title: Funcionalidad de póster
       options: