From ab2b3a26716d4ce5987310205dd2b5e1f1290912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 7 Feb 2021 15:19:49 +0100 Subject: [PATCH] Improve help messages in SDG selector Hopefully now it's a bit more obvious that SDGs can be selected by clicking on them and that the field to select goals and the field to select targets/goals are related (since they're now part of the same fieldset). --- .../stylesheets/sdg/related_list_selector.scss | 12 +++++++++++- .../sdg/related_list_selector_component.html.erb | 15 +++++++-------- .../sdg/related_list_selector_component.rb | 4 ++++ config/locales/en/activerecord.yml | 1 - config/locales/en/sdg.yml | 3 ++- config/locales/es/activerecord.yml | 1 - config/locales/es/sdg.yml | 3 ++- spec/system/sdg_management/relations_spec.rb | 8 ++++---- 8 files changed, 30 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 684ef2022..9e4f8c0ad 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -2,6 +2,10 @@ @include grid-column-gutter; clear: both; + > legend { + margin-bottom: 0; + } + .amsify-suggestags-area .amsify-select-tag { color: $white; @@ -17,7 +21,8 @@ @include sdg-goal-list($spacing); legend { - @include element-invisible; + font-weight: normal; + font-style: italic; } label { @@ -46,6 +51,11 @@ } } + label { + font-weight: normal; + font-style: italic; + } + .input-section { margin-bottom: 2 * $line-height / 3; } diff --git a/app/components/sdg/related_list_selector_component.html.erb b/app/components/sdg/related_list_selector_component.html.erb index 24e408e44..a1bbca60e 100644 --- a/app/components/sdg/related_list_selector_component.html.erb +++ b/app/components/sdg/related_list_selector_component.html.erb @@ -1,9 +1,9 @@ -
-
- <%= f.label :related_sdg_list %> +
+ <%= t("sdg.related_list_selector.title") %> +
- <%= t("sdg.related_list_selector.goal_list") %> + <%= t("sdg.related_list_selector.goal_list", record: relatable_name) %> <%= f.collection_check_boxes(:sdg_goal_ids, goals, :id, :code) do |checkbox_form| %> <%= goal_field(checkbox_form) %> <% end %> @@ -11,15 +11,14 @@ <%= f.text_field :related_sdg_list, class: "input", - label: false, placeholder: t("sdg.related_list_selector.placeholder"), - hint: t("sdg.related_list_selector.hint"), + label: t("sdg.related_list_selector.hint"), data: { "suggestions-list": sdg_related_suggestions, "remove-tag-text": t("sdg.related_list_selector.remove_tag") } %>
-

<%= t("sdg.related_list_selector.help.title", record: f.object.model_name.human) %>

+

<%= t("sdg.related_list_selector.help.title", record: relatable_name) %>

    -
    + diff --git a/app/components/sdg/related_list_selector_component.rb b/app/components/sdg/related_list_selector_component.rb index a17ca1f91..2dedae2d2 100644 --- a/app/components/sdg/related_list_selector_component.rb +++ b/app/components/sdg/related_list_selector_component.rb @@ -49,4 +49,8 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent goal_or_target.code end end + + def relatable_name + f.object.model_name.human.downcase + end end diff --git a/config/locales/en/activerecord.yml b/config/locales/en/activerecord.yml index 825386440..ce8db966a 100644 --- a/config/locales/en/activerecord.yml +++ b/config/locales/en/activerecord.yml @@ -2,7 +2,6 @@ en: attributes: geozone_id: "Scope of operation" results_enabled: "Show results" - related_sdg_list: "Sustainable Development Goals and Targets" stats_enabled: "Show stats" advanced_stats_enabled: "Show advanced stats" name: Name diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml index 9ce18e282..0eb3a869c 100644 --- a/config/locales/en/sdg.yml +++ b/config/locales/en/sdg.yml @@ -455,12 +455,13 @@ en: other: "%{count} more goals" related_list_selector: goal_identifier: "SDG%{code}" - goal_list: "Goal list" + goal_list: "You can choose one or several SDGs aligned with your %{record}" help: title: "Which SDGs and targets are aligned with my %{record}?" hint: "You can introduce the code of a specific goal/target or a text to find one" placeholder: "Write a goal or target code or description" remove_tag: "Remove" + title: "Sustainable Development Goals and Targets" targets: filter: link: "See all %{resources} related to target %{code}" diff --git a/config/locales/es/activerecord.yml b/config/locales/es/activerecord.yml index b98bafcb2..86f05b5ff 100644 --- a/config/locales/es/activerecord.yml +++ b/config/locales/es/activerecord.yml @@ -2,7 +2,6 @@ es: attributes: geozone_id: "Ámbito de actuación" results_enabled: "Mostrar resultados" - related_sdg_list: "Objetivos de Desarrollo Sostenible y Metas" stats_enabled: "Mostrar estadísticas" advanced_stats_enabled: "Mostrar estadísticas avanzadas" name: Nombre diff --git a/config/locales/es/sdg.yml b/config/locales/es/sdg.yml index 7c864ce93..a3f4f9561 100644 --- a/config/locales/es/sdg.yml +++ b/config/locales/es/sdg.yml @@ -455,12 +455,13 @@ es: other: "%{count} objetivos más" related_list_selector: goal_identifier: "ODS%{code}" - goal_list: "Listado de objetivos" + goal_list: "Puedes seleccionar uno o varios ODS con los que se alinea tu %{record}" help: title: "¿Qué ODS y metas se alinean con mi %{record}?" hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno" placeholder: "Escribe las etiquetas que desees" remove_tag: "Eliminar" + title: "Objetivos de Desarrollo Sostenible y Metas" targets: filter: link: "Ver %{resources} de la meta %{code}" diff --git a/spec/system/sdg_management/relations_spec.rb b/spec/system/sdg_management/relations_spec.rb index 43116cc13..1f647ef30 100644 --- a/spec/system/sdg_management/relations_spec.rb +++ b/spec/system/sdg_management/relations_spec.rb @@ -299,17 +299,17 @@ describe "SDG Relations", :js do create(:sdg_local_target, code: "1.1.1") visit sdg_management_edit_legislation_process_path(process) - fill_in "Sustainable Development Goals and Targets", with: "3" + fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "3" within(".amsify-list") { find(:css, "[data-val='3']").click } within(".amsify-suggestags-input-area") { expect(page).to have_content "SDG3" } - fill_in "Sustainable Development Goals and Targets", with: "1.1" + fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "1.1" within(".amsify-list") { find(:css, "[data-val='1.1']").click } within(".amsify-suggestags-input-area") { expect(page).to have_content "1.1" } - fill_in "Sustainable Development Goals and Targets", with: "1.1.1" + fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "1.1.1" within(".amsify-list") { find(:css, "[data-val='1.1.1']").click } within(".amsify-suggestags-input-area") { expect(page).to have_content "1.1.1" } @@ -327,8 +327,8 @@ describe "SDG Relations", :js do process = create(:legislation_process, title: "SDG process") visit sdg_management_edit_legislation_process_path(process) + fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "tag nonexistent," - fill_in "Sustainable Development Goals and Targets", with: "tag nonexistent," within(".amsify-suggestags-input-area") { expect(page).not_to have_content "tag nonexistent" } end