From 755ad330a2e2d4cadc2896c02ac78137ee2888c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 15:44:51 +0200 Subject: [PATCH 01/24] Move debate form partial to a component We're going to rewrite most of the code, so we might as well treat it like we treat new files. --- .../debates/form_component.html.erb | 50 ++++++++++++++++++ app/components/debates/form_component.rb | 10 ++++ app/views/debates/_form.html.erb | 51 +------------------ 3 files changed, 61 insertions(+), 50 deletions(-) create mode 100644 app/components/debates/form_component.html.erb create mode 100644 app/components/debates/form_component.rb diff --git a/app/components/debates/form_component.html.erb b/app/components/debates/form_component.html.erb new file mode 100644 index 000000000..5196e154b --- /dev/null +++ b/app/components/debates/form_component.html.erb @@ -0,0 +1,50 @@ +<%= render "shared/globalize_locales", resource: debate %> + +<%= translatable_form_for(debate) do |f| %> + + <%= render "shared/errors", resource: debate %> + +
+ <%= 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" %> +
+ + <%= 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/form_component.rb b/app/components/debates/form_component.rb new file mode 100644 index 000000000..508e003cc --- /dev/null +++ b/app/components/debates/form_component.rb @@ -0,0 +1,10 @@ +class Debates::FormComponent < ApplicationComponent + include TranslatableFormHelper + include GlobalizeHelper + attr_reader :debate + delegate :suggest_data, to: :helpers + + def initialize(debate) + @debate = debate + end +end diff --git a/app/views/debates/_form.html.erb b/app/views/debates/_form.html.erb index 76719da4c..c3409558a 100644 --- a/app/views/debates/_form.html.erb +++ b/app/views/debates/_form.html.erb @@ -1,50 +1 @@ -<%= render "shared/globalize_locales", resource: @debate %> - -<%= translatable_form_for(@debate) do |f| %> - - <%= render "shared/errors", resource: @debate %> - -
- <%= 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" %> -
- - <%= 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 %> +<%= render Debates::FormComponent.new(@debate) %> From 4150d7f1bedcbdbd234a9278ca2df27d102b13e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 16:03:44 +0200 Subject: [PATCH 02/24] Move proposals form partial to a component Since now categories are loaded in both the investment form component and proposal form component, and their controllers are the only "commentable" controllers using the `@categories` instance variable, we can remove the `load_categories` call in `CommentableActions` affecting the create and update actions. --- .../proposals/form_component.html.erb | 109 +++++++++++++++++ app/components/proposals/form_component.rb | 17 +++ .../concerns/commentable_actions.rb | 2 - .../management/proposals_controller.rb | 2 - app/controllers/proposals_controller.rb | 2 +- app/views/proposals/_form.html.erb | 112 +----------------- 6 files changed, 128 insertions(+), 116 deletions(-) create mode 100644 app/components/proposals/form_component.html.erb create mode 100644 app/components/proposals/form_component.rb diff --git a/app/components/proposals/form_component.html.erb b/app/components/proposals/form_component.html.erb new file mode 100644 index 000000000..f386d106d --- /dev/null +++ b/app/components/proposals/form_component.html.erb @@ -0,0 +1,109 @@ +<%= render "shared/globalize_locales", resource: proposal %> + +<%= translatable_form_for(proposal, url: url) do |f| %> + + <%= render "shared/errors", resource: proposal %> + +
+ <%= f.translatable_fields do |translations_form| %> +
+ <%= translations_form.text_field :title, + maxlength: Proposal.title_max_length, + data: suggest_data(proposal) %> +
+
+ +
+ <%= translations_form.text_area :summary, + rows: 4, maxlength: 200, + hint: t("proposals.form.proposal_summary_note") %> +
+ +
+ <%= translations_form.text_area :description, + maxlength: Proposal.description_max_length, + class: "html-area" %> +
+ <% end %> + + <%= f.invisible_captcha :subtitle %> + +
+ <%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %> +
+ + <% if feature?(:allow_images) %> +
+ <%= render "images/nested_image", imageable: proposal, f: f %> +
+ <% end %> + + <% if feature?(:allow_attached_documents) %> +
+ <%= render "documents/nested_documents", documentable: proposal, f: f %> +
+ <% end %> + +
+ <%= f.select :geozone_id, geozone_select_options, + include_blank: t("geozones.none") %> +
+ + <% if feature?(:map) %> +
+ <%= render "map_locations/form_fields", + form: f, + map_location: proposal.map_location || MapLocation.new, + label: t("proposals.form.map_location"), + help: t("proposals.form.map_location_instructions"), + remove_marker_label: t("proposals.form.map_remove_marker"), + parent_class: "proposal", + i18n_namespace: "proposals" %> +
+ <% end %> + +
+ <%= f.label :tag_list, t("proposals.form.tags_label") %> +

<%= t("proposals.form.tags_instructions") %>

+ +
+ <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %> + <% categories.each do |tag| %> + <%= tag.name %> + <% end %> +
+ +
+ <%= f.text_field :tag_list, value: proposal.tag_list.to_s, + label: false, + placeholder: t("proposals.form.tags_placeholder"), + class: "js-tag-list tag-autocomplete", + aria: { describedby: "tag-list-help-text" }, + data: { js_url: suggest_tags_path } %> +
+ + <% if current_user.unverified? %> +
+ <%= f.text_field :responsible_name, + hint: t("proposals.form.proposal_responsible_name_note") %> +
+ <% end %> + + <%= render SDG::RelatedListSelectorComponent.new(f) %> + +
+ <% if proposal.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("proposals.#{action_name}.form.submit_button")) %> +
+
+<% end %> diff --git a/app/components/proposals/form_component.rb b/app/components/proposals/form_component.rb new file mode 100644 index 000000000..4ec266d05 --- /dev/null +++ b/app/components/proposals/form_component.rb @@ -0,0 +1,17 @@ +class Proposals::FormComponent < ApplicationComponent + include TranslatableFormHelper + include GlobalizeHelper + attr_reader :proposal, :url + delegate :current_user, :suggest_data, :geozone_select_options, to: :helpers + + def initialize(proposal, url:) + @proposal = proposal + @url = url + end + + private + + def categories + Tag.category.order(:name) + end +end diff --git a/app/controllers/concerns/commentable_actions.rb b/app/controllers/concerns/commentable_actions.rb index 31ced92e1..1d1b647f9 100644 --- a/app/controllers/concerns/commentable_actions.rb +++ b/app/controllers/concerns/commentable_actions.rb @@ -52,7 +52,6 @@ module CommentableActions redirect_path = url_for(controller: controller_name, action: :show, id: @resource.id) redirect_to redirect_path, notice: t("flash.actions.create.#{resource_name.underscore}") else - load_categories load_geozones set_resource_instance render :new @@ -66,7 +65,6 @@ module CommentableActions if resource.update(strong_params) redirect_to resource, notice: t("flash.actions.update.#{resource_name.underscore}") else - load_categories load_geozones set_resource_instance render :edit diff --git a/app/controllers/management/proposals_controller.rb b/app/controllers/management/proposals_controller.rb index a384bb541..740a4b81c 100644 --- a/app/controllers/management/proposals_controller.rb +++ b/app/controllers/management/proposals_controller.rb @@ -7,7 +7,6 @@ class Management::ProposalsController < Management::BaseController before_action :only_verified_users, except: :print before_action :set_proposal, only: [:vote, :show] before_action :parse_search_terms, only: :index - before_action :load_categories, only: [:new, :edit] before_action :load_geozones, only: [:edit] has_orders %w[confidence_score hot_score created_at most_commented random], only: [:index, :print] @@ -22,7 +21,6 @@ class Management::ProposalsController < Management::BaseController redirect_path = url_for(controller: controller_name, action: :show, id: @resource.id) redirect_to redirect_path, notice: t("flash.actions.create.#{resource_name.underscore}") else - load_categories load_geozones set_resource_instance render :new diff --git a/app/controllers/proposals_controller.rb b/app/controllers/proposals_controller.rb index fc0b977df..dd4932ed1 100644 --- a/app/controllers/proposals_controller.rb +++ b/app/controllers/proposals_controller.rb @@ -7,7 +7,7 @@ class ProposalsController < ApplicationController include MapLocationAttributes include Translatable - before_action :load_categories, only: [:index, :new, :create, :edit, :map, :summary] + before_action :load_categories, only: [:index, :map, :summary] before_action :load_geozones, only: [:edit, :map, :summary] before_action :authenticate_user!, except: [:index, :show, :map, :summary] before_action :destroy_map_location_association, only: :update diff --git a/app/views/proposals/_form.html.erb b/app/views/proposals/_form.html.erb index 44b14fc59..aa749b961 100644 --- a/app/views/proposals/_form.html.erb +++ b/app/views/proposals/_form.html.erb @@ -1,111 +1 @@ -<%= render "shared/globalize_locales", resource: @proposal %> - -<%= translatable_form_for(@proposal, url: form_url) do |f| %> - - <%= render "shared/errors", resource: @proposal %> - -
- <%= f.translatable_fields do |translations_form| %> -
- <%= translations_form.text_field :title, - maxlength: Proposal.title_max_length, - data: suggest_data(@proposal) %> -
-
- -
- <%= translations_form.text_area :summary, - rows: 4, maxlength: 200, - hint: t("proposals.form.proposal_summary_note") %> -
- -
- <%= translations_form.text_area :description, - maxlength: Proposal.description_max_length, - class: "html-area" %> -
- <% end %> - - <%= f.invisible_captcha :subtitle %> - -
- <%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %> -
- - <% if feature?(:allow_images) %> -
- <%= render "images/nested_image", imageable: @proposal, f: f %> -
- <% end %> - - <% if feature?(:allow_attached_documents) %> -
- <%= render "documents/nested_documents", documentable: @proposal, f: f %> -
- <% end %> - -
- <%= f.select :geozone_id, geozone_select_options, - include_blank: t("geozones.none") %> -
- - <% if feature?(:map) %> -
- - <%= render "map_locations/form_fields", - form: f, - map_location: @proposal.map_location || MapLocation.new, - label: t("proposals.form.map_location"), - help: t("proposals.form.map_location_instructions"), - remove_marker_label: t("proposals.form.map_remove_marker"), - parent_class: "proposal", - i18n_namespace: "proposals" %> - -
- <% end %> - -
- <%= f.label :tag_list, t("proposals.form.tags_label") %> -

<%= t("proposals.form.tags_instructions") %>

- -
- <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %> - <% @categories.each do |tag| %> - <%= tag.name %> - <% end %> -
- -
- <%= f.text_field :tag_list, value: @proposal.tag_list.to_s, - label: false, - placeholder: t("proposals.form.tags_placeholder"), - class: "js-tag-list tag-autocomplete", - aria: { describedby: "tag-list-help-text" }, - data: { js_url: suggest_tags_path } %> -
- - <% if current_user.unverified? %> -
- <%= f.text_field :responsible_name, - hint: t("proposals.form.proposal_responsible_name_note") %> -
- <% end %> - - <%= render SDG::RelatedListSelectorComponent.new(f) %> - -
- <% if @proposal.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("proposals.#{action_name}.form.submit_button")) %> -
-
-<% end %> +<%= render Proposals::FormComponent.new(@proposal, url: form_url) %> From ab0fd86922af31ac6e3ede0bd30287b9def917e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 16:16:51 +0200 Subject: [PATCH 03/24] Show globalize locales after the errors Just like it's done in the investment form. --- app/components/debates/form_component.html.erb | 5 ++--- app/components/proposals/form_component.html.erb | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/app/components/debates/form_component.html.erb b/app/components/debates/form_component.html.erb index 5196e154b..f486a499e 100644 --- a/app/components/debates/form_component.html.erb +++ b/app/components/debates/form_component.html.erb @@ -1,9 +1,8 @@ -<%= render "shared/globalize_locales", resource: debate %> - <%= translatable_form_for(debate) do |f| %> - <%= render "shared/errors", resource: debate %> + <%= render "shared/globalize_locales", resource: debate %> +
<%= f.translatable_fields do |translations_form| %>
diff --git a/app/components/proposals/form_component.html.erb b/app/components/proposals/form_component.html.erb index f386d106d..3a71dc95f 100644 --- a/app/components/proposals/form_component.html.erb +++ b/app/components/proposals/form_component.html.erb @@ -1,9 +1,8 @@ -<%= render "shared/globalize_locales", resource: proposal %> - <%= translatable_form_for(proposal, url: url) do |f| %> - <%= render "shared/errors", resource: proposal %> + <%= render "shared/globalize_locales", resource: proposal %> +
<%= f.translatable_fields do |translations_form| %>
From 7a1acf5706f5c91d11ecacbacbd77234ed961757 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 16:37:23 +0200 Subject: [PATCH 04/24] Rename proposal-form HTML class to proposal-new So it's consistent with the proposal-edit class we use in the edit action. --- app/assets/stylesheets/admin.scss | 2 +- app/assets/stylesheets/participation.scss | 6 +++--- app/views/legislation/proposals/new.html.erb | 2 +- app/views/management/proposals/new.html.erb | 2 +- app/views/proposals/new.html.erb | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 05581b774..c6e72a248 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -315,7 +315,7 @@ $table-header: #ecf1f6; } .admin-content { - .proposal-form { + .proposal-new { padding-top: 0; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 1a1228b3c..2ecb55719 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -245,7 +245,7 @@ // --------------------- .debate-form, -.proposal-form, +.proposal-new, .budget-investment-form, .document-form, .topic-new, @@ -297,7 +297,7 @@ } } -.proposal-form, +.proposal-new, .document-form, .topic-form, .topic-new { @@ -308,7 +308,7 @@ } .budget-investment-new, -.proposal-form, +.proposal-new, .proposal-edit, .polls-form, .poll-question-form, diff --git a/app/views/legislation/proposals/new.html.erb b/app/views/legislation/proposals/new.html.erb index 058914f5d..e0a707fef 100644 --- a/app/views/legislation/proposals/new.html.erb +++ b/app/views/legislation/proposals/new.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to %> diff --git a/app/views/management/proposals/new.html.erb b/app/views/management/proposals/new.html.erb index 5d6a21159..943d63d71 100644 --- a/app/views/management/proposals/new.html.erb +++ b/app/views/management/proposals/new.html.erb @@ -1,4 +1,4 @@ -
+
<%= render "/shared/print" %> diff --git a/app/views/proposals/new.html.erb b/app/views/proposals/new.html.erb index f38b9f3ce..1179be8c1 100644 --- a/app/views/proposals/new.html.erb +++ b/app/views/proposals/new.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to %> From 7bc55f78c0a4b95ff77501cfe276ea166166e5c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 16:44:42 +0200 Subject: [PATCH 05/24] Rename debate-form HTML classes So they follow the same convention used in proposals. Note the styles are for elements which appear in the "new" view but not in the "edit" view, so we only have to include them in one place. --- app/assets/stylesheets/participation.scss | 4 ++-- app/views/debates/edit.html.erb | 2 +- app/views/debates/new.html.erb | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 2ecb55719..c29f82247 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -244,7 +244,7 @@ // 02. New participation // --------------------- -.debate-form, +.debate-new, .proposal-new, .budget-investment-form, .document-form, @@ -290,7 +290,7 @@ } } -.debate-form { +.debate-new { .recommendations li::before { color: $debates; diff --git a/app/views/debates/edit.html.erb b/app/views/debates/edit.html.erb index 8645be255..129cdd8a0 100644 --- a/app/views/debates/edit.html.erb +++ b/app/views/debates/edit.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to %> diff --git a/app/views/debates/new.html.erb b/app/views/debates/new.html.erb index 4e75679de..ba8a3d1cf 100644 --- a/app/views/debates/new.html.erb +++ b/app/views/debates/new.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to debates_path %> From b162ad512a3dfd94898a410f0aeb8e3726f04879 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 16:50:13 +0200 Subject: [PATCH 06/24] Remove row and column divs in debate/proposal form We don't need any row classes anymore because the already has a maximum width. As for columns, we only have one column in this form, so we don't need them either. Besides, the form's parent element already has a padding. --- app/assets/stylesheets/application.scss | 2 + app/assets/stylesheets/debates/form.scss | 13 ++ app/assets/stylesheets/proposals/form.scss | 14 ++ .../debates/form_component.html.erb | 78 ++++---- .../proposals/form_component.html.erb | 172 +++++++++--------- app/views/debates/edit.html.erb | 2 +- app/views/debates/new.html.erb | 2 +- app/views/proposals/edit.html.erb | 2 +- app/views/proposals/new.html.erb | 2 +- 9 files changed, 156 insertions(+), 131 deletions(-) create mode 100644 app/assets/stylesheets/debates/form.scss create mode 100644 app/assets/stylesheets/proposals/form.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index fe57dab83..e49fb0e52 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -38,7 +38,9 @@ @import "tags"; @import "admin/**/*"; @import "budgets/**/*"; +@import "debates/**/*"; @import "layout/**/*"; +@import "proposals/**/*"; @import "sdg/**/*"; @import "sdg_management/*"; @import "sdg_management/**/*"; diff --git a/app/assets/stylesheets/debates/form.scss b/app/assets/stylesheets/debates/form.scss new file mode 100644 index 000000000..3945c2686 --- /dev/null +++ b/app/assets/stylesheets/debates/form.scss @@ -0,0 +1,13 @@ +.debate-form { + + .globalize-languages, + .translatable-fields { + @include grid-row-nest; + @include grid-column-gutter; + } + + .sdg-related-list-selector { + padding-left: 0; + padding-right: 0; + } +} diff --git a/app/assets/stylesheets/proposals/form.scss b/app/assets/stylesheets/proposals/form.scss new file mode 100644 index 000000000..df5d1d880 --- /dev/null +++ b/app/assets/stylesheets/proposals/form.scss @@ -0,0 +1,14 @@ +.proposal-form { + + .globalize-languages, + .translatable-fields { + @include grid-row-nest; + @include grid-column-gutter; + } + + .sdg-related-list-selector { + padding-left: 0; + padding-right: 0; + } +} + diff --git a/app/components/debates/form_component.html.erb b/app/components/debates/form_component.html.erb index f486a499e..fa034ed14 100644 --- a/app/components/debates/form_component.html.erb +++ b/app/components/debates/form_component.html.erb @@ -1,49 +1,47 @@ -<%= translatable_form_for(debate) do |f| %> +<%= translatable_form_for(debate, html: { class: "debate-form" }) do |f| %> <%= render "shared/errors", resource: debate %> <%= render "shared/globalize_locales", resource: debate %> -
- <%= f.translatable_fields do |translations_form| %> -
- <%= translations_form.text_field :title, - maxlength: Debate.title_max_length, - data: suggest_data(debate) %> -
-
+ <%= 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" %> -
+
+ <%= 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" %> +
+ + <%= 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.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" %> -
- - <%= 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")) %> -
+
+ <%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %>
<% end %> diff --git a/app/components/proposals/form_component.html.erb b/app/components/proposals/form_component.html.erb index 3a71dc95f..3831a6f5c 100644 --- a/app/components/proposals/form_component.html.erb +++ b/app/components/proposals/form_component.html.erb @@ -1,108 +1,106 @@ -<%= translatable_form_for(proposal, url: url) do |f| %> +<%= translatable_form_for(proposal, url: url, html: { class: "proposal-form" }) do |f| %> <%= render "shared/errors", resource: proposal %> <%= render "shared/globalize_locales", resource: proposal %> -
- <%= f.translatable_fields do |translations_form| %> -
- <%= translations_form.text_field :title, - maxlength: Proposal.title_max_length, - data: suggest_data(proposal) %> -
-
+ <%= f.translatable_fields do |translations_form| %> +
+ <%= translations_form.text_field :title, + maxlength: Proposal.title_max_length, + data: suggest_data(proposal) %> +
+
-
- <%= translations_form.text_area :summary, - rows: 4, maxlength: 200, - hint: t("proposals.form.proposal_summary_note") %> -
- -
- <%= translations_form.text_area :description, - maxlength: Proposal.description_max_length, - class: "html-area" %> -
- <% end %> - - <%= f.invisible_captcha :subtitle %> - -
- <%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %> +
+ <%= translations_form.text_area :summary, + rows: 4, maxlength: 200, + hint: t("proposals.form.proposal_summary_note") %>
- <% if feature?(:allow_images) %> -
- <%= render "images/nested_image", imageable: proposal, f: f %> -
- <% end %> - - <% if feature?(:allow_attached_documents) %> -
- <%= render "documents/nested_documents", documentable: proposal, f: f %> -
- <% end %> - -
- <%= f.select :geozone_id, geozone_select_options, - include_blank: t("geozones.none") %> +
+ <%= translations_form.text_area :description, + maxlength: Proposal.description_max_length, + class: "html-area" %>
+ <% end %> - <% if feature?(:map) %> -
- <%= render "map_locations/form_fields", - form: f, - map_location: proposal.map_location || MapLocation.new, - label: t("proposals.form.map_location"), - help: t("proposals.form.map_location_instructions"), - remove_marker_label: t("proposals.form.map_remove_marker"), - parent_class: "proposal", - i18n_namespace: "proposals" %> -
- <% end %> + <%= f.invisible_captcha :subtitle %> -
- <%= f.label :tag_list, t("proposals.form.tags_label") %> -

<%= t("proposals.form.tags_instructions") %>

+
+ <%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %> +
-
- <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %> - <% categories.each do |tag| %> - <%= tag.name %> - <% end %> -
- -
- <%= f.text_field :tag_list, value: proposal.tag_list.to_s, - label: false, - placeholder: t("proposals.form.tags_placeholder"), - class: "js-tag-list tag-autocomplete", - aria: { describedby: "tag-list-help-text" }, - data: { js_url: suggest_tags_path } %> + <% if feature?(:allow_images) %> +
+ <%= render "images/nested_image", imageable: proposal, f: f %>
+ <% end %> - <% if current_user.unverified? %> -
- <%= f.text_field :responsible_name, - hint: t("proposals.form.proposal_responsible_name_note") %> -
- <% end %> + <% if feature?(:allow_attached_documents) %> +
+ <%= render "documents/nested_documents", documentable: proposal, f: f %> +
+ <% end %> - <%= render SDG::RelatedListSelectorComponent.new(f) %> +
+ <%= f.select :geozone_id, geozone_select_options, + include_blank: t("geozones.none") %> +
-
- <% if proposal.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") - ) %> + <% if feature?(:map) %> +
+ <%= render "map_locations/form_fields", + form: f, + map_location: proposal.map_location || MapLocation.new, + label: t("proposals.form.map_location"), + help: t("proposals.form.map_location_instructions"), + remove_marker_label: t("proposals.form.map_remove_marker"), + parent_class: "proposal", + i18n_namespace: "proposals" %> +
+ <% end %> + +
+ <%= f.label :tag_list, t("proposals.form.tags_label") %> +

<%= t("proposals.form.tags_instructions") %>

+ +
+ <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %> + <% categories.each do |tag| %> + <%= tag.name %> <% end %>
-
- <%= f.submit(class: "button", value: t("proposals.#{action_name}.form.submit_button")) %> +
+ <%= f.text_field :tag_list, value: proposal.tag_list.to_s, + label: false, + placeholder: t("proposals.form.tags_placeholder"), + class: "js-tag-list tag-autocomplete", + aria: { describedby: "tag-list-help-text" }, + data: { js_url: suggest_tags_path } %> +
+ + <% if current_user.unverified? %> +
+ <%= f.text_field :responsible_name, + hint: t("proposals.form.proposal_responsible_name_note") %>
+ <% end %> + + <%= render SDG::RelatedListSelectorComponent.new(f) %> + +
+ <% if proposal.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("proposals.#{action_name}.form.submit_button")) %>
<% end %> diff --git a/app/views/debates/edit.html.erb b/app/views/debates/edit.html.erb index 129cdd8a0..da1a51e05 100644 --- a/app/views/debates/edit.html.erb +++ b/app/views/debates/edit.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to %> diff --git a/app/views/debates/new.html.erb b/app/views/debates/new.html.erb index ba8a3d1cf..f7da8c74c 100644 --- a/app/views/debates/new.html.erb +++ b/app/views/debates/new.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to debates_path %> diff --git a/app/views/proposals/edit.html.erb b/app/views/proposals/edit.html.erb index a615dda37..a66bd0ce8 100644 --- a/app/views/proposals/edit.html.erb +++ b/app/views/proposals/edit.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to %> diff --git a/app/views/proposals/new.html.erb b/app/views/proposals/new.html.erb index 1179be8c1..721e7cee4 100644 --- a/app/views/proposals/new.html.erb +++ b/app/views/proposals/new.html.erb @@ -1,4 +1,4 @@ -
+
<%= back_link_to %> From a14cf4f7004a7ac15f96b4522e15cf8d528877dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 17:47:17 +0200 Subject: [PATCH 07/24] Simplify padding rules for SDG selector Now the padding is only applied in two places (administration forms) so we can apply it just there instead of applying it everywhere and then removing it in most places. We're using the `column` class here because it's what's used in the rest of the fields of these forms and because we haven't defined (yet) general margin/padding rules for the administration views. --- app/assets/stylesheets/budgets/investments/form.scss | 5 ----- app/assets/stylesheets/debates/form.scss | 5 ----- app/assets/stylesheets/proposals/form.scss | 5 ----- app/assets/stylesheets/sdg/related_list_selector.scss | 1 - app/assets/stylesheets/sdg_management/relations/edit.scss | 6 ------ app/views/admin/legislation/processes/_form.html.erb | 4 +++- app/views/admin/poll/polls/_form.html.erb | 4 +++- 7 files changed, 6 insertions(+), 24 deletions(-) delete mode 100644 app/assets/stylesheets/sdg_management/relations/edit.scss diff --git a/app/assets/stylesheets/budgets/investments/form.scss b/app/assets/stylesheets/budgets/investments/form.scss index 6d84a466d..af84d9ec9 100644 --- a/app/assets/stylesheets/budgets/investments/form.scss +++ b/app/assets/stylesheets/budgets/investments/form.scss @@ -35,11 +35,6 @@ @include grid-column-gutter; } - .sdg-related-list-selector { - padding-left: 0; - padding-right: 0; - } - [type="submit"] { @include regular-button; font-size: map-get($button-sizes, large); diff --git a/app/assets/stylesheets/debates/form.scss b/app/assets/stylesheets/debates/form.scss index 3945c2686..ddc1df0c7 100644 --- a/app/assets/stylesheets/debates/form.scss +++ b/app/assets/stylesheets/debates/form.scss @@ -5,9 +5,4 @@ @include grid-row-nest; @include grid-column-gutter; } - - .sdg-related-list-selector { - padding-left: 0; - padding-right: 0; - } } diff --git a/app/assets/stylesheets/proposals/form.scss b/app/assets/stylesheets/proposals/form.scss index df5d1d880..b666de98e 100644 --- a/app/assets/stylesheets/proposals/form.scss +++ b/app/assets/stylesheets/proposals/form.scss @@ -5,10 +5,5 @@ @include grid-row-nest; @include grid-column-gutter; } - - .sdg-related-list-selector { - padding-left: 0; - padding-right: 0; - } } diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 7b32edaf7..cf97da3f7 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -1,5 +1,4 @@ .sdg-related-list-selector { - @include grid-column-gutter; clear: both; > legend { diff --git a/app/assets/stylesheets/sdg_management/relations/edit.scss b/app/assets/stylesheets/sdg_management/relations/edit.scss deleted file mode 100644 index a719b4336..000000000 --- a/app/assets/stylesheets/sdg_management/relations/edit.scss +++ /dev/null @@ -1,6 +0,0 @@ -.sdg-relations-edit { - - .sdg-related-list-selector { - padding: 0; - } -} diff --git a/app/views/admin/legislation/processes/_form.html.erb b/app/views/admin/legislation/processes/_form.html.erb index 1ecfec53d..98ab0e51c 100644 --- a/app/views/admin/legislation/processes/_form.html.erb +++ b/app/views/admin/legislation/processes/_form.html.erb @@ -187,7 +187,9 @@
- <%= render SDG::RelatedListSelectorComponent.new(f) %> +
+ <%= render SDG::RelatedListSelectorComponent.new(f) %> +
diff --git a/app/views/admin/poll/polls/_form.html.erb b/app/views/admin/poll/polls/_form.html.erb index cb542612d..b3ce9eaf3 100644 --- a/app/views/admin/poll/polls/_form.html.erb +++ b/app/views/admin/poll/polls/_form.html.erb @@ -56,7 +56,9 @@
- <%= render SDG::RelatedListSelectorComponent.new(f) %> +
+ <%= render SDG::RelatedListSelectorComponent.new(f) %> +
From 461df6167a8c0e18b0f9e0c27ff42017d75daec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 9 Jul 2021 22:29:05 +0200 Subject: [PATCH 08/24] Fix investment form padding in Internet Explorer It looks like Internet Explorer wasn't applying the padding to the
element because it considered it an inline element. --- app/assets/stylesheets/layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ec9aef363..33eaa85b4 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -64,6 +64,10 @@ body { } } +main { + display: block; +} + h1, h2, h3, From 10f7183f8cfb6574d6f74f1c594f7f8f044a0cbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 23:51:24 +0200 Subject: [PATCH 09/24] Remove no longer necessary participation icons CSS The `icon-budget` hasn't been used in this context for a long time; maybe since commit d0b8fef6b. The `document-form` class was removed in commit 6c1d828a6. Finally, the `topic-new` and `topic-form` were removed in commit c887cb736. --- app/assets/stylesheets/participation.scss | 22 ++++------------------ 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index c29f82247..aa4f2bc39 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -245,16 +245,10 @@ // --------------------- .debate-new, -.proposal-new, -.budget-investment-form, -.document-form, -.topic-new, -.topic-form { +.proposal-new { .icon-debates, - .icon-proposals, - .icon-budget, - .icon-image { + .icon-proposals { font-size: rem-calc(50); line-height: $line-height; opacity: 0.5; @@ -264,14 +258,9 @@ color: $debates; } - .icon-proposals, - .icon-image { + .icon-proposals { color: $proposals; } - - .icon-budget { - color: $budget; - } } .recommendations { @@ -297,10 +286,7 @@ } } -.proposal-new, -.document-form, -.topic-form, -.topic-new { +.proposal-new { .recommendations li::before { color: $proposals; From 6d03b3226bf5cc0d43e5797737a02c3d659ea237 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 00:40:27 +0200 Subject: [PATCH 10/24] Simplify new investment layout We had an additional `
` just to add a background color, when we can do it by applying the background color to the whole `
` element and then the body background color to the optional fields. However, I've decided not to do so. The main purpose of changing the background color is to highlight the required fields. The benefits of changing the background color of the header as well are unclear. When in doubt, we're using the solution which requires less code. --- .../stylesheets/budgets/investments/new.scss | 8 ----- app/views/budgets/investments/new.html.erb | 32 +++++++++---------- 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss index f13325fbf..d7a698e4d 100644 --- a/app/assets/stylesheets/budgets/investments/new.scss +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -2,13 +2,6 @@ $border-width: 4px; @include grid-column-gutter; - > :first-child:not(.print-info) { - @include full-width-background($adjust-padding: true); - background: $light; - margin-top: -$line-height; - padding-top: $line-height; - } - h1 { margin-bottom: 0; } @@ -16,7 +9,6 @@ header { @include has-fa-icon(building, regular, after); align-items: center; - background-color: $body-background; border: $border-width solid; color: $brand-secondary; border-bottom-right-radius: rem-calc(12); diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb index df1291c36..5c9b3b2a6 100644 --- a/app/views/budgets/investments/new.html.erb +++ b/app/views/budgets/investments/new.html.erb @@ -1,23 +1,21 @@
-
- <%= back_link_to budgets_path %> + <%= back_link_to budgets_path %> -
-

- - <%= t("budgets.investments.form.title") %> +
+

+ + <%= t("budgets.investments.form.title") %> - <% if @budget.single_heading? %> - - <%= t("budgets.investments.form.subtitle", - heading: @budget.headings.first.name, - price: @budget.formatted_heading_price(@budget.headings.first)) %> - - <% end %> - -

-
-

+ <% if @budget.single_heading? %> + + <%= t("budgets.investments.form.subtitle", + heading: @budget.headings.first.name, + price: @budget.formatted_heading_price(@budget.headings.first)) %> + + <% end %> + + + <%= render "/budgets/investments/form", form_url: budget_investments_path(@budget) %>
From 937450ff4e7ec580448ad4f7ec5aefa54e21a46c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 01:45:56 +0200 Subject: [PATCH 11/24] Simplify new investment header HTML In commit 49b406199 we added an extra `` element just so we could add an icon to the right while maintaining both the title and subtitle on the left. We can do the same thing without the extra `` element, absolutely positioning the element and leaving enough padding. --- .../stylesheets/budgets/investments/new.scss | 35 +++++++++++-------- app/views/budgets/investments/new.html.erb | 18 +++++----- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss index d7a698e4d..c60ad1a73 100644 --- a/app/assets/stylesheets/budgets/investments/new.scss +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -34,12 +34,30 @@ @include brand-background($brand-secondary); @include background-till-left-of-screen; @include has-fa-icon(chart-pie, solid, after); - align-items: center; - display: flex; flex: 1; font-size: rem-calc(36); padding: $line-height * 2 0; + @include breakpoint(small) { + &::after { + display: none; + } + } + + @include breakpoint(medium) { + padding-right: 4em; + + &::after { + display: block; + font-size: 2em; + margin-right: rem-calc(60); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + } + } + @include breakpoint(large) { clip-path: polygon( -100vw -#{$border-width}, @@ -56,18 +74,7 @@ height: calc(100% + 2 * #{$border-width}); } - &::after { - display: none; - - @include breakpoint(medium) { - display: block; - font-size: 2em; - margin-left: auto; - margin-right: rem-calc(60); - } - } - - span span { + span { display: block; font-size: 0.75em; margin-top: $line-height / 2; diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb index 5c9b3b2a6..6ffeade7d 100644 --- a/app/views/budgets/investments/new.html.erb +++ b/app/views/budgets/investments/new.html.erb @@ -3,17 +3,15 @@

- - <%= t("budgets.investments.form.title") %> + <%= t("budgets.investments.form.title") %> - <% if @budget.single_heading? %> - - <%= t("budgets.investments.form.subtitle", - heading: @budget.headings.first.name, - price: @budget.formatted_heading_price(@budget.headings.first)) %> - - <% end %> - + <% if @budget.single_heading? %> + + <%= t("budgets.investments.form.subtitle", + heading: @budget.headings.first.name, + price: @budget.formatted_heading_price(@budget.headings.first)) %> + + <% end %>

From 640a0ba83c6a456a030b86e44c1cf346b6bfa4d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 02:09:21 +0200 Subject: [PATCH 12/24] Move new budget investment view to a component That way we'll be able to simplify some of the code. --- .../investments/new_component.html.erb | 19 ++++++++++++++++++ .../budgets/investments/new_component.rb | 7 +++++++ app/views/budgets/investments/new.html.erb | 20 +------------------ 3 files changed, 27 insertions(+), 19 deletions(-) create mode 100644 app/components/budgets/investments/new_component.html.erb create mode 100644 app/components/budgets/investments/new_component.rb diff --git a/app/components/budgets/investments/new_component.html.erb b/app/components/budgets/investments/new_component.html.erb new file mode 100644 index 000000000..d5940826c --- /dev/null +++ b/app/components/budgets/investments/new_component.html.erb @@ -0,0 +1,19 @@ +
+ <%= back_link_to budgets_path %> + +
+

+ <%= t("budgets.investments.form.title") %> + + <% if budget.single_heading? %> + + <%= t("budgets.investments.form.subtitle", + heading: budget.headings.first.name, + price: budget.formatted_heading_price(budget.headings.first)) %> + + <% end %> +

+
+ + <%= render "/budgets/investments/form", form_url: budget_investments_path(budget) %> +
diff --git a/app/components/budgets/investments/new_component.rb b/app/components/budgets/investments/new_component.rb new file mode 100644 index 000000000..adf749c40 --- /dev/null +++ b/app/components/budgets/investments/new_component.rb @@ -0,0 +1,7 @@ +class Budgets::Investments::NewComponent < ApplicationComponent + attr_reader :budget + + def initialize(budget) + @budget = budget + end +end diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb index 6ffeade7d..51b90a799 100644 --- a/app/views/budgets/investments/new.html.erb +++ b/app/views/budgets/investments/new.html.erb @@ -1,19 +1 @@ -
- <%= back_link_to budgets_path %> - -
-

- <%= t("budgets.investments.form.title") %> - - <% if @budget.single_heading? %> - - <%= t("budgets.investments.form.subtitle", - heading: @budget.headings.first.name, - price: @budget.formatted_heading_price(@budget.headings.first)) %> - - <% end %> -

-
- - <%= render "/budgets/investments/form", form_url: budget_investments_path(@budget) %> -
+<%= render Budgets::Investments::NewComponent.new(@budget) %> From 9effc10459a066b1333a4db71db33682933aad6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 02:18:55 +0200 Subject: [PATCH 13/24] Include organization name in header title concern The organization name is helpful to screen reader users when they've got several tabs/windows open with different sites. --- app/components/concerns/header.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/concerns/header.rb b/app/components/concerns/header.rb index bc90818b3..763434370 100644 --- a/app/components/concerns/header.rb +++ b/app/components/concerns/header.rb @@ -3,7 +3,7 @@ module Header def header(&block) provide(:title) do - "#{t("#{namespace}.header.title")} - #{title}" + "#{t("#{namespace}.header.title")} - #{title} - #{setting["org_name"]}" end tag.header do From a71d1321640247fd6c3f97ce4e6413ace7f88c81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 02:37:33 +0200 Subject: [PATCH 14/24] Add a title to the create investment page --- .../investments/new_component.html.erb | 14 +------------- .../budgets/investments/new_component.rb | 19 +++++++++++++++++++ app/components/concerns/header.rb | 16 +++++++++++++--- 3 files changed, 33 insertions(+), 16 deletions(-) diff --git a/app/components/budgets/investments/new_component.html.erb b/app/components/budgets/investments/new_component.html.erb index d5940826c..49ff6f2f2 100644 --- a/app/components/budgets/investments/new_component.html.erb +++ b/app/components/budgets/investments/new_component.html.erb @@ -1,19 +1,7 @@
<%= back_link_to budgets_path %> -
-

- <%= t("budgets.investments.form.title") %> - - <% if budget.single_heading? %> - - <%= t("budgets.investments.form.subtitle", - heading: budget.headings.first.name, - price: budget.formatted_heading_price(budget.headings.first)) %> - - <% end %> -

-
+ <%= header %> <%= render "/budgets/investments/form", form_url: budget_investments_path(budget) %>
diff --git a/app/components/budgets/investments/new_component.rb b/app/components/budgets/investments/new_component.rb index adf749c40..f893a2ad9 100644 --- a/app/components/budgets/investments/new_component.rb +++ b/app/components/budgets/investments/new_component.rb @@ -1,7 +1,26 @@ class Budgets::Investments::NewComponent < ApplicationComponent + include Header attr_reader :budget def initialize(budget) @budget = budget end + + def title + safe_join([base_title, subtitle].compact, " ") + end + + private + + def base_title + sanitize(t("budgets.investments.form.title")) + end + + def subtitle + if budget.single_heading? + tag.span t("budgets.investments.form.subtitle", + heading: budget.headings.first.name, + price: budget.formatted_heading_price(budget.headings.first)) + end + end end diff --git a/app/components/concerns/header.rb b/app/components/concerns/header.rb index 763434370..fe62a0d9b 100644 --- a/app/components/concerns/header.rb +++ b/app/components/concerns/header.rb @@ -3,14 +3,24 @@ module Header def header(&block) provide(:title) do - "#{t("#{namespace}.header.title")} - #{title} - #{setting["org_name"]}" + [ + t("#{namespace}.header.title", default: ""), + strip_tags(title), + setting["org_name"] + ].reject(&:blank?).join(" - ") end + heading_tag = if %w[admin management moderation sdg_management valuation].include?(namespace) + "h2" + else + "h1" + end + tag.header do if block_given? - tag.h2(title) + capture(&block) + content_tag(heading_tag, title) + capture(&block) else - tag.h2(title) + content_tag(heading_tag, title) end end end From c4542457ac7a70274bd54ab32edde6d8090294a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 02:49:58 +0200 Subject: [PATCH 15/24] Group styles setting padding to the main content So we don't add the same lines to pretty much every stylesheet we create. Eventually we'll remove this code and add a padding to every
element, or (even better) to the element itself. --- app/assets/stylesheets/budgets/investments/new.scss | 1 - app/assets/stylesheets/layout.scss | 6 ++++++ app/assets/stylesheets/sdg/goals/index.scss | 1 - app/assets/stylesheets/sdg/goals/show.scss | 1 - app/components/sdg/goals/show_component.html.erb | 4 ++-- 5 files changed, 8 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss index c60ad1a73..0c5b9f338 100644 --- a/app/assets/stylesheets/budgets/investments/new.scss +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -1,6 +1,5 @@ .budget-investment-new { $border-width: 4px; - @include grid-column-gutter; h1 { margin-bottom: 0; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 33eaa85b4..5a70af40d 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -66,6 +66,12 @@ body { main { display: block; + + &.budget-investment-new, + &.sdg-goals-index, + &.sdg-goal-show { + @include grid-column-gutter; + } } h1, diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index 9ca2002f7..91588aaaa 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -1,5 +1,4 @@ .sdg-goals-index { - @include grid-column-gutter; .section-header { diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss index f0ddce8a6..f86539b6a 100644 --- a/app/assets/stylesheets/sdg/goals/show.scss +++ b/app/assets/stylesheets/sdg/goals/show.scss @@ -1,5 +1,4 @@ .sdg-goal-show { - @include grid-column-gutter; .sdg-goal { diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb index 2cd9176ed..74b2a3a6b 100644 --- a/app/components/sdg/goals/show_component.html.erb +++ b/app/components/sdg/goals/show_component.html.erb @@ -1,6 +1,6 @@ <% provide(:title) { goal.title } %> -
+
<%= back_link_to sdg_goals_path %>
@@ -36,4 +36,4 @@ <% end %> <%= render SDG::Goals::TargetsComponent.new(goal) %> -
+
From 8398d176b571fab907a624681f5c7c9a5374bfae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 10 Jul 2021 04:48:05 +0200 Subject: [PATCH 16/24] Allow more elements in investment form header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Since we're going to reuse this pattern in other forms, we shouldn't rely on the header having just one element. There could be a subtitle. So we're changing the CSS to be less dependent on a very specific HTML structure. Regarding the subtitle, the original idea was to have both an

and an

element inside the header. However, the W3C advices against it [1]: > h1–h6 elements must not be used to markup subheadings, subtitles, > alternative titles and taglines unless intended to be the heading for > a new section or subsection. So we ended up including the subtitle inside he

. We could also add it in a separate

tag. However, in this case I think it's better to include it in the

(and in the tag) because it helps to uniquely identify the current page from other pages. Due to some rounding issues in Firefox, we're manually moving the polygon 6px so there isn't a blank space between it and the icon on the right. And due to rounding issues in Chrome, we're adding one extra pixel to the bottom of the polygon defining the clip-path. [1] https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements --- .../stylesheets/budgets/investments/new.scss | 102 +++++++++++------- app/assets/stylesheets/mixins/layouts.scss | 2 +- 2 files changed, 63 insertions(+), 41 deletions(-) diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss index 0c5b9f338..213cc9258 100644 --- a/app/assets/stylesheets/budgets/investments/new.scss +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -6,71 +6,93 @@ } header { - @include has-fa-icon(building, regular, after); - align-items: center; - border: $border-width solid; - color: $brand-secondary; + $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); - display: flex; margin-top: $line-height * 2; + padding: $line-height * 2 0; + position: relative; - @include breakpoint(large) { - padding-right: $line-height; + @include breakpoint(small) { + &::after { + display: none; + } } - &::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% + ); - @include breakpoint(large) { + &::after { + background: $body-background; + content: ""; + clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%); display: block; - font-size: rem-calc(100); - margin-left: $line-height; + 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 { - @include brand-background($brand-secondary); - @include background-till-left-of-screen; + $heading-icon-size: $icon-size * 0.85; + @include has-fa-icon(building, regular); @include has-fa-icon(chart-pie, solid, after); - flex: 1; font-size: rem-calc(36); - padding: $line-height * 2 0; @include breakpoint(small) { - &::after { + &::after, + &::before { display: none; - } - } - - @include breakpoint(medium) { - padding-right: 4em; - - &::after { - display: block; - font-size: 2em; - margin-right: rem-calc(60); position: absolute; - right: 0; top: 50%; transform: translateY(-50%); } } - @include breakpoint(large) { - clip-path: polygon( - -100vw -#{$border-width}, - 100% -#{$border-width}, - calc(100% - #{rem-calc(20)}) 50%, - 100% calc(100% + #{$border-width}), - -100vw calc(100% + #{$border-width}) - ); - font-size: rem-calc(44); + @include breakpoint(medium) { + padding-right: $heading-icon-size * 2.5; + + &::after { + display: block; + font-size: $heading-icon-size; + right: $heading-icon-size; + } } - &::before { - top: -$border-width; - height: calc(100% + 2 * #{$border-width}); + @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 { diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index 445e8e6f0..fecb67d2c 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -87,7 +87,7 @@ position: relative; &::before { - background: inherit; + background-color: inherit; content: ""; height: 100%; position: absolute; From a0ea206d15c81759b8e139c00fd68f7314b29de9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net> Date: Sat, 10 Jul 2021 17:43:48 +0200 Subject: [PATCH 17/24] Move new debate view to a component --- app/components/debates/new_component.html.erb | 30 ++++++++++++++++++ app/components/debates/new_component.rb | 7 +++++ app/views/debates/new.html.erb | 31 +------------------ 3 files changed, 38 insertions(+), 30 deletions(-) create mode 100644 app/components/debates/new_component.html.erb create mode 100644 app/components/debates/new_component.rb diff --git a/app/components/debates/new_component.html.erb b/app/components/debates/new_component.html.erb new file mode 100644 index 000000000..d3618205e --- /dev/null +++ b/app/components/debates/new_component.html.erb @@ -0,0 +1,30 @@ +<div class="debate-new"> + + <div class="small-12 medium-9 column"> + <%= back_link_to debates_path %> + + <h1><%= t("debates.new.start_new") %></h1> + <div data-alert class="callout primary"> + <%= 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 %> + <strong><%= t("debates.new.more_info") %></strong> + <% end %> + <% end %> + </div> + <%= render Debates::FormComponent.new(debate) %> + </div> + + <div class="small-12 medium-3 column"> + <span class="icon-debates float-right"></span> + <h2><%= t("debates.new.recommendations_title") %></h2> + <ul class="recommendations"> + <li><%= t("debates.new.recommendation_one") %></li> + <li><%= t("debates.new.recommendation_two") %></li> + <li><%= t("debates.new.recommendation_three") %></li> + <li><%= t("debates.new.recommendation_four") %></li> + </ul> + </div> +</div> diff --git a/app/components/debates/new_component.rb b/app/components/debates/new_component.rb new file mode 100644 index 000000000..2b0ac9787 --- /dev/null +++ b/app/components/debates/new_component.rb @@ -0,0 +1,7 @@ +class Debates::NewComponent < ApplicationComponent + attr_reader :debate + + def initialize(debate) + @debate = debate + end +end diff --git a/app/views/debates/new.html.erb b/app/views/debates/new.html.erb index f7da8c74c..d798c7b8b 100644 --- a/app/views/debates/new.html.erb +++ b/app/views/debates/new.html.erb @@ -1,30 +1 @@ -<div class="debate-new"> - - <div class="small-12 medium-9 column"> - <%= back_link_to debates_path %> - - <h1><%= t("debates.new.start_new") %></h1> - <div data-alert class="callout primary"> - <%= 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 %> - <strong><%= t("debates.new.more_info") %></strong> - <% end %> - <% end %> - </div> - <%= render "form" %> - </div> - - <div class="small-12 medium-3 column"> - <span class="icon-debates float-right"></span> - <h2><%= t("debates.new.recommendations_title") %></h2> - <ul class="recommendations"> - <li><%= t("debates.new.recommendation_one") %></li> - <li><%= t("debates.new.recommendation_two") %></li> - <li><%= t("debates.new.recommendation_three") %></li> - <li><%= t("debates.new.recommendation_four") %></li> - </ul> - </div> -</div> +<%= render Debates::NewComponent.new(@debate) %> From 211bcb8a6569752c9b2d7fc2ca2e743163e42a6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net> Date: Sat, 10 Jul 2021 18:06:34 +0200 Subject: [PATCH 18/24] Move new proposal view to a component --- .../proposals/new_component.html.erb | 25 +++++++++++++++++++ app/components/proposals/new_component.rb | 7 ++++++ app/views/proposals/new.html.erb | 25 +------------------ 3 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 app/components/proposals/new_component.html.erb create mode 100644 app/components/proposals/new_component.rb diff --git a/app/components/proposals/new_component.html.erb b/app/components/proposals/new_component.html.erb new file mode 100644 index 000000000..51e567cb9 --- /dev/null +++ b/app/components/proposals/new_component.html.erb @@ -0,0 +1,25 @@ +<div class="proposal-new"> + + <div class="small-12 medium-9 column"> + <%= back_link_to %> + + <h1><%= t("proposals.new.start_new") %></h1> + <div data-alert class="callout primary"> + <%= link_to help_path(anchor: "proposals"), title: t("shared.target_blank"), target: "_blank" do %> + <%= t("proposals.new.more_info") %> + <% end %> + </div> + + <%= render Proposals::FormComponent.new(proposal, url: proposals_path) %> + </div> + + <div class="small-12 medium-3 column"> + <span class="icon-proposals float-right"></span> + <h2><%= t("proposals.new.recommendations_title") %></h2> + <ul class="recommendations"> + <li><%= t("proposals.new.recommendation_one") %></li> + <li><%= t("proposals.new.recommendation_two") %></li> + <li><%= t("proposals.new.recommendation_three") %></li> + </ul> + </div> +</div> diff --git a/app/components/proposals/new_component.rb b/app/components/proposals/new_component.rb new file mode 100644 index 000000000..3b3c85d97 --- /dev/null +++ b/app/components/proposals/new_component.rb @@ -0,0 +1,7 @@ +class Proposals::NewComponent < ApplicationComponent + attr_reader :proposal + + def initialize(proposal) + @proposal = proposal + end +end diff --git a/app/views/proposals/new.html.erb b/app/views/proposals/new.html.erb index 721e7cee4..92a9ce0e4 100644 --- a/app/views/proposals/new.html.erb +++ b/app/views/proposals/new.html.erb @@ -1,24 +1 @@ -<div class="proposal-new"> - - <div class="small-12 medium-9 column"> - <%= back_link_to %> - - <h1><%= t("proposals.new.start_new") %></h1> - <div data-alert class="callout primary"> - <%= link_to help_path(anchor: "proposals"), title: t("shared.target_blank"), target: "_blank" do %> - <%= t("proposals.new.more_info") %> - <% end %> - </div> - <%= render "proposals/form", form_url: proposals_path %> - </div> - - <div class="small-12 medium-3 column"> - <span class="icon-proposals float-right"></span> - <h2><%= t("proposals.new.recommendations_title") %></h2> - <ul class="recommendations"> - <li><%= t("proposals.new.recommendation_one") %></li> - <li><%= t("proposals.new.recommendation_two") %></li> - <li><%= t("proposals.new.recommendation_three") %></li> - </ul> - </div> -</div> +<%= render Proposals::NewComponent.new(@proposal) %> From 909fd007145c92b8df461ae3b58fb63c2693e958 Mon Sep 17 00:00:00 2001 From: decabeza <alberto@decabeza.es> Date: Mon, 8 Jun 2020 13:25:14 +0200 Subject: [PATCH 19/24] Update styles and layout for new debates form --- .../stylesheets/budgets/investments/form.scss | 56 +----- .../stylesheets/budgets/investments/new.scss | 102 +--------- app/assets/stylesheets/debates/form.scss | 7 +- app/assets/stylesheets/debates/new.scss | 15 ++ app/assets/stylesheets/layout.scss | 1 + app/assets/stylesheets/mixins/forms.scss | 178 ++++++++++++++++++ app/assets/stylesheets/participation.scss | 13 -- .../debates/form_component.html.erb | 72 +++---- app/components/debates/new_component.html.erb | 34 ++-- app/components/debates/new_component.rb | 5 + config/locales/en/general.yml | 4 +- config/locales/es/general.yml | 4 +- spec/system/ckeditor_spec.rb | 5 +- 13 files changed, 262 insertions(+), 234 deletions(-) create mode 100644 app/assets/stylesheets/debates/new.scss create mode 100644 app/assets/stylesheets/mixins/forms.scss 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 %> + <fieldset class="required-fields"> + <legend><%= t("shared.required") %></legend> - <%= f.translatable_fields do |translations_form| %> - <div> - <%= translations_form.text_field :title, - maxlength: Debate.title_max_length, - data: suggest_data(debate) %> - </div> - <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div> + <%= render "shared/globalize_locales", resource: debate %> - <div> - <%= translations_form.text_area :description, - maxlength: Debate.description_max_length, - class: "html-area" %> - </div> - <% end %> + <%= f.translatable_fields do |translations_form| %> + <div> + <%= translations_form.text_field :title, + maxlength: Debate.title_max_length, + data: suggest_data(debate) %> + </div> + <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div> + + <div> + <%= translations_form.text_area :description, + maxlength: Debate.description_max_length, + class: "html-area" %> + </div> + <% end %> + </fieldset> <%= f.invisible_captcha :subtitle %> - <div> - <%= 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" %> - </div> + <fieldset> + <legend><%= t("shared.optional") %></legend> - <%= render SDG::RelatedListSelectorComponent.new(f) %> + <div> + <%= 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" %> + </div> - <div> - <% 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 %> - </div> + <%= render SDG::RelatedListSelectorComponent.new(f) %> + </fieldset> <div class="actions"> + <% if debate.new_record? %> + <div> + <%= 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") + ) %> + </div> + <% end %> + <%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %> </div> <% 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 @@ -<div class="debate-new"> +<main class="debate-new"> + <%= back_link_to debates_path, t("debates.index.section_header.title") %> - <div class="small-12 medium-9 column"> - <%= 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 %> - <h1><%= t("debates.new.start_new") %></h1> - <div data-alert class="callout primary"> - <%= 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 %> - <strong><%= t("debates.new.more_info") %></strong> - <% end %> - <% end %> - </div> - <%= render Debates::FormComponent.new(debate) %> - </div> - - <div class="small-12 medium-3 column"> - <span class="icon-debates float-right"></span> + <aside> <h2><%= t("debates.new.recommendations_title") %></h2> + <ul class="recommendations"> <li><%= t("debates.new.recommendation_one") %></li> <li><%= t("debates.new.recommendation_two") %></li> <li><%= t("debates.new.recommendation_three") %></li> <li><%= t("debates.new.recommendation_four") %></li> </ul> - </div> -</div> + </aside> + + <%= render Debates::FormComponent.new(debate) %> +</main> 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" From 578f3437da4b63b4aadfe86076b0c83a88d37373 Mon Sep 17 00:00:00 2001 From: decabeza <alberto@decabeza.es> Date: Wed, 10 Jun 2020 19:58:53 +0200 Subject: [PATCH 20/24] Update styles and layout for new proposals form --- app/assets/stylesheets/layout.scss | 1 + app/assets/stylesheets/participation.scss | 20 -- app/assets/stylesheets/proposals/form.scss | 8 +- app/assets/stylesheets/proposals/new.scss | 15 ++ .../proposals/form_component.html.erb | 182 +++++++++--------- .../proposals/new_component.html.erb | 30 ++- app/components/proposals/new_component.rb | 5 + 7 files changed, 130 insertions(+), 131 deletions(-) create mode 100644 app/assets/stylesheets/proposals/new.scss diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 86af0edae..277fff637 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -69,6 +69,7 @@ main { &.budget-investment-new, &.debate-new, + &.proposal-new, &.sdg-goals-index, &.sdg-goal-show { @include grid-column-gutter; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index d498bb70f..4f4c6c54c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -244,19 +244,6 @@ // 02. New participation // --------------------- -.proposal-new { - - .icon-proposals { - font-size: rem-calc(50); - line-height: $line-height; - opacity: 0.5; - } - - .icon-proposals { - color: $proposals; - } -} - .recommendations { list-style-type: none; margin-left: 0; @@ -273,13 +260,6 @@ } } -.proposal-new { - - .recommendations li::before { - color: $proposals; - } -} - .budget-investment-new, .proposal-new, .proposal-edit, diff --git a/app/assets/stylesheets/proposals/form.scss b/app/assets/stylesheets/proposals/form.scss index b666de98e..a3a8bf538 100644 --- a/app/assets/stylesheets/proposals/form.scss +++ b/app/assets/stylesheets/proposals/form.scss @@ -1,9 +1,3 @@ .proposal-form { - - .globalize-languages, - .translatable-fields { - @include grid-row-nest; - @include grid-column-gutter; - } + @extend %public-form; } - diff --git a/app/assets/stylesheets/proposals/new.scss b/app/assets/stylesheets/proposals/new.scss new file mode 100644 index 000000000..50e9aa694 --- /dev/null +++ b/app/assets/stylesheets/proposals/new.scss @@ -0,0 +1,15 @@ +.proposal-new { + @extend %public-form-header; + + header h1 { + @include has-fa-icon(lightbulb, regular, after); + } + + aside { + margin-top: $line-height; + } + + .recommendations li::before { + color: $proposals; + } +} diff --git a/app/components/proposals/form_component.html.erb b/app/components/proposals/form_component.html.erb index 3831a6f5c..f1af97081 100644 --- a/app/components/proposals/form_component.html.erb +++ b/app/components/proposals/form_component.html.erb @@ -1,106 +1,114 @@ <%= translatable_form_for(proposal, url: url, html: { class: "proposal-form" }) do |f| %> <%= render "shared/errors", resource: proposal %> - <%= render "shared/globalize_locales", resource: proposal %> + <fieldset class="required-fields"> + <legend><%= t("shared.required") %></legend> - <%= f.translatable_fields do |translations_form| %> - <div> - <%= translations_form.text_field :title, - maxlength: Proposal.title_max_length, - data: suggest_data(proposal) %> - </div> - <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div> + <%= render "shared/globalize_locales", resource: proposal %> - <div> - <%= translations_form.text_area :summary, - rows: 4, maxlength: 200, - hint: t("proposals.form.proposal_summary_note") %> - </div> + <%= f.translatable_fields do |translations_form| %> + <div> + <%= translations_form.text_field :title, + maxlength: Proposal.title_max_length, + data: suggest_data(proposal) %> + </div> + <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div> - <div> - <%= translations_form.text_area :description, - maxlength: Proposal.description_max_length, - class: "html-area" %> - </div> - <% end %> + <div> + <%= translations_form.text_area :summary, + rows: 4, maxlength: 200, + hint: t("proposals.form.proposal_summary_note") %> + </div> + + <div> + <%= translations_form.text_area :description, + maxlength: Proposal.description_max_length, + class: "html-area" %> + </div> + <% end %> + </fieldset> <%= f.invisible_captcha :subtitle %> - <div> - <%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %> - </div> + <fieldset> + <legend><%= t("shared.optional") %></legend> - <% if feature?(:allow_images) %> - <div class="images"> - <%= render "images/nested_image", imageable: proposal, f: f %> - </div> - <% end %> - - <% if feature?(:allow_attached_documents) %> - <div class="documents"> - <%= render "documents/nested_documents", documentable: proposal, f: f %> - </div> - <% end %> - - <div> - <%= f.select :geozone_id, geozone_select_options, - include_blank: t("geozones.none") %> - </div> - - <% if feature?(:map) %> <div> - <%= render "map_locations/form_fields", - form: f, - map_location: proposal.map_location || MapLocation.new, - label: t("proposals.form.map_location"), - help: t("proposals.form.map_location_instructions"), - remove_marker_label: t("proposals.form.map_remove_marker"), - parent_class: "proposal", - i18n_namespace: "proposals" %> - </div> - <% end %> - - <div> - <%= f.label :tag_list, t("proposals.form.tags_label") %> - <p class="help-text" id="tag-list-help-text"><%= t("proposals.form.tags_instructions") %></p> - - <div id="category_tags" class="tags"> - <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %> - <% categories.each do |tag| %> - <a class="js-add-tag-link"><%= tag.name %></a> - <% end %> + <%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %> </div> - <br> - <%= f.text_field :tag_list, value: proposal.tag_list.to_s, - label: false, - placeholder: t("proposals.form.tags_placeholder"), - class: "js-tag-list tag-autocomplete", - aria: { describedby: "tag-list-help-text" }, - data: { js_url: suggest_tags_path } %> - </div> - - <% if current_user.unverified? %> - <div> - <%= f.text_field :responsible_name, - hint: t("proposals.form.proposal_responsible_name_note") %> - </div> - <% end %> - - <%= render SDG::RelatedListSelectorComponent.new(f) %> - - <div> - <% if proposal.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") - ) %> + <% if feature?(:allow_images) %> + <div class="images"> + <%= render "images/nested_image", imageable: proposal, f: f %> + </div> <% end %> - </div> + + <% if feature?(:allow_attached_documents) %> + <div class="documents"> + <%= render "documents/nested_documents", documentable: proposal, f: f %> + </div> + <% end %> + + <div> + <%= f.select :geozone_id, geozone_select_options, + include_blank: t("geozones.none") %> + </div> + + <% if feature?(:map) %> + <div> + <%= render "map_locations/form_fields", + form: f, + map_location: proposal.map_location || MapLocation.new, + label: t("proposals.form.map_location"), + help: t("proposals.form.map_location_instructions"), + remove_marker_label: t("proposals.form.map_remove_marker"), + parent_class: "proposal", + i18n_namespace: "proposals" %> + </div> + <% end %> + + <div> + <%= f.label :tag_list, t("proposals.form.tags_label") %> + <p class="help-text" id="tag-list-help-text"><%= t("proposals.form.tags_instructions") %></p> + + <div id="category_tags" class="tags"> + <%= f.label :category_tag_list, t("proposals.form.tag_category_label") %> + <% categories.each do |tag| %> + <a class="js-add-tag-link"><%= tag.name %></a> + <% end %> + </div> + + <br> + <%= f.text_field :tag_list, value: proposal.tag_list.to_s, + label: false, + placeholder: t("proposals.form.tags_placeholder"), + class: "js-tag-list tag-autocomplete", + aria: { describedby: "tag-list-help-text" }, + data: { js_url: suggest_tags_path } %> + </div> + + <% if current_user.unverified? %> + <div> + <%= f.text_field :responsible_name, + hint: t("proposals.form.proposal_responsible_name_note") %> + </div> + <% end %> + + <%= render SDG::RelatedListSelectorComponent.new(f) %> + </fieldset> <div class="actions"> + <% if proposal.new_record? %> + <div> + <%= 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") + ) %> + </div> + <% end %> + <%= f.submit(class: "button", value: t("proposals.#{action_name}.form.submit_button")) %> </div> <% end %> diff --git a/app/components/proposals/new_component.html.erb b/app/components/proposals/new_component.html.erb index 51e567cb9..986f230dd 100644 --- a/app/components/proposals/new_component.html.erb +++ b/app/components/proposals/new_component.html.erb @@ -1,25 +1,21 @@ -<div class="proposal-new"> +<main class="proposal-new"> + <%= back_link_to proposals_path, t("proposals.index.section_header.title") %> - <div class="small-12 medium-9 column"> - <%= back_link_to %> + <%= header do %> + <%= link_to help_path(anchor: "proposals"), title: t("shared.target_blank"), target: "_blank" do %> + <%= t("proposals.new.more_info") %> + <% end %> + <% end %> - <h1><%= t("proposals.new.start_new") %></h1> - <div data-alert class="callout primary"> - <%= link_to help_path(anchor: "proposals"), title: t("shared.target_blank"), target: "_blank" do %> - <%= t("proposals.new.more_info") %> - <% end %> - </div> - - <%= render Proposals::FormComponent.new(proposal, url: proposals_path) %> - </div> - - <div class="small-12 medium-3 column"> - <span class="icon-proposals float-right"></span> + <aside> <h2><%= t("proposals.new.recommendations_title") %></h2> + <ul class="recommendations"> <li><%= t("proposals.new.recommendation_one") %></li> <li><%= t("proposals.new.recommendation_two") %></li> <li><%= t("proposals.new.recommendation_three") %></li> </ul> - </div> -</div> + </aside> + + <%= render Proposals::FormComponent.new(proposal, url: proposals_path) %> +</main> diff --git a/app/components/proposals/new_component.rb b/app/components/proposals/new_component.rb index 3b3c85d97..05dbc81c1 100644 --- a/app/components/proposals/new_component.rb +++ b/app/components/proposals/new_component.rb @@ -1,7 +1,12 @@ class Proposals::NewComponent < ApplicationComponent + include Header attr_reader :proposal def initialize(proposal) @proposal = proposal end + + def title + t("proposals.new.start_new") + end end From cb800d0f38e65812d365f7eab49ff4f5b24f6c98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net> Date: Sat, 10 Jul 2021 18:12:59 +0200 Subject: [PATCH 21/24] Remove recommendations editing a topic The same way we don't show recommendations when editing a proposal or a debate. --- app/views/topics/_recommendations.html.erb | 7 ------- app/views/topics/edit.html.erb | 4 ---- app/views/topics/new.html.erb | 8 +++++++- 3 files changed, 7 insertions(+), 12 deletions(-) delete mode 100644 app/views/topics/_recommendations.html.erb diff --git a/app/views/topics/_recommendations.html.erb b/app/views/topics/_recommendations.html.erb deleted file mode 100644 index ff86b877b..000000000 --- a/app/views/topics/_recommendations.html.erb +++ /dev/null @@ -1,7 +0,0 @@ -<h2><%= t("community.topic.sidebar.recommendations_title") %></h2> - -<ul class="recommendations"> - <li><%= t("community.topic.sidebar.recommendation_one") %></li> - <li><%= t("community.topic.sidebar.recommendation_two") %></li> - <li><%= t("community.topic.sidebar.recommendation_three") %></li> -</ul> diff --git a/app/views/topics/edit.html.erb b/app/views/topics/edit.html.erb index e305acd13..699202e20 100644 --- a/app/views/topics/edit.html.erb +++ b/app/views/topics/edit.html.erb @@ -5,8 +5,4 @@ <h1><%= t("community.topic.edit") %></h1> <%= render "form" %> </div> - - <div class="small-12 medium-3 column"> - <%= render "recommendations" %> - </div> </div> diff --git a/app/views/topics/new.html.erb b/app/views/topics/new.html.erb index bf13b1294..041fe6903 100644 --- a/app/views/topics/new.html.erb +++ b/app/views/topics/new.html.erb @@ -7,6 +7,12 @@ </div> <div class="small-12 medium-3 column"> - <%= render "recommendations" %> + <h2><%= t("community.topic.sidebar.recommendations_title") %></h2> + + <ul class="recommendations"> + <li><%= t("community.topic.sidebar.recommendation_one") %></li> + <li><%= t("community.topic.sidebar.recommendation_two") %></li> + <li><%= t("community.topic.sidebar.recommendation_three") %></li> + </ul> </div> </div> From 932da00f8da1a870fdfedd08d469897c419eedd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net> Date: Sat, 10 Jul 2021 18:18:11 +0200 Subject: [PATCH 22/24] Update new topic form layout The same way we did with debates and proposals, we move recommendations before the form. --- app/assets/stylesheets/layout.scss | 4 +++- app/views/topics/_form.html.erb | 11 +++-------- app/views/topics/edit.html.erb | 13 ++++++------- app/views/topics/new.html.erb | 17 ++++++++--------- 4 files changed, 20 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 277fff637..bb15ed9c0 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -71,7 +71,9 @@ main { &.debate-new, &.proposal-new, &.sdg-goals-index, - &.sdg-goal-show { + &.sdg-goal-show, + &.topic-edit, + &.topic-new { @include grid-column-gutter; } } diff --git a/app/views/topics/_form.html.erb b/app/views/topics/_form.html.erb index 579dfd141..739040616 100644 --- a/app/views/topics/_form.html.erb +++ b/app/views/topics/_form.html.erb @@ -2,13 +2,8 @@ <%= render "shared/errors", resource: @topic %> - <div class="row"> - <div class="small-12 column"> - <%= f.text_field :title %> - <%= f.text_area :description, rows: "5" %> - - <%= f.submit(class: "button", value: t("community.topic.form.#{action_name}.submit_button")) %> - </div> - </div> + <%= f.text_field :title %> + <%= f.text_area :description, rows: "5" %> + <%= f.submit(class: "button", value: t("community.topic.form.#{action_name}.submit_button")) %> <% end %> diff --git a/app/views/topics/edit.html.erb b/app/views/topics/edit.html.erb index 699202e20..8788b1229 100644 --- a/app/views/topics/edit.html.erb +++ b/app/views/topics/edit.html.erb @@ -1,8 +1,7 @@ -<div class="row"> +<main class="topic-edit"> + <%= back_link_to community_path(@community) %> - <div class="small-12 medium-9 column"> - <%= back_link_to community_path(@community) %> - <h1><%= t("community.topic.edit") %></h1> - <%= render "form" %> - </div> -</div> + <h1><%= t("community.topic.edit") %></h1> + + <%= render "form" %> +</main> diff --git a/app/views/topics/new.html.erb b/app/views/topics/new.html.erb index 041fe6903..aed9fbd71 100644 --- a/app/views/topics/new.html.erb +++ b/app/views/topics/new.html.erb @@ -1,12 +1,9 @@ -<div class="row"> +<main class="topic-new"> + <%= back_link_to community_path(@community) %> - <div class="small-12 medium-9 column"> - <%= back_link_to community_path(@community) %> - <h1><%= t("community.topic.create") %></h1> - <%= render "form" %> - </div> + <h1><%= t("community.topic.create") %></h1> - <div class="small-12 medium-3 column"> + <aside> <h2><%= t("community.topic.sidebar.recommendations_title") %></h2> <ul class="recommendations"> @@ -14,5 +11,7 @@ <li><%= t("community.topic.sidebar.recommendation_two") %></li> <li><%= t("community.topic.sidebar.recommendation_three") %></li> </ul> - </div> -</div> + </aside> + + <%= render "form" %> +</main> From e7b37ae93b940af7bc0565d929c36a3bb10341db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net> Date: Sat, 10 Jul 2021 18:22:24 +0200 Subject: [PATCH 23/24] Increase font-size in recommendations Now that we display them in one column, the lines were too long for a small font size. --- app/assets/stylesheets/participation.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 4f4c6c54c..53f375fe8 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -250,7 +250,6 @@ margin-top: $line-height; li { - font-size: $small-font-size; margin: $line-height / 2 0; &::before { From 0dfabc89392cbead0befdb7668653005703333ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net> Date: Sat, 10 Jul 2021 18:28:07 +0200 Subject: [PATCH 24/24] Use a Font Awesome icon in recommendations We've deprecated the "icons" font since we started using Font Awesome two years ago and using it caused some screen readers to announce an "l" before the content of every list item. --- app/assets/stylesheets/participation.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 53f375fe8..e2e9d9eda 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -250,11 +250,11 @@ margin-top: $line-height; li { + @include has-fa-icon(check, solid); margin: $line-height / 2 0; &::before { - content: "l "; - font-family: "icons" !important; + margin-right: $font-icon-margin * 1.5; } } }