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

Style PDF

Browse Source 
- Added icon finger
- Chnage color quote
- Add class icon-finger
- Add some style
- Remove Open Sans
- Arranged the content in the A4
- Remove some style css
This commit is contained in:
Alessandro Cuoghi
2019-01-07 16:28:09 +01:00
committed by taitus
parent 981e718a48
commit 1d910c0073
7 changed files with 138 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/fonts/finger.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
<path style="fill:#FFFFFF;" d="M271,653c-44.117,0-85.611-17.173-116.779-48.363L16.28,466.696
c-7.701-7.701-11.947-17.92-11.947-28.821C4.333,415.283,22.595,397,45.08,397c9.877,0,19.776,2.325,28.608,6.741l58.645,29.333
V183.667C132.333,160.136,151.469,141,175,141s42.667,19.136,42.667,42.667v69.739c6.272-3.648,13.568-5.739,21.333-5.739
c18.581,0,34.432,11.947,40.277,28.544C286.061,271.667,294.232,269,303,269c18.581,0,34.432,11.947,40.277,28.544
c6.784-4.544,14.955-7.211,23.723-7.211c23.531,0,42.667,19.136,42.667,42.667v181.333C409.667,590.792,347.459,653,271,653z
M45.08,418.333c-10.709,0-19.413,8.704-19.413,19.413c0,5.312,2.027,10.197,5.696,13.845l137.963,137.941
c27.136,27.179,63.232,42.133,101.653,42.133c64.704,0,117.355-52.629,117.355-117.333V333c0-11.755-9.557-21.333-21.333-21.333
s-21.333,9.579-21.333,21.333v53.333c0,5.888-4.779,10.667-10.667,10.667c-5.888,0-10.667-4.779-10.667-10.667v-74.667
c0-11.755-9.557-21.333-21.333-21.333s-21.333,9.579-21.333,21.333v74.667c0,5.888-4.779,10.667-10.667,10.667
s-10.667-4.779-10.667-10.667v-96c0-11.755-9.557-21.333-21.333-21.333s-21.333,9.579-21.333,21.333v96
c0,5.888-4.779,10.667-10.667,10.667c-5.888,0-10.667-4.779-10.667-10.667V183.667c0-11.755-9.557-21.333-21.333-21.333
s-21.333,9.579-21.333,21.333v266.667c0,3.691-1.92,7.125-5.056,9.067c-3.115,1.941-7.061,2.112-10.368,0.469l-74.091-37.035
C58.243,419.891,51.672,418.333,45.08,418.333z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
app/assets/fonts/quote-after.svg
View File

@@ -3,7 +3,7 @@
<!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>
<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
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

10
app/assets/fonts/quote-before.svg
View File

@@ -3,14 +3,14 @@
<!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
<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 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
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

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

@@ -443,19 +443,70 @@
// 10. Poster preview
// ------------------
.dashboard-poster-preview {
.dashboard-poster-preview,
.dashboard-poster-pdf {
.poster-header {
//background: $brand;
background: #0300ff;
color: #fff;
h1 {
color: #fff;
text-align: left;
}
}
.proposal-image {
margin: 0 auto;
position: relative;
&::before {
background: #ff9e00;
content: '';
position: absolute;
}
}
.poster-content {
margin: 0 auto;
h2 {
color: $text-medium;
text-align: left;
}
h3 {
color: #0300ff;
display: inline;
}
.title-quote {
display: inline-block;
}
}
.poster-footer {
color: $text-medium;
border-left: 2px solid $border;
}
}
.dashboard-poster-preview {
.preview-min-width {
min-width: 661px;
}
.poster-header {
padding: $line-height * 2 $line-height $line-height * 2;
height: rem-calc(600);
h1 {
color: #fff;
font-size: rem-calc(60);
line-height: rem-calc(80);
.icon-finger::before{
font-size: rem-calc(60);
}
}
p {
@@ -477,50 +528,38 @@
position: relative;
&::before {
background: #ff9e00;
content: '';
height: rem-calc(120);
left: -30px;
position: absolute;
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(10);
position: relative;
width: 100%;
}
h2 {
// color: $text-medium;
margin: $line-height 0;
// margin-left: 10%;
// text-align: left;
}
}
.poster-content {
max-width: 84%;
margin: 0 auto;
margin-top: rem-calc(260);
h2 {
font-size: rem-calc(28);
color: $text-medium;
margin: $line-height 0;
margin-left: 10%;
text-align: left;
}
h3 {
//color: $brand;
color: #0300ff;
font-size: rem-calc(50);
font-size: rem-calc(45);
margin-bottom: $line-height * 2;
margin-top: $line-height * 2;
max-width: 80%;
display: inline;
}
.title-quote {
@@ -530,7 +569,6 @@
}
.poster-footer {
border-left: 2px solid $border;
font-size: rem-calc(19);
margin: 0 auto;
padding-left: $line-height / 2;
@@ -542,28 +580,26 @@
// 11. Poster PDF
// --------------
.dashboard-poster-pdf {
.poster-header {
background: #0300ff;
color: #fff;
padding: 5cm;
text-align: center;
height: 60cm;
h1 {
color: #fff;
font-size: 6cm;
line-height: rem-calc(250);
text-align: left;
img{
width: 4cm;
height: 2.5cm;
}
}
p {
font-size: rem-calc(80);
line-height: rem-calc(80);
font-family: 'Open Sans'; //With Lato not work
font-style: normal;
font-weight: 400;
color: #fff;
&.intro {
@@ -573,7 +609,7 @@
}
&.proposal_code{
font-size: 1.7cm;
font-size: 1.7cm;
}
}
}
@@ -584,77 +620,38 @@
position: relative;
&::before {
background: #ff9e00;
content: '';
height: rem-calc(420);
left: rem-calc(-130px);
position: absolute;
top: rem-calc(-130px);
left: rem-calc(-130);
top: rem-calc(-130);
width: rem-calc(420);
}
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 {
// color: $text-medium;
margin: $line-height 0;
// margin-left: 10%;
// text-align: left;
}
}
// .proposal-image {
// margin: 0 auto;
// max-width: rem-calc(2000);
// position: relative;
// &::before {
// background: #ff9e00;
// content: '';
// height: rem-calc(400);
// left: -120px;
// position: absolute;
// top: -720px;
// width: rem-calc(400);
// }
//
// img {
// box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
// 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 {
max-width: 80%;
margin: 0 auto;
margin-top: 20cm;
h2 {
font-size: rem-calc(28);
color: $text-medium;
font-size: 3cm;
margin: $line-height 0;
margin-left: 10%;
text-align: left;
}
h3 {
color: #0300ff;
font-size: 4.7cm;
margin-bottom: $line-height * 2;
margin-top: $line-height * 2;
margin-top: $line-height;
max-width: 80%;
display: inline;margin: 0 auto;
}
img{
@@ -663,27 +660,11 @@
}
}
h3 {
color: $brand;
font-size: rem-calc(170);
line-height: rem-calc(240);
margin: rem-calc(80) 0;
position: relative;
width: 90%;
.title-quote {
display: inline-block;
top: rem-calc(-40);
vertical-align: baseline;
}
}
.poster-footer {
border-left: 10px solid $border;
color: $text-medium;
font-size: rem-calc(60);
line-height: rem-calc(60);
margin: 0 auto;
margin-top: 2cm;
max-width: 60%;
padding-left: rem-calc(40);
width: 100%;

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

@@ -300,7 +300,6 @@
width: 60px;
height: 60px;
background-image: url(quote-before.svg);
fill:red;
background-repeat: no-repeat;
}
@@ -311,6 +310,16 @@
width: 60px;
height: 60px;
background-image: url(quote-after.svg);
fill:red;
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;
}

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

@@ -1,33 +1,34 @@
<% 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">
<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").html_safe %></p>
<p class="text-center">
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
</p>
<div class="preview-min-width">
<div class="poster-header">
<h1>
<%= t("dashboard.poster.index.poster_title") %>
<br>
<span class="title-quote icon-finger"></span>
<%= t("dashboard.poster.index.poster_subtitle") %>
</h1>
<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 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="poster-content">
<h2><%= t("dashboard.poster.index.support") %></h2>
<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>
<div class="poster-content">
<h2><%= t("dashboard.poster.index.support") %></h2>
<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>

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

@@ -11,8 +11,8 @@
<h1>
<%= t("dashboard.poster.index.poster_title") %>
<br>
<%= t("dashboard.poster.index.poster_subtitle") %>
<%= wicked_pdf_image_tag 'finger.svg' %>
<%= t("dashboard.poster.index.poster_subtitle") %>
</h1>
<p class="intro">
@@ -28,11 +28,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 class="text-center"><%= t("dashboard.poster.index.support") %></h2>
<h3>
<%= wicked_pdf_image_tag 'quote-before.svg' %>
<%= proposal.title %>