diff --git a/app/assets/fonts/quote-after.svg b/app/assets/fonts/quote-after.svg new file mode 100644 index 000000000..ae9cce890 --- /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..f8e9b71da --- /dev/null +++ b/app/assets/fonts/quote-before.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 53303f387..2cab2b84e 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -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,66 +473,86 @@ .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; + } } - h2 { - color: $text-medium; - margin: $line-height 0; - margin-left: 10%; - text-align: left; - } + .poster-content { + margin-top: rem-calc(260); - h3 { - color: $brand; - font-size: rem-calc(50); - margin-bottom: $line-height * 2; + 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); + 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{ + max-width: 60%; + text-align:left; + margin-top: rem-calc(100); + } } - h2 { - color: $text-medium; - font-size: rem-calc(80); - margin-top: rem-calc(80); - } + 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; diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 3d97084f4..bee2e2312 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -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; +} diff --git a/app/views/dashboard/poster/index.html.erb b/app/views/dashboard/poster/index.html.erb index 6e8e0584c..68f5e9aff 100644 --- a/app/views/dashboard/poster/index.html.erb +++ b/app/views/dashboard/poster/index.html.erb @@ -5,31 +5,29 @@

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

-

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

+

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

+ +

<%= proposal.title %>

+ +

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

diff --git a/app/views/dashboard/poster/index.pdf.erb b/app/views/dashboard/poster/index.pdf.erb index 58d70bfec..511941e9f 100644 --- a/app/views/dashboard/poster/index.pdf.erb +++ b/app/views/dashboard/poster/index.pdf.erb @@ -17,18 +17,19 @@

<%= 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") %>

+
-
- <% 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 %> diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 29d9a86ec..b54a1cb93 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -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 + I am participating in Decide Madrid 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 diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 46422fd8c..8556c9284 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 Decide Madrid 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 decide.madrid.es y apoya esta propuesta. Necesitamos ser muchos. Decide tu también. ¡Gracias! new: title: Funcionalidad de póster options: