consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style Preview Pdf

Browse Source 
- 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
This commit is contained in:
Alessandro Cuoghi
2019-01-05 17:21:40 +01:00
committed by taitus
parent b6b49c435c
commit 667039b127
8 changed files with 146 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/fonts/quote-after.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
app/assets/fonts/quote-before.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

75
app/assets/stylesheets/dashboard.scss
View File

@@ -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,28 +473,40 @@
.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;
}
}
.poster-content {
margin-top: rem-calc(260);
h2 {
font-size: rem-calc(28);
color: $text-medium;
margin: $line-height 0;
margin-left: 10%;
@@ -498,37 +514,45 @@
}
h3 {
color: $brand;
//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);
vertical-align: baseline;
font-size: rem-calc(50);
}
}
.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{
color: $text-medium;
font-size: rem-calc(80);
margin-top: rem-calc(80);
max-width: 60%;
text-align:left;
margin-top: rem-calc(100);
}
}
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;

22
app/assets/stylesheets/icons.scss
View File

@@ -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;
}

18
app/views/dashboard/poster/index.html.erb
View File

@@ -5,13 +5,13 @@
<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>
<div class="proposal-image">
<% if proposal.image.present? %>
@@ -20,16 +20,14 @@
<%= image_tag "default_mailing.jpg" %>
<% end %>
</div>
</div>
<div class="poster-content text-center">
<div class="poster-content">
<h2><%= t("dashboard.poster.index.support") %></h2>
<h3>
<span class="title-quote">"</span>
<%= proposal.title %>
<span class="title-quote">"</span>
</h3>
<p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
<span class="title-quote icon-quote-before"></span>
<h3><%= proposal.title %></h3>
<span class="title-quote icon-quote-after"></span>
<p class="poster-footer"><%= t("dashboard.poster.index.footer").html_safe %></p>
</div>
</div>

5
app/views/dashboard/poster/index.pdf.erb
View File

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

2
config/locales/en/general.yml
View File

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

6
config/locales/es/general.yml
View File

@@ -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: