From 6c7a8d31b13f1b825a5e543ced14f8e076f52de9 Mon Sep 17 00:00:00 2001 From: taitus Date: Wed, 27 Jan 2021 14:30:28 +0100 Subject: [PATCH] Add read more and real less on long description In the spec we added in system/sdg/goals_spec.rb we couldn't use either click_link or find_link, because the link to show/hide the long description doesn't have the href attribute. --- app/assets/stylesheets/sdg/goals/show.scss | 15 +++++++++++++++ .../sdg/goals/show_component.html.erb | 17 ++++++++++++++++- config/locales/en/sdg.yml | 3 +++ config/locales/es/sdg.yml | 3 +++ .../components/sdg/goals/show_component_spec.rb | 3 +++ spec/system/sdg/goals_spec.rb | 12 ++++++++++++ 6 files changed, 52 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss index ccb05deb3..1e6c57bfc 100644 --- a/app/assets/stylesheets/sdg/goals/show.scss +++ b/app/assets/stylesheets/sdg/goals/show.scss @@ -63,6 +63,21 @@ } } } + + .goal-description-content { + + .read-more { + text-align: center; + } + } + + .goal-description { + + &.short { + height: rem-calc(150); + overflow: hidden; + } + } } .feed-processes { diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb index d36c600fd..f1511ef83 100644 --- a/app/components/sdg/goals/show_component.html.erb +++ b/app/components/sdg/goals/show_component.html.erb @@ -8,7 +8,22 @@

<%= heading %>

- <%= long_description %> +
+ <%= long_description %> +
+
+ + <%= t("sdg.goals.show.read_more", goal: goal.title) %> + + + <%= t("sdg.goals.show.read_less", goal: goal.title) %> + +
diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml index 9423c874b..d40a0d84c 100644 --- a/config/locales/en/sdg.yml +++ b/config/locales/en/sdg.yml @@ -441,6 +441,9 @@ en: title: "By 2020, enhance capacity-building support to developing countries, including for least developed countries and small island developing States, to increase significantly the availability of high-quality, timely and reliable data disaggregated by income, gender, age, race, ethnicity, migratory status, disability, geographic location and other characteristics relevant in national contexts." target_17_19: title: "By 2030, build on existing initiatives to develop measurements of progress on sustainable development that complement gross domestic product, and support statistical capacity-building in developing countries." + show: + read_more: "Read more about %{goal}" + read_less: "Read less about %{goal}" title: "Sustainable Development Goals" filter: heading: "Filters by SDG" diff --git a/config/locales/es/sdg.yml b/config/locales/es/sdg.yml index 28de2e993..49c67ac4e 100644 --- a/config/locales/es/sdg.yml +++ b/config/locales/es/sdg.yml @@ -441,6 +441,9 @@ es: title: "De aquí a 2020, mejorar el apoyo a la creación de capacidad prestado a los países en desarrollo, incluidos los países menos adelantados y los pequeños Estados insulares en desarrollo, para aumentar significativamente la disponibilidad de datos oportunos, fiables y de gran calidad desglosados por ingresos, sexo, edad, raza, origen étnico, estatus migratorio, discapacidad, ubicación geográfica y otras características pertinentes en los contextos nacionales." target_17_19: title: "De aquí a 2030, aprovechar las iniciativas existentes para elaborar indicadores que permitan medir los progresos en materia de desarrollo sostenible y complementen el producto interno bruto, y apoyar la creación de capacidad estadística en los países en desarrollo." + show: + read_more: "Leer más sobre %{goal}" + read_less: "Leer menos sobre %{goal}" title: "Objetivos de Desarrollo Sostenible" filter: heading: "Filtros por ODS" diff --git a/spec/components/sdg/goals/show_component_spec.rb b/spec/components/sdg/goals/show_component_spec.rb index 04ba79398..c654242bd 100644 --- a/spec/components/sdg/goals/show_component_spec.rb +++ b/spec/components/sdg/goals/show_component_spec.rb @@ -23,5 +23,8 @@ describe SDG::Goals::ShowComponent, type: :component do expect(page).to have_css "#description_goal_#{goal_1.code}" expect(page).to have_content "Globally, the number of people living in extreme poverty" + expect(page).to have_css "#read_more_goal_#{goal_1.code}" + expect(page).to have_content "Read more about No Poverty" + expect(page).to have_css "#read_less_goal_#{goal_1.code}.hide" end end diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb index 4804b5453..efbe28ab9 100644 --- a/spec/system/sdg/goals_spec.rb +++ b/spec/system/sdg/goals_spec.rb @@ -105,5 +105,17 @@ describe "SDG Goals", :js do expect(page).to have_select "By SDG", selected: "15. Life on Land" end end + + scenario "has links to read more and read less for long description" do + visit sdg_goal_path(15) + + expect(page).to have_css("div.read-more a", text: "Read more about Life on Land") + expect(page).to have_css("div.read-more a", text: "Read less about Life on Land", visible: :hidden) + + find("div.read-more a", text: "Read more about Life on Land").click + + expect(page).to have_css("div.read-more a", text: "Read more about Life on Land", visible: :hidden) + expect(page).to have_css("div.read-more a", text: "Read less about Life on Land") + end end end