diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 966d046c0..3fe00f6be 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -73,15 +73,6 @@ a { &:active { color: $link-hover; text-decoration: underline; - - h1, - h2, - h3, - h4, - h5, - h6 { - color: $link-hover; - } } &:focus { @@ -2757,7 +2748,8 @@ table { .home-page, .custom-page, -.sdg-goal-show { +.sdg-goal-show, +.sdg-goals-index { a { @@ -2770,13 +2762,6 @@ table { } } - a:hover { - - h3 { - color: #fff; - } - } - .background-header { clip-path: ellipse(60% 80% at 50% 0%); height: $line-height * 2; @@ -2806,12 +2791,9 @@ table { } a:hover { + box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2); text-decoration: none; - &:not(.see-all) { - box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2); - } - img { transform: scale(1.1); } @@ -2840,21 +2822,6 @@ table { } } - .figure-card { - - figcaption { - z-index: 3; - } - - .gradient { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%); - height: 100%; - position: absolute; - width: 100%; - z-index: 2; - } - } - figure img { height: 100%; width: 100%; @@ -2894,16 +2861,12 @@ table { min-height: rem-calc(185); } - a { - - h3, - .title { - color: #fff; - } - - &:hover { - text-decoration: none; - } + .gradient { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%); + height: 100%; + position: absolute; + width: 100%; + z-index: 2; } img { @@ -2920,9 +2883,9 @@ table { padding: $line-height / 4 $line-height / 2; position: absolute; width: 100%; + z-index: 3; - h3, - .title { + h3 { font-size: $base-font-size; @include breakpoint(medium) { diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss new file mode 100644 index 000000000..efbd855cc --- /dev/null +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -0,0 +1,34 @@ +.sdg-goals-index { + + .sdg-goal-list { + @include grid-row; + @include grid-column-gutter; + list-style: none; + margin-bottom: 0; + max-width: 40rem; + + li { + display: inline-block; + $spacing: 1vw; + + line-height: 0; + margin-bottom: $spacing; + padding-left: $spacing / 2; + padding-right: $spacing / 2; + width: 1 * 100% / 6; + + .sdg-goal-icon { + width: 100%; + } + } + } + + .sdg-phase { + @include grid-row; + @include grid-column-gutter; + + .cards-container { + @include grid-row-nest; + } + } +} diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb index d475bf90b..f3b4b0fa8 100644 --- a/app/components/sdg/goals/index_component.html.erb +++ b/app/components/sdg/goals/index_component.html.erb @@ -1 +1,15 @@ -<%= link_list(*goals.map { |goal| [goal.code_and_title, sdg_goal_path(goal.code)] }) %> +<% provide(:title) { title } %> + +
+ <%= link_list(*goal_links, class: "sdg-goal-list") %> + + <% phases.each do |phase| %> +
+
+

<%= phase.title %>

+
+ + <%= render "shared/cards", cards: phase.cards %> +
+ <% end %> +
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb index e89079166..f9715d01a 100644 --- a/app/components/sdg/goals/index_component.rb +++ b/app/components/sdg/goals/index_component.rb @@ -1,8 +1,27 @@ class SDG::Goals::IndexComponent < ApplicationComponent - attr_reader :goals + attr_reader :goals, :phases delegate :link_list, to: :helpers - def initialize(goals) + def initialize(goals, phases) @goals = goals + @phases = phases end + + private + + def title + t("sdg.goals.title") + end + + def goal_links + goals.map { |goal| goal_link(goal) } + end + + def goal_link(goal) + [icon(goal), sdg_goal_path(goal.code)] + end + + def icon(goal) + render SDG::Goals::IconComponent.new(goal) + end end diff --git a/app/controllers/sdg/goals_controller.rb b/app/controllers/sdg/goals_controller.rb index 595add701..05dfb309c 100644 --- a/app/controllers/sdg/goals_controller.rb +++ b/app/controllers/sdg/goals_controller.rb @@ -5,6 +5,7 @@ class SDG::GoalsController < ApplicationController def index @goals = @goals.order(:code) + @phases = SDG::Phase.accessible_by(current_ability).order(:kind) end def show diff --git a/app/views/pages/custom_page.html.erb b/app/views/pages/custom_page.html.erb index e88892ceb..3b9674188 100644 --- a/app/views/pages/custom_page.html.erb +++ b/app/views/pages/custom_page.html.erb @@ -20,7 +20,7 @@ <% if @cards.any? %>
- <%= render "shared/cards" %> + <%= render "shared/cards", cards: @cards %>
<% end %> diff --git a/app/views/sdg/goals/index.html.erb b/app/views/sdg/goals/index.html.erb index 7dfb01513..b38a0eebd 100644 --- a/app/views/sdg/goals/index.html.erb +++ b/app/views/sdg/goals/index.html.erb @@ -1 +1 @@ -<%= render SDG::Goals::IndexComponent.new(@goals) %> +<%= render SDG::Goals::IndexComponent.new(@goals, @phases) %> diff --git a/app/views/shared/_cards.html.erb b/app/views/shared/_cards.html.erb index 34768aca7..9fdbe85c6 100644 --- a/app/views/shared/_cards.html.erb +++ b/app/views/shared/_cards.html.erb @@ -1,6 +1,6 @@
- <% @cards.each do |card| %> + <% cards.each do |card| %> <%= render "shared/card", card: card %> <% end %>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 94e3a04b2..d6d37a4ee 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -21,7 +21,7 @@
">

<%= t("welcome.cards.title") %>

- <%= render "shared/cards" %> + <%= render "shared/cards", cards: @cards %>
<% end %> diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml index c3a90acbb..8da3723da 100644 --- a/config/locales/en/sdg.yml +++ b/config/locales/en/sdg.yml @@ -424,6 +424,7 @@ 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." + title: "Sustainable Development Goals" filter: heading: "Filters by SDG" link: "See all %{resources} related to goal %{code}" diff --git a/config/locales/es/sdg.yml b/config/locales/es/sdg.yml index 80daff847..e7566ab83 100644 --- a/config/locales/es/sdg.yml +++ b/config/locales/es/sdg.yml @@ -424,6 +424,7 @@ 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." + title: "Objetivos de Desarrollo Sostenible" filter: heading: "Filtros por ODS" link: "Ver %{resources} del objetivo %{code}" diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb index 9854b609f..4804b5453 100644 --- a/spec/system/sdg/goals_spec.rb +++ b/spec/system/sdg/goals_spec.rb @@ -32,6 +32,17 @@ describe "SDG Goals", :js do expect(page).to have_current_path sdg_goal_path(7) end + + scenario "has cards for phases" do + create(:widget_card, cardable: SDG::Phase["planning"], title: "Planning card") + + visit sdg_goals_path + + within "#sdg_phase_planning" do + expect(page).to have_css "header", exact_text: "Planning" + expect(page).to have_content "PLANNING CARD" + end + end end describe "Show" do