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| %>
+
+
+
+ <%= 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