Fix PDF and email

- Inserted normal quotation marks
- Remove class quote
- Added max width mail preview
- Added some styles in the email
- Added image decide_madrid at the end of the email
- Added cover to the image preview poster and PDF
- Passed scss lint
This commit is contained in:
Alessandro Cuoghi
2019-01-11 18:51:55 +01:00
committed by taitus
parent 003d3e82b0
commit 70171b0e17
7 changed files with 43 additions and 71 deletions

View File

@@ -424,11 +424,17 @@
.dashboard-mail-preview {
max-width: rem-calc(600);
.mail-header {
background: $pdf-primary;
color: #fff;
padding: $line-height;
h1 {
font-size: rem-calc(60);
}
h2 {
margin-top: $line-height;
}
@@ -437,6 +443,7 @@
.margin-bottom {
img {
box-shadow: -16px 61px 49px -19px rgba(0,0,0,0.1);
width: 100%
}
}
@@ -446,6 +453,9 @@
.button {
background: #064c86;
box-shadow: -4px 18px 45px -19px rgba(0,0,0,0.75);
margin-bottom: $line-height;
margin-top: $line-height;
}
img {
@@ -480,11 +490,10 @@
}
.overflow-image{
border: 2px solid red;
overflow: hidden;
background-position: center;
background-size: contain;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
}
}
@@ -498,37 +507,6 @@
text-align: left;
}
.quote {
font-family: Georgia, serif;
font-size: 14px;
blockquote {
border: 0;
}
.curly-quotes:before,
.curly-quotes:after {
color: $pdf-primary;
display: inline-block;
vertical-align: top;
height: rem-calc(18);
line-height: rem-calc(70);
font-size: rem-calc(60);
}
.curly-quotes:before {
content: '\201C';
margin-right: 4px;
margin-left: -8px;
}
.curly-quotes:after {
content: '\201D';
margin-left: 4px;
margin-right: -8px;
}
}
h3 {
color: $pdf-primary;
display: inline;
@@ -539,10 +517,10 @@
}
.poster-footer {
color: $text-medium;
border-left: 2px solid $border;
padding-left: rem-calc(40);
color: $text-medium;
margin: 0 auto;
padding-left: rem-calc(40);
}
}
}
@@ -554,15 +532,15 @@
}
.poster-header {
padding: $line-height * 2 $line-height $line-height * 2;
height: rem-calc(600);
padding: $line-height * 2 $line-height $line-height * 2;
h1 {
font-size: rem-calc(60);
line-height: rem-calc(80);
img {
max-width: rem-calc(50)
max-width: rem-calc(50);
}
}
@@ -648,8 +626,8 @@
line-height: rem-calc(250);
font-weight: bold;
img{
max-width: rem-calc(150)
img {
max-width: rem-calc(150);
}
}
@@ -665,7 +643,7 @@
text-align: justify;
}
&.proposal_code {
&.proposal-code {
font-size: 1.7cm;
}
}
@@ -683,7 +661,7 @@
width: rem-calc(420);
}
.overflow-image{
.overflow-image {
height: 37cm;
}
@@ -695,10 +673,10 @@
.poster-content {
.quote {
.curly-quotes:before,
.curly-quotes:after {
.curly-quotes::before,
.curly-quotes::after {
font-size: rem-calc(200);
height: rem-calc(18);
height: rem-calc(18);
line-height: rem-calc(150);
}
}
@@ -715,9 +693,9 @@
line-height: 5cm;
}
img{
width:5cm;
height:5cm;
img {
width: 5cm;
height: 5cm;
}
}

View File

@@ -4,18 +4,18 @@
<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 style="background: #0300ff; padding: 20px; text-align: left;">
<h1 style="color: #fff; font-size: 60px; line-height: 60px">"<%= @proposal.title %>"</h1>
<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>
@@ -27,10 +27,11 @@
<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 %>
@@ -58,4 +59,5 @@
</tr>
</tbody>
</table>
<%= image_tag("decide_madrid.png", style: "max-width: 120px; display: block; margin: 0 auto; margin-top: 30px") %>
</td>

View File

@@ -2,8 +2,8 @@
<div class="row expanded">
<div class="small-12 medium-9 large-7 column dashboard-mail-preview">
<div class="mail-header text-left">
<h1><%= proposal.title %></h1>
<h2><%= t("dashboard.mailer.forward.subtitle") %></h2>
<h1 class="inline">"<%= proposal.title %>"</h1>
<h2><%= t("dashboard.mailer.forward.subtitle").html_safe %></h2>
</div>
<div class="margin-bottom">

View File

@@ -22,11 +22,7 @@
</div>
<div class="poster-content">
<h2><%= t("dashboard.poster.index.support") %></h2>
<div class="quote">
<blockquote class="curly-quotes">
<h3><%= proposal.title %></h3>
</blockquote>
</div>
<h3>"<%= proposal.title %>"</h3>
<p class="poster-footer"><%= t("dashboard.poster.index.footer").html_safe %></p>
</div>
</div>

View File

@@ -17,24 +17,20 @@
<p class="intro">
<%= t("dashboard.poster.index.intro_text").html_safe %>
</p>
<p class="text-center proposal_code">
<p class="text-center proposal-code">
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
</p>
<div class="proposal-image">
<% if proposal.image.present? %>
<div class="overflow-image" style="background-image:url('<%= "file://#{Rails.root.join('app','assets', proposal.image.attachment.url(:large), )}" %>');"></div>
<%#= wicked_pdf_image_tag proposal.image.attachment.url(:large) %>
<div class="overflow-image" style="background-image: url(<%= asset_url proposal.image.attachment.url(:large) %>);"></div>
<% else %>
<div class="overflow-image" style="background-image:url('<%= "file://#{Rails.root.join('app','assets','images','default_mailing.jpg')}" %>');"></div>
<%#= wicked_pdf_image_tag "default_mailing.jpg" %>
<% end %>
</div>
<div class="poster-content">
<h2 class="text-center"><%= t("dashboard.poster.index.support") %></h2>
<div class="quote">
<blockquote class="curly-quotes">
<h3><%= proposal.title %></h3>
</blockquote>
<h3>"<%= proposal.title %>"</h3>
</div>
<p class="poster-footer"><%= t("dashboard.poster.index.footer").html_safe %></p>
</div>

View File

@@ -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!"

View File

@@ -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!"