From 4072735187bb48323eb2d3b15868f260204cd61e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 9 Jan 2021 19:19:29 +0100 Subject: [PATCH 1/7] Add icons to SDG index --- app/assets/stylesheets/sdg/goals/index.scss | 25 +++++++++++++++++++ .../sdg/goals/index_component.html.erb | 4 ++- app/components/sdg/goals/index_component.rb | 14 +++++++++++ 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/sdg/goals/index.scss diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss new file mode 100644 index 000000000..23cf9074e --- /dev/null +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -0,0 +1,25 @@ +.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%; + } + } + } +} diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb index d475bf90b..f03bb2ef1 100644 --- a/app/components/sdg/goals/index_component.html.erb +++ b/app/components/sdg/goals/index_component.html.erb @@ -1 +1,3 @@ -<%= link_list(*goals.map { |goal| [goal.code_and_title, sdg_goal_path(goal.code)] }) %> +
+ <%= link_list(*goal_links, class: "sdg-goal-list") %> +
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb index e89079166..dd59427d8 100644 --- a/app/components/sdg/goals/index_component.rb +++ b/app/components/sdg/goals/index_component.rb @@ -5,4 +5,18 @@ class SDG::Goals::IndexComponent < ApplicationComponent def initialize(goals) @goals = goals end + + private + + 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 From 99fe792e11015dc7a5e4ba931c7a0cc731686c88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 9 Jan 2021 19:37:09 +0100 Subject: [PATCH 2/7] Group figure-card styles together This way rules are a bit easier to follow. --- app/assets/stylesheets/layout.scss | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 966d046c0..4094e4dcb 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2840,21 +2840,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%; @@ -2906,6 +2891,14 @@ table { } } + .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 { height: 100%; width: 100%; @@ -2920,6 +2913,7 @@ table { padding: $line-height / 4 $line-height / 2; position: absolute; width: 100%; + z-index: 3; h3, .title { From 9913b6a0c606ae977effc8fdfa3e7e96a7a8b1a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 9 Jan 2021 19:58:54 +0100 Subject: [PATCH 3/7] Simplify hovering color styles for headings The default behavior for headings is to inherit the color, even in the `:hover` style, and IMHO we can keep it this way, particularly in the cards, which is the main place where we use headings inside links. --- app/assets/stylesheets/layout.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 4094e4dcb..0096671b1 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 { @@ -2770,13 +2761,6 @@ table { } } - a:hover { - - h3 { - color: #fff; - } - } - .background-header { clip-path: ellipse(60% 80% at 50% 0%); height: $line-height * 2; From 3e74f4ab67696983899fae0444cfe047d3373adc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 9 Jan 2021 20:15:06 +0100 Subject: [PATCH 4/7] Remove unused card styles There are no links inside a figure-card, so these styles didn't affect any elements. There are also no elements with `.title`, and the h3 inherits the white color automatically form the figcaption. On the other hand, the .see-all link is not inside an element with a `card` class since commit fae52274a. --- app/assets/stylesheets/layout.scss | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0096671b1..b4c77ddd4 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2790,12 +2790,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); } @@ -2863,18 +2860,6 @@ 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%; @@ -2899,8 +2884,7 @@ table { width: 100%; z-index: 3; - h3, - .title { + h3 { font-size: $base-font-size; @include breakpoint(medium) { From 5907ddf884d7c8820cafc8a525a5b388b5753f53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 13 Jan 2021 14:14:16 +0100 Subject: [PATCH 5/7] Use local variable in cards partial This way it's going to be easier to reuse. --- app/views/pages/custom_page.html.erb | 2 +- app/views/shared/_cards.html.erb | 2 +- app/views/welcome/index.html.erb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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/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 %> From c3e60ff514f56dc317d06787ece583344a53bc9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 13 Jan 2021 14:44:55 +0100 Subject: [PATCH 6/7] Add cards to SDG homepage --- app/assets/stylesheets/layout.scss | 3 ++- app/assets/stylesheets/sdg/goals/index.scss | 9 +++++++++ app/components/sdg/goals/index_component.html.erb | 10 ++++++++++ app/components/sdg/goals/index_component.rb | 5 +++-- app/controllers/sdg/goals_controller.rb | 1 + app/views/sdg/goals/index.html.erb | 2 +- spec/system/sdg/goals_spec.rb | 11 +++++++++++ 7 files changed, 37 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b4c77ddd4..3fe00f6be 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2748,7 +2748,8 @@ table { .home-page, .custom-page, -.sdg-goal-show { +.sdg-goal-show, +.sdg-goals-index { a { diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index 23cf9074e..efbd855cc 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -22,4 +22,13 @@ } } } + + .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 f03bb2ef1..c0f0635fd 100644 --- a/app/components/sdg/goals/index_component.html.erb +++ b/app/components/sdg/goals/index_component.html.erb @@ -1,3 +1,13 @@
<%= 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 dd59427d8..bf0832269 100644 --- a/app/components/sdg/goals/index_component.rb +++ b/app/components/sdg/goals/index_component.rb @@ -1,9 +1,10 @@ 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 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/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/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 From 5927e4dfaa8ecc8e7f26b5835ac3d6880c0a34ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 13 Jan 2021 15:12:30 +0100 Subject: [PATCH 7/7] Add title to SDG homepage --- app/components/sdg/goals/index_component.html.erb | 2 ++ app/components/sdg/goals/index_component.rb | 4 ++++ config/locales/en/sdg.yml | 1 + config/locales/es/sdg.yml | 1 + 4 files changed, 8 insertions(+) diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb index c0f0635fd..f3b4b0fa8 100644 --- a/app/components/sdg/goals/index_component.html.erb +++ b/app/components/sdg/goals/index_component.html.erb @@ -1,3 +1,5 @@ +<% provide(:title) { title } %> +
<%= link_list(*goal_links, class: "sdg-goal-list") %> diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb index bf0832269..f9715d01a 100644 --- a/app/components/sdg/goals/index_component.rb +++ b/app/components/sdg/goals/index_component.rb @@ -9,6 +9,10 @@ class SDG::Goals::IndexComponent < ApplicationComponent private + def title + t("sdg.goals.title") + end + def goal_links goals.map { |goal| goal_link(goal) } 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}"