diff --git a/app/assets/fonts/quote-after.svg b/app/assets/fonts/quote-after.svg new file mode 100644 index 000000000..748305640 --- /dev/null +++ b/app/assets/fonts/quote-after.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/app/assets/fonts/quote-before.svg b/app/assets/fonts/quote-before.svg new file mode 100644 index 000000000..3620ae1ab --- /dev/null +++ b/app/assets/fonts/quote-before.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/app/assets/images/decide_madrid.png b/app/assets/images/decide_madrid.png new file mode 100644 index 000000000..7ae6b26b4 Binary files /dev/null and b/app/assets/images/decide_madrid.png differ diff --git a/app/assets/images/finger.png b/app/assets/images/finger.png new file mode 100644 index 000000000..eebd36e37 Binary files /dev/null and b/app/assets/images/finger.png differ diff --git a/app/assets/images/logo_header_black.png b/app/assets/images/logo_header_black.png new file mode 100644 index 000000000..7d9242f23 Binary files /dev/null and b/app/assets/images/logo_header_black.png differ diff --git a/app/assets/images/quote-after-blue.png b/app/assets/images/quote-after-blue.png new file mode 100644 index 000000000..f85ad04c4 Binary files /dev/null and b/app/assets/images/quote-after-blue.png differ diff --git a/app/assets/images/quote-after-white.png b/app/assets/images/quote-after-white.png new file mode 100644 index 000000000..5889b1780 Binary files /dev/null and b/app/assets/images/quote-after-white.png differ diff --git a/app/assets/images/quote-before-blue.png b/app/assets/images/quote-before-blue.png new file mode 100644 index 000000000..4c97bc0f7 Binary files /dev/null and b/app/assets/images/quote-before-blue.png differ diff --git a/app/assets/images/quote-before-white.png b/app/assets/images/quote-before-white.png new file mode 100644 index 000000000..78e74b277 Binary files /dev/null and b/app/assets/images/quote-before-white.png differ diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 4a083bb62..9e8af3615 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -65,6 +65,9 @@ $alert-bg: #f2dede; $alert-border: #ebccd1; $color-alert: #a94442; +$pdf-primary: #0300ff; +$pdf-secondary: #ff9e00; + // 2. Foundation settings overrides // --------------------------------- diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index dbe8c9897..a61301d24 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -436,18 +436,54 @@ .dashboard-mail-preview { + max-width: rem-calc(600); + .mail-header { - background: #3700fd; + background: $pdf-primary; color: #fff; - padding: $line-height; - text-align: center; + padding: $line-height * 2; + + img { + max-width: rem-calc(40); + vertical-align: top; + } + + h1 { + font-size: rem-calc(60); + } + + h2 { + margin-top: $line-height; + } + } + + .margin-bottom { + img { + box-shadow: -16px 61px 49px -19px rgba(0, 0, 0, 0.1); + width: 100%; + } } .mail-body { - text-align: justify; + color: $text-medium; + padding: $line-height * 2; + text-align: left; .button { - background: #3700fd; + background: #064c86; + box-shadow: -4px 18px 45px -19px rgba(0, 0, 0, 0.75); + margin-bottom: $line-height * 2; + margin-top: $line-height; + } + + img { + margin-top: $line-height; + max-width: rem-calc(120); + } + + p { + font-size: rem-calc(24); + line-height: rem-calc(30); } } } @@ -455,21 +491,85 @@ // 10. Poster preview // ------------------ -.dashboard-poster-preview { - +.dashboard-poster-preview, +.dashboard-poster-pdf { .poster-header { - background: $brand; + background: $pdf-primary; color: #fff; - padding: $line-height * 2 $line-height $line-height * 6; h1 { color: #fff; - font-size: rem-calc(80); + text-align: left; + } + } + + .proposal-image { + margin: 0 auto; + position: relative; + + &::before { + background: $pdf-secondary; + content: ''; + position: absolute; + } + + .overflow-image { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; + position: relative; + } + } + + .poster-content { + max-width: 90%; + margin: 0 auto; + + h2 { + color: $text-medium; + text-align: left; + } + + h3 { + color: $pdf-primary; + display: inline; + } + + .title-quote { + display: inline-block; + } + + .poster-footer { + border-left: 2px solid $border; + color: $text-medium; + } + } +} + +.dashboard-poster-preview { + + .preview-width { + width: rem-calc(661); + } + + .poster-header { + height: rem-calc(600); + padding: $line-height * 2 $line-height; + + h1 { + font-size: rem-calc(60); line-height: rem-calc(80); + + img { + max-width: rem-calc(50); + } } p { - font-size: rem-calc(24); + font-size: rem-calc(18); + max-width: 60%; + margin: 0 auto; } .intro { @@ -481,51 +581,59 @@ .proposal-image { margin: 0 auto; - max-width: 80%; + max-width: 90%; position: relative; + .overflow-image { + height: 400px; + } + &::before { - background: #ff9e00; - content: ''; height: rem-calc(120); - left: -36px; - position: absolute; - top: -180px; + left: -30px; + 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 { + margin: $line-height 0; + } } - h2 { - color: $text-medium; - margin: $line-height 0; - margin-left: 10%; - text-align: left; - } + .poster-content { - h3 { - color: $brand; - font-size: rem-calc(50); - margin-bottom: $line-height * 2; + img { + max-width: rem-calc(40); + vertical-align: top; + } + + h2 { + font-size: rem-calc(28); + margin: $line-height 0; + } + + h3 { + font-size: rem-calc(45); + margin-bottom: $line-height * 2; + } .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); - margin: 0 auto; - padding-left: $line-height / 2; + font-size: rem-calc(19); + margin-top: rem-calc(50); + padding-left: rem-calc(40); width: 50%; } } @@ -533,90 +641,87 @@ // 11. Poster PDF // -------------- + .dashboard-poster-pdf { .poster-header { - background: $brand; - color: #fff; - padding: rem-calc(320) rem-calc(160) rem-calc(640); - text-align: center; + font-weight: normal; + height: 60cm; + padding: 5cm; h1 { - color: #fff; - font-size: rem-calc(250); + font-size: 6cm; + font-weight: bold; line-height: rem-calc(250); - text-align: left; + + img { + max-width: rem-calc(150); + } } p { + color: #fff; font-size: rem-calc(80); - line-height: rem-calc(80); + line-height: rem-calc(100); &.intro { margin: rem-calc(160) auto; - max-width: 60%; + max-width: 70%; text-align: justify; } + + &.proposal-code { + font-size: 1.7cm; + } } } .proposal-image { margin: 0 auto; - max-width: rem-calc(2000); + max-width: 90%; position: relative; &::before { - background: #ff9e00; - content: ''; - height: rem-calc(400); - left: -120px; - position: absolute; - top: -720px; - width: rem-calc(400); + height: rem-calc(420); + 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(-600); - position: relative; - width: 100%; + .overflow-image { + height: 37cm; + } + + h2 { + margin: $line-height 0; } } .poster-content { - margin: 0 auto; - max-width: rem-calc(2000); - } + img { + height: 3cm; + vertical-align: top; + width: 3cm; + } - h2 { - color: $text-medium; - font-size: rem-calc(80); - margin-top: rem-calc(80); - } + h2 { + font-size: 3cm; + margin: $line-height 0; + } - h3 { - color: $brand; - font-size: rem-calc(200); - 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; + h3 { + font-size: 4.7cm; + line-height: 5.5cm; + margin-top: $line-height; + max-width: 80%; } } .poster-footer { - border-left: 10px solid $border; - color: $text-medium; - font-size: rem-calc(60); - line-height: rem-calc(60); - margin: 0 auto; - max-width: 60%; - padding-left: rem-calc(40); - width: 100%; + display: block; + margin-left: 15cm; + margin-top: 2cm; + max-width: 55%; + padding-left: 4cm; } } diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 3d97084f4..5256b236e 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -292,3 +292,34 @@ .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); + background-repeat: no-repeat; +} + +.icon-quote-after::before { + content: ''; + background-size: cover; + display: block; + width: 60px; + height: 60px; + background-image: url(quote-after.svg); + 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/assets/stylesheets/pdf_fonts.scss.erb b/app/assets/stylesheets/pdf_fonts.scss.erb index bbf549949..07a577fa0 100644 --- a/app/assets/stylesheets/pdf_fonts.scss.erb +++ b/app/assets/stylesheets/pdf_fonts.scss.erb @@ -53,12 +53,13 @@ } @font-face { - font-family: 'Lato PDF'; + font-family: 'Lato PDF'; src: url("<%= ApplicationHelper.asset_data_base64('lato-bold.ttf') %>"); font-weight: bold; font-style: normal; } body, h1, h2, h3 { - font-family: Source Sans Pro PDF !important; + font-family: Lato PDF !important; + font-weight: lighter !important; } diff --git a/app/controllers/dashboard/poster_controller.rb b/app/controllers/dashboard/poster_controller.rb index be880bdac..4484dd447 100644 --- a/app/controllers/dashboard/poster_controller.rb +++ b/app/controllers/dashboard/poster_controller.rb @@ -7,6 +7,8 @@ class Dashboard::PosterController < Dashboard::BaseController format.pdf do render pdf: 'poster', page_size: 'A4', + dpi: 300, + zoom: 0.32, show_as_html: Rails.env.test? || params.key?('debug'), margin: { top: 0 } end diff --git a/app/views/dashboard/mailer/forward.html.erb b/app/views/dashboard/mailer/forward.html.erb index 3788c94aa..f64019f85 100644 --- a/app/views/dashboard/mailer/forward.html.erb +++ b/app/views/dashboard/mailer/forward.html.erb @@ -4,33 +4,36 @@ -
-

<%= @proposal.title %>

-

<%= t("dashboard.mailer.forward.subtitle") %>

+ 		+ <%= image_tag 'quote-before-white.png', style: 'max-width: 40px; vertical-align: top;' %> +

<%= @proposal.title %>

+ <%= image_tag 'quote-after-white.png', style: 'max-width: 40px; vertical-align: top;' %> +

<%= t("dashboard.mailer.forward.subtitle").html_safe %>
<% 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 %> -

<%= t("dashboard.mailer.forward.hi")%>

-

<%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %>

-

<%= t("dashboard.mailer.forward.support") %>

+

<%= t("dashboard.mailer.forward.hi")%>

+

<%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %>

+

<%= t("dashboard.mailer.forward.support") %>

<%= 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 %> @@ -39,13 +42,13 @@
-

<%= t("dashboard.mailer.forward.share") %>

+

<%= t("dashboard.mailer.forward.share") %>

@@ -58,4 +61,5 @@
-

<%= t("dashboard.mailer.forward.share_in") %>

+

<%= t("dashboard.mailer.forward.share_in") %>
+ <%= image_tag("logo_header_black.png", style: "max-width: 120px; display: block; margin: 0 auto; margin-top: 30px") %> diff --git a/app/views/dashboard/mailing/index.html.erb b/app/views/dashboard/mailing/index.html.erb index abca60739..6db3347d3 100644 --- a/app/views/dashboard/mailing/index.html.erb +++ b/app/views/dashboard/mailing/index.html.erb @@ -1,9 +1,11 @@ <% content_for :action_title, t("dashboard.mailing.index.title") %>
-
-
-

<%= proposal.title %>

-

<%= t("dashboard.mailer.forward.subtitle") %>

+
+
+ <%= image_tag 'quote-before-white.png' %> +

<%= proposal.title %>

+ <%= image_tag 'quote-after-white.png' %> +

<%= t("dashboard.mailer.forward.subtitle").html_safe %>

@@ -24,7 +26,9 @@ proposal_url(@proposal), class: "button large" %>
- <%= t("dashboard.mailer.forward.share") %> +

+ <%= t("dashboard.mailer.forward.share") %> +

<%= t("dashboard.mailer.forward.share_in") %>

@@ -32,6 +36,8 @@ title: @proposal.title, url: proposal_url(@proposal), description: @proposal.summary } %> + + <%= image_tag "logo_header_black.png" %>
diff --git a/app/views/dashboard/poster/index.html.erb b/app/views/dashboard/poster/index.html.erb index 6e8e0584c..d0589b2e0 100644 --- a/app/views/dashboard/poster/index.html.erb +++ b/app/views/dashboard/poster/index.html.erb @@ -1,35 +1,36 @@ <% 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") %>

-

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

-
+
+
+

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

+

<%= t("dashboard.poster.index.intro_text", org: Setting["org_name"]).html_safe %>

-
- <% 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.footer") %>

+

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

+
+ <% if proposal.image.present? %> +
+ <% else %> +
);">
+ <% end %> +
+
+

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

+ <%= image_tag 'quote-before-blue.png' %> +

<%= proposal.title %>

+ <%= image_tag 'quote-after-blue.png' %> +

+ <%= t("dashboard.poster.index.footer", link: Setting["url"]).html_safe %> +

+
+
diff --git a/app/views/dashboard/poster/index.pdf.erb b/app/views/dashboard/poster/index.pdf.erb index 58d70bfec..979a31eee 100644 --- a/app/views/dashboard/poster/index.pdf.erb +++ b/app/views/dashboard/poster/index.pdf.erb @@ -9,33 +9,34 @@

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

-

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

-

+

+ <%= t("dashboard.poster.index.intro_text", org: Setting["org_name"]).html_safe %> +

+

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

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

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

-

- " - <%= proposal.title %> - " -

- -

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

+
+ <% if proposal.image.present? %> +
+ <% else %> +
');">
+ <% end %> +
+
+

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

+ <%= wicked_pdf_image_tag 'quote-before-blue.png' %> +

<%= proposal.title %>

+ <%= wicked_pdf_image_tag 'quote-after-blue.png' %> +

+ <%= t("dashboard.poster.index.footer", link: Setting["url"]).html_safe %> +

+
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 29d9a86ec..b1d00f0f3 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -566,11 +566,11 @@ 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 + I am participating in %{org} 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 - footer: Visit decide.madrid.es and support this proposal. We need to be many. Decide your too. Thank you! + footer: Visit %{link} and support this proposal. We need to be many. Decide your too. Thank you! new: title: Poster feature options: @@ -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,
we will achieve it. support_button: Support this proposal share_in: Share in hi: "Hello!" diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 342a74dc9..c2b4f69ce 100644 --- a/config/locales/es/general.yml +++ b/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 + Estoy participando en %{org} 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: Entra en %{link} y apoya esta propuesta. Necesitamos ser muchos. Decide tu también. ¡Gracias! new: title: Funcionalidad de póster options: @@ -588,7 +588,7 @@ es: sent: El e-mail ha sido enviado mailer: forward: - subtitle: Si me apoyas, lo conseguiremos. + subtitle: Si me apoyas,
lo conseguiremos. support_button: Apoyar esta propuesta share_in: Compartir en hi: "¡Hola!"