diff --git a/app/assets/stylesheets/budgets/investments/form.scss b/app/assets/stylesheets/budgets/investments/form.scss index af84d9ec9..4d8c15d01 100644 --- a/app/assets/stylesheets/budgets/investments/form.scss +++ b/app/assets/stylesheets/budgets/investments/form.scss @@ -1,57 +1,3 @@ .budget-investment-form { - - .required-fields { - @include full-width-background($adjust-padding: true); - background: $light; - margin-bottom: $line-height; - padding-top: $line-height; - } - - > fieldset > legend { - float: left; - font-size: rem-calc(36); - font-weight: bold; - margin-bottom: $line-height; - text-transform: uppercase; - - + * { - clear: left; - } - } - - select { - min-height: $line-height * 2; - - @include breakpoint(medium) { - &:not(.js-add-language):not(.js-select-language) { - width: 50%; - } - } - } - - .globalize-languages, - .translatable-fields { - @include grid-row-nest; - @include grid-column-gutter; - } - - [type="submit"] { - @include regular-button; - font-size: map-get($button-sizes, large); - margin-top: $line-height; - } - - .actions { - border: 6px solid $border; - border-radius: rem-calc(12); - margin-left: auto; - margin-right: auto; - margin-top: $line-height * 2; - padding: $line-height * 2 $line-height; - text-align: center; - - @include breakpoint(medium) { - width: 75%; - } - } + @extend %public-form; } diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss index 213cc9258..95d1e2e09 100644 --- a/app/assets/stylesheets/budgets/investments/new.scss +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -1,105 +1,7 @@ .budget-investment-new { - $border-width: 4px; + @extend %public-form-header; h1 { - margin-bottom: 0; - } - - header { - $icon-size: $line-height * 4; - $padding-right: rem-calc(20); - $icon-size-with-padding: $icon-size + $padding-right; - $polygon-size: $icon-size / 2; - @include background-till-left-of-screen; - @include brand-background($brand-secondary); - border: $border-width solid $brand-secondary; - border-bottom-right-radius: rem-calc(12); - border-top-right-radius: rem-calc(12); - margin-top: $line-height * 2; - padding: $line-height * 2 0; - position: relative; - - @include breakpoint(small) { - &::after { - display: none; - } - } - - @include breakpoint(large) { - $rounding-error: 6px; - padding-right: $icon-size-with-padding; - background-image: linear-gradient( - to right, - #{$brand-secondary} 0, - #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px), - #{$body-background} calc(100% - #{$icon-size-with-padding}), - #{$body-background} 100% - ); - - &::after { - background: $body-background; - content: ""; - clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%); - display: block; - position: absolute; - right: calc(#{$icon-size-with-padding} - #{$rounding-error}); - top: 0; - height: 100%; - width: $polygon-size; - } - } - - &::before { - top: -$border-width; - height: calc(100% + #{$border-width * 2}); - } - - h1 { - $heading-icon-size: $icon-size * 0.85; - @include has-fa-icon(building, regular); - @include has-fa-icon(chart-pie, solid, after); - font-size: rem-calc(36); - - @include breakpoint(small) { - &::after, - &::before { - display: none; - position: absolute; - top: 50%; - transform: translateY(-50%); - } - } - - @include breakpoint(medium) { - padding-right: $heading-icon-size * 2.5; - - &::after { - display: block; - font-size: $heading-icon-size; - right: $heading-icon-size; - } - } - - @include breakpoint(large) { - font-size: rem-calc(44); - - &::after { - right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2; - } - - &::before { - color: $brand-secondary; - display: block; - font-size: $icon-size; - right: $padding-right; - } - } - - span { - display: block; - font-size: 0.75em; - margin-top: $line-height / 2; - } - } + @include has-fa-icon(chart-pie, solid, after); } } diff --git a/app/assets/stylesheets/debates/form.scss b/app/assets/stylesheets/debates/form.scss index ddc1df0c7..749053aee 100644 --- a/app/assets/stylesheets/debates/form.scss +++ b/app/assets/stylesheets/debates/form.scss @@ -1,8 +1,3 @@ .debate-form { - - .globalize-languages, - .translatable-fields { - @include grid-row-nest; - @include grid-column-gutter; - } + @extend %public-form; } diff --git a/app/assets/stylesheets/debates/new.scss b/app/assets/stylesheets/debates/new.scss new file mode 100644 index 000000000..5c212c2c9 --- /dev/null +++ b/app/assets/stylesheets/debates/new.scss @@ -0,0 +1,15 @@ +.debate-new { + @extend %public-form-header; + + h1 { + @include has-fa-icon(comment-alt, regular, after); + } + + aside { + margin-top: $line-height; + } + + .recommendations li::before { + color: $debates; + } +} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 5a70af40d..86af0edae 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -68,6 +68,7 @@ main { display: block; &.budget-investment-new, + &.debate-new, &.sdg-goals-index, &.sdg-goal-show { @include grid-column-gutter; diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss new file mode 100644 index 000000000..c321b6acb --- /dev/null +++ b/app/assets/stylesheets/mixins/forms.scss @@ -0,0 +1,178 @@ +@import "mixins/icons"; +@import "mixins/layouts"; + +@mixin public-form-header { + $border-width: 4px; + + h1 { + margin-bottom: 0; + } + + header { + $icon-size: $line-height * 4; + $padding-right: rem-calc(20); + $icon-size-with-padding: $icon-size + $padding-right; + $polygon-size: $icon-size / 2; + @include background-till-left-of-screen; + @include brand-background($brand-secondary); + border: $border-width solid $brand-secondary; + border-bottom-right-radius: rem-calc(12); + border-top-right-radius: rem-calc(12); + margin-top: $line-height * 2; + padding: $line-height * 2 0; + position: relative; + + @include breakpoint(small) { + &::after { + display: none; + } + } + + @include breakpoint(large) { + $rounding-error: 6px; + padding-right: $icon-size-with-padding; + background-image: linear-gradient( + to right, + #{$brand-secondary} 0, + #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px), + #{$body-background} calc(100% - #{$icon-size-with-padding}), + #{$body-background} 100% + ); + + &::after { + background: $body-background; + content: ""; + clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%); + display: block; + position: absolute; + right: calc(#{$icon-size-with-padding} - #{$rounding-error}); + top: 0; + height: 100%; + width: $polygon-size; + } + } + + &::before { + top: -$border-width; + height: calc(100% + #{$border-width * 2}); + } + + h1 { + $heading-icon-size: $icon-size * 0.85; + @include has-fa-icon(building, regular); + font-size: rem-calc(36); + + @include breakpoint(small) { + &::after, + &::before { + display: none; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + } + + @include breakpoint(medium) { + padding-right: $heading-icon-size * 2.5; + + &::after { + display: block; + font-size: $heading-icon-size; + right: $heading-icon-size; + } + } + + @include breakpoint(large) { + font-size: rem-calc(44); + + &::after { + right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2; + } + + &::before { + color: $brand-secondary; + display: block; + font-size: $icon-size; + right: $padding-right; + } + } + + span { + display: block; + font-size: 0.75em; + margin-top: $line-height / 2; + } + } + + a { + color: inherit; + text-decoration: underline; + } + } +} + +%public-form-header { + @include public-form-header; +} + +@mixin public-form { + + .required-fields { + @include full-width-background($adjust-padding: true); + background: $light; + margin-bottom: $line-height; + padding-top: $line-height; + } + + > fieldset > legend { + float: left; + font-size: rem-calc(36); + font-weight: bold; + margin-bottom: $line-height; + text-transform: uppercase; + + + * { + clear: left; + } + } + + select { + min-height: $line-height * 2; + + @include breakpoint(medium) { + &:not(.js-add-language):not(.js-select-language) { + width: 50%; + } + } + } + + .globalize-languages, + .translatable-fields { + @include grid-row-nest; + @include grid-column-gutter; + } + + [type="submit"] { + @include regular-button; + font-size: map-get($button-sizes, large); + margin-top: $line-height; + } + + .actions { + border: 6px solid $border; + border-radius: rem-calc(12); + margin-left: auto; + margin-right: auto; + margin-top: $line-height * 2; + padding: $line-height * 2 $line-height; + text-align: center; + + @include breakpoint(medium) { + width: 75%; + } + } +} + +%public-form { + @include public-form; +} diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index aa4f2bc39..d498bb70f 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -244,20 +244,14 @@ // 02. New participation // --------------------- -.debate-new, .proposal-new { - .icon-debates, .icon-proposals { font-size: rem-calc(50); line-height: $line-height; opacity: 0.5; } - .icon-debates { - color: $debates; - } - .icon-proposals { color: $proposals; } @@ -279,13 +273,6 @@ } } -.debate-new { - - .recommendations li::before { - color: $debates; - } -} - .proposal-new { .recommendations li::before { diff --git a/app/components/debates/form_component.html.erb b/app/components/debates/form_component.html.erb index fa034ed14..f7d1b2098 100644 --- a/app/components/debates/form_component.html.erb +++ b/app/components/debates/form_component.html.erb @@ -1,47 +1,55 @@ <%= translatable_form_for(debate, html: { class: "debate-form" }) do |f| %> <%= render "shared/errors", resource: debate %> - <%= render "shared/globalize_locales", resource: debate %> +
+ <%= t("shared.required") %> - <%= f.translatable_fields do |translations_form| %> -
- <%= translations_form.text_field :title, - maxlength: Debate.title_max_length, - data: suggest_data(debate) %> -
-
+ <%= render "shared/globalize_locales", resource: debate %> -
- <%= translations_form.text_area :description, - maxlength: Debate.description_max_length, - class: "html-area" %> -
- <% end %> + <%= f.translatable_fields do |translations_form| %> +
+ <%= translations_form.text_field :title, + maxlength: Debate.title_max_length, + data: suggest_data(debate) %> +
+
+ +
+ <%= translations_form.text_area :description, + maxlength: Debate.description_max_length, + class: "html-area" %> +
+ <% end %> +
<%= f.invisible_captcha :subtitle %> -
- <%= f.text_field :tag_list, value: debate.tag_list.to_s, - hint: t("debates.form.tags_instructions"), - placeholder: t("debates.form.tags_placeholder"), - data: { js_url: suggest_tags_path }, - class: "tag-autocomplete" %> -
+
+ <%= t("shared.optional") %> - <%= render SDG::RelatedListSelectorComponent.new(f) %> +
+ <%= f.text_field :tag_list, value: debate.tag_list.to_s, + hint: t("debates.form.tags_instructions"), + placeholder: t("debates.form.tags_placeholder"), + data: { js_url: suggest_tags_path }, + class: "tag-autocomplete" %> +
-
- <% if debate.new_record? %> - <%= f.check_box :terms_of_service, - title: t("form.accept_terms_title"), - label: t("form.accept_terms", - policy: link_to(t("form.policy"), "/privacy", target: "blank"), - conditions: link_to(t("form.conditions"), "/conditions", target: "blank") - ) %> - <% end %> -
+ <%= render SDG::RelatedListSelectorComponent.new(f) %> +
+ <% if debate.new_record? %> +
+ <%= f.check_box :terms_of_service, + title: t("form.accept_terms_title"), + label: t("form.accept_terms", + policy: link_to(t("form.policy"), "/privacy", target: "blank"), + conditions: link_to(t("form.conditions"), "/conditions", target: "blank") + ) %> +
+ <% end %> + <%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %>
<% end %> diff --git a/app/components/debates/new_component.html.erb b/app/components/debates/new_component.html.erb index d3618205e..91510dd95 100644 --- a/app/components/debates/new_component.html.erb +++ b/app/components/debates/new_component.html.erb @@ -1,30 +1,22 @@ -
+
+ <%= back_link_to debates_path, t("debates.index.section_header.title") %> -
- <%= back_link_to debates_path %> + <%= header do %> + <%= link_to help_path(anchor: "debates"), title: t("shared.target_blank"), target: "_blank" do %> + <%= t("debates.new.more_info") %> + <% end %> + <% end %> -

<%= t("debates.new.start_new") %>

-
- <%= sanitize(t("debates.new.info", - info_link: link_to(t("debates.new.info_link"), new_proposal_path))) %> - - <% if feature?(:help_page) %> - <%= link_to help_path, title: t("shared.target_blank"), target: "_blank" do %> - <%= t("debates.new.more_info") %> - <% end %> - <% end %> -
- <%= render Debates::FormComponent.new(debate) %> -
- -
- +
-
+ + + <%= render Debates::FormComponent.new(debate) %> + diff --git a/app/components/debates/new_component.rb b/app/components/debates/new_component.rb index 2b0ac9787..7ca2c1c9f 100644 --- a/app/components/debates/new_component.rb +++ b/app/components/debates/new_component.rb @@ -1,7 +1,12 @@ class Debates::NewComponent < ApplicationComponent + include Header attr_reader :debate def initialize(debate) @debate = debate end + + def title + t("debates.new.start_new") + end end diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index d0d1ff500..a9abab348 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -127,9 +127,7 @@ en: new: form: submit_button: Start a debate - info: If you want to make a proposal, this is the wrong section, enter %{info_link}. - info_link: create new proposal - more_info: More information + more_info: How do debates work? recommendation_four: Enjoy this space and the voices that fill it. It belongs to you too. recommendation_one: Do not use capital letters for the debate title or for whole sentences. On the internet, this is considered shouting. And nobody likes being shouted at. recommendation_three: Ruthless criticism is very welcome. This is a space for reflection. But we recommend that you stick to elegance and intelligence. The world is a better place with these virtues in it. diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index aa8b4b8ee..0dad1fe8b 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -127,9 +127,7 @@ es: new: form: submit_button: Empieza un debate - info: Si lo que quieres es hacer una propuesta, esta es la sección incorrecta, entra en %{info_link}. - info_link: crear nueva propuesta - more_info: Más información + more_info: "¿Cómo funcionan los debates?" recommendation_four: Disfruta de este espacio, de las voces que lo llenan, también es tuyo. recommendation_one: No escribas el título del debate o frases enteras en mayúsculas. En internet eso se considera gritar. Y a nadie le gusta que le griten. recommendation_three: Las críticas despiadadas son muy bienvenidas. Este es un espacio de pensamiento. Pero te recomendamos conservar la elegancia y la inteligencia. El mundo es mejor con ellas presentes. diff --git a/spec/system/ckeditor_spec.rb b/spec/system/ckeditor_spec.rb index d13b67498..03fc745b0 100644 --- a/spec/system/ckeditor_spec.rb +++ b/spec/system/ckeditor_spec.rb @@ -9,7 +9,10 @@ describe "CKEditor" do expect(page).to have_css ".translatable-fields[data-locale='en'] .cke_wysiwyg_frame" - click_link "Debates" + within ".subnavigation" do + click_link "Debates" + end + click_link "Start a debate" expect(page).to have_css ".translatable-fields[data-locale='en'] .cke_wysiwyg_frame"