Merge pull request #4314 from consul/sdg_homepage

Add icons and cards to SDG homepage

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) {

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;
+    }
+  }
+}

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 } %>
+
+<div class="sdg-goals-index">
+  <%= link_list(*goal_links, class: "sdg-goal-list") %>
+
+  <% phases.each do |phase| %>
+    <section class="sdg-phase" id="sdg_phase_<%= phase.kind %>">
+      <header>
+        <h2 class="title"><%= phase.title %></h2>
+      </header>
+
+      <%= render "shared/cards", cards: phase.cards %>
+    </section>
+  <% end %>
+</div>

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

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

app/views/pages/custom_page.html.erb

@@ -20,7 +20,7 @@
 
   <% if @cards.any? %>
     <div class="small-12 column">
-      <%= render "shared/cards" %>
+      <%= render "shared/cards", cards: @cards %>
     </div>
   <% end %>
 

app/views/sdg/goals/index.html.erb

@@ -1 +1 @@
-<%= render SDG::Goals::IndexComponent.new(@goals) %>
+<%= render SDG::Goals::IndexComponent.new(@goals, @phases) %>

app/views/shared/_cards.html.erb

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="cards-container">
-    <% @cards.each do |card| %>
+    <% cards.each do |card| %>
       <%= render "shared/card", card: card %>
     <% end %>
   </div>

app/views/welcome/index.html.erb

@@ -21,7 +21,7 @@
       <div class="small-12 column <%= "large-8" if feed_processes_enabled? %>">
         <h2 class="title"><%= t("welcome.cards.title") %></h2>
 
-        <%= render "shared/cards" %>
+        <%= render "shared/cards", cards: @cards %>
       </div>
     <% end %>
 

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}"

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}"

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