diff --git a/app/assets/fonts/finger.svg b/app/assets/fonts/finger.svg new file mode 100644 index 000000000..c2e3eea1a --- /dev/null +++ b/app/assets/fonts/finger.svg @@ -0,0 +1,17 @@ + + + + diff --git a/app/assets/fonts/quote-after.svg b/app/assets/fonts/quote-after.svg index ae9cce890..748305640 100644 --- a/app/assets/fonts/quote-after.svg +++ b/app/assets/fonts/quote-after.svg @@ -3,7 +3,7 @@ - + - - diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 205f093a2..2b7c6e0ac 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -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%; diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index bee2e2312..5256b236e 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -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; } diff --git a/app/views/dashboard/poster/index.html.erb b/app/views/dashboard/poster/index.html.erb index 68f5e9aff..00390718f 100644 --- a/app/views/dashboard/poster/index.html.erb +++ b/app/views/dashboard/poster/index.html.erb @@ -1,33 +1,34 @@ <% content_for :action_title, t("dashboard.poster.index.title") %>
-
-

- <%= t("dashboard.poster.index.poster_title") %> -
- - <%= t("dashboard.poster.index.poster_subtitle") %> -

-

<%= t("dashboard.poster.index.intro_text").html_safe %>

-

- <%= t("dashboard.poster.index.proposal_code", code: proposal.code) %> -

+
+
+

+ <%= t("dashboard.poster.index.poster_title") %> +
+ + <%= t("dashboard.poster.index.poster_subtitle") %> +

+

<%= t("dashboard.poster.index.intro_text").html_safe %>

+

+ <%= t("dashboard.poster.index.proposal_code", code: proposal.code) %> +

-
- <% if proposal.image.present? %> - <%= image_tag proposal.image.attachment.url(:large) %> - <% else %> - <%= image_tag "default_mailing.jpg" %> - <% end %> +
+ <% if proposal.image.present? %> + <%= image_tag proposal.image.attachment.url(:large) %> + <% else %> + <%= image_tag "default_mailing.jpg" %> + <% end %> +
+
+
+

<%= t("dashboard.poster.index.support") %>

+ +

<%= proposal.title %>

+ +
-
- -
-

<%= t("dashboard.poster.index.support") %>

- -

<%= proposal.title %>

- -
diff --git a/app/views/dashboard/poster/index.pdf.erb b/app/views/dashboard/poster/index.pdf.erb index 30a56ec76..b3ed9c716 100644 --- a/app/views/dashboard/poster/index.pdf.erb +++ b/app/views/dashboard/poster/index.pdf.erb @@ -11,8 +11,8 @@

<%= t("dashboard.poster.index.poster_title") %>
- <%= t("dashboard.poster.index.poster_subtitle") %> - + <%= wicked_pdf_image_tag 'finger.svg' %> + <%= t("dashboard.poster.index.poster_subtitle") %>

@@ -28,11 +28,12 @@ <% else %> <%= wicked_pdf_image_tag "default_mailing.jpg" %> <% end %> -

<%= t("dashboard.poster.index.support") %>

+
+

<%= t("dashboard.poster.index.support") %>

<%= wicked_pdf_image_tag 'quote-before.svg' %> <%= proposal.title %>