Merge pull request #4292 from consul/sdg_view

Add SDG view with related content

app/assets/stylesheets/_consul_settings.scss

@@ -123,3 +123,23 @@ $pagination-radius: $global-radius;
 $show-header-for-stacked: true;
 
 $tooltip-background-color: $brand;
+
+$sdg-colors: (
+ 1: #e5243b,
+ 2: #dda63a,
+ 3: #4c9f38,
+ 4: #c5192d,
+ 5: #ff3a21,
+ 6: #26bde2,
+ 7: #fcc30b,
+ 8: #a21942,
+ 9: #fd6925,
+ 10: #dd1367,
+ 11: #fd9d24,
+ 12: #bf8b2e,
+ 13: #3f7e44,
+ 14: #0a97d9,
+ 15: #56c02b,
+ 16: #00689d,
+ 17: #19486a
+);

app/assets/stylesheets/application.scss

@@ -28,4 +28,6 @@
 @import "leaflet";
 @import "sticky_overrides";
 @import "admin/*";
+@import "sdg/**/*";
 @import "sdg_management/*";
+@import "widgets/**/*";

app/assets/stylesheets/layout.scss

@@ -2794,7 +2794,8 @@ table {
 // ------------
 
 .home-page,
-.custom-page {
+.custom-page,
+.sdg-goal-show {
 
  a {
 
@@ -2859,6 +2860,13 @@ table {
  }
  }
 
+ h2 {
+ &.title {
+ @include header-font-size(h3);
+ }
+ }
+
+ h2,
  h3 {
 
  &.title {
@@ -2893,10 +2901,6 @@ table {
 
 .feeds-list {
 
- .proposal {
- clear: both;
- }
-
  a {
 
  &.see-all {
@@ -2910,40 +2914,6 @@ table {
  }
 }
 
-.feed-image {
- display: inline-block;
- height: rem-calc(120);
- overflow: hidden;
- width: 100%;
-
- @include breakpoint(medium) {
- height: rem-calc(96);
- }
-
- img {
- max-width: none;
- width: 100%;
- }
-}
-
-.feed-description {
-
- p {
- font-size: $small-font-size;
- margin-bottom: 0;
- }
-}
-
-.feed-content {
-
- .debate,
- .proposal {
- margin-bottom: 0;
- margin-top: 0;
- padding: $line-height / 2 0;
- }
-}
-
 .figure-card {
  display: flex;
  margin: 0 0 $line-height;

app/assets/stylesheets/mixins.scss

@@ -209,3 +209,11 @@
  text-decoration: none;
  }
 }
+
+@mixin header-font-size($heading-tag) {
+ @each $size, $headers in $header-styles {
+ @include breakpoint($size) {
+ font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size));
+ }
+ }
+}

app/assets/stylesheets/sdg/goals/show.scss

@@ -0,0 +1,40 @@
+.sdg-goal-show {
+ @include grid-row;
+
+ > :not(.feeds-participation) {
+ @include grid-column-gutter;
+ }
+
+ .sdg-goal {
+
+ > header {
+ color: #fff;
+ margin-top: $line-height / 2;
+ padding-left: rem-calc(24);
+ text-shadow: 0 0 1px $black;
+ }
+
+ @each $code, $color in $sdg-colors {
+ &.sdg-goal-#{$code} {
+ > header {
+ background-color: $color;
+ }
+ }
+ }
+ }
+
+ .feed-processes {
+
+ .feed-content {
+ @include breakpoint(medium) {
+ @include grid-row-nest;
+ display: flex;
+
+ > * {
+ @include grid-column-gutter;
+ width: 50%;
+ }
+ }
+ }
+ }
+}

app/assets/stylesheets/widgets/feeds/feed.scss

@@ -0,0 +1,24 @@
+.widget-feed {
+
+ .feed-description {
+
+ p {
+ font-size: $small-font-size;
+ margin-bottom: 0;
+ }
+ }
+
+ .feed-content {
+
+ .debate,
+ .proposal {
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: $line-height / 2 0;
+ }
+ }
+
+ .no-items {
+ margin-top: $line-height;
+ }
+}

app/assets/stylesheets/widgets/feeds/participation.scss

@@ -0,0 +1,30 @@
+.feeds-participation {
+
+ @include breakpoint(medium) {
+ display: flex;
+
+ .feed-proposals:not(:only-child) {
+ width: 2 * 100% / 3;
+ }
+
+ .feed-debates:not(:only-child) {
+ width: 1 * 100% / 3;
+ }
+
+ .feed-proposals,
+ .feed-debates {
+ display: flex;
+ flex-direction: column;
+
+ .feed-content {
+ flex: 1;
+ }
+ }
+ }
+
+ .feed-debates,
+ .feed-proposals {
+ @include grid-col;
+ margin-top: $line-height;
+ }
+}

app/assets/stylesheets/widgets/feeds/proposal.scss

@@ -0,0 +1,20 @@
+.feed-proposals .proposal {
+ @include grid-row-nest;
+ clear: both;
+
+ .feed-image {
+ display: inline-block;
+ height: rem-calc(120);
+ overflow: hidden;
+ width: 100%;
+
+ @include breakpoint(medium) {
+ height: rem-calc(96);
+ }
+
+ img {
+ max-width: none;
+ width: 100%;
+ }
+ }
+}

app/components/sdg/goals/index_component.html.erb

@@ -0,0 +1 @@
+<%= link_list(*goals.map { |goal| [goal.code_and_title, sdg_goal_path(goal.code)] }) %>

app/components/sdg/goals/index_component.rb

@@ -0,0 +1,8 @@
+class SDG::Goals::IndexComponent < ApplicationComponent
+ attr_reader :goals
+ delegate :link_list, to: :helpers
+
+ def initialize(goals)
+ @goals = goals
+ end
+end

app/components/sdg/goals/show_component.html.erb

@@ -0,0 +1,19 @@
+<% provide(:title) { goal.title } %>
+
+<div class="sdg-goal-show">
+ <%= back_link_to sdg_goals_path %>
+
+ <article class="sdg-goal sdg-goal-<%= goal.code %>">
+ <header>
+ <h1><%= goal.title %></h1>
+ </header>
+ </article>
+
+ <%= render Widgets::Feeds::ParticipationComponent.new(feeds) %>
+
+ <% if processes_feed %>
+ <div class="feeds-list">
+ <%= render Widgets::Feeds::FeedComponent.new(processes_feed) %>
+ </div>
+ <% end %>
+</div>

app/components/sdg/goals/show_component.rb

@@ -0,0 +1,18 @@
+class SDG::Goals::ShowComponent < ApplicationComponent
+ attr_reader :goal
+ delegate :back_link_to, to: :helpers
+
+ def initialize(goal)
+ @goal = goal
+ end
+
+ def feeds
+ SDG::Widget::Feed.for_goal(goal)
+ end
+
+ private
+
+ def processes_feed
+ feeds.find { |feed| feed.kind == "processes" }
+ end
+end

app/components/widgets/feeds/debate_component.html.erb

@@ -0,0 +1,3 @@
+<div class="debate">
+ <strong><%= link_to debate.title, url_for(debate) %></strong>
+</div>

app/components/widgets/feeds/debate_component.rb

@@ -0,0 +1,7 @@
+class Widgets::Feeds::DebateComponent < ApplicationComponent
+ attr_reader :debate
+
+ def initialize(debate)
+ @debate = debate
+ end
+end

app/components/widgets/feeds/feed_component.html.erb

@@ -0,0 +1,17 @@
+<section id="feed_<%= kind %>" class="widget-feed feed-<%= kind %>">
+ <header>
+ <h2 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h2>
+ </header>
+
+ <% if feed.items.any? %>
+ <div class="feed-content">
+ <% feed.items.each do |item| %>
+ <%= render item_component_class.new(item) %>
+ <% end %>
+ </div>
+
+ <%= link_to t("welcome.feed.see_all.#{kind}"), see_all_path, class: "see-all" %>
+ <% else %>
+ <div class="no-items callout primary"><%= t("welcome.feed.no_items.#{kind}") %></div>
+ <% end %>
+</section>

app/components/widgets/feeds/feed_component.rb

@@ -0,0 +1,33 @@
+class Widgets::Feeds::FeedComponent < ApplicationComponent
+ attr_reader :feed
+ delegate :kind, to: :feed
+
+ def initialize(feed)
+ @feed = feed
+ end
+
+ def see_all_path
+ polymorphic_path(feed.items.model, filters)
+ end
+
+ private
+
+ def item_component_class
+ case kind
+ when "proposals"
+ Widgets::Feeds::ProposalComponent
+ when "debates"
+ Widgets::Feeds::DebateComponent
+ when "processes"
+ Widgets::Feeds::ProcessComponent
+ end
+ end
+
+ def filters
+ if feed.respond_to?(:goal) && kind != "processes"
+ { advanced_search: { goal: feed.goal.code }}
+ else
+ {}
+ end
+ end
+end

app/components/widgets/feeds/participation_component.html.erb

@@ -0,0 +1,7 @@
+<div class="row margin-bottom feeds-list feeds-participation">
+ <% feeds.each do |feed| %>
+ <% if feed_proposals?(feed) || feed_debates?(feed) %>
+ <%= render Widgets::Feeds::FeedComponent.new(feed) %>
+ <% end %>
+ <% end %>
+</div>

app/components/widgets/feeds/participation_component.rb

@@ -0,0 +1,17 @@
+class Widgets::Feeds::ParticipationComponent < ApplicationComponent
+ attr_reader :feeds
+
+ def initialize(feeds)
+ @feeds = feeds
+ end
+
+ private
+
+ def feed_debates?(feed)
+ feed.kind == "debates"
+ end
+
+ def feed_proposals?(feed)
+ feed.kind == "proposals"
+ end
+end

app/components/widgets/feeds/process_component.html.erb

@@ -0,0 +1,13 @@
+<div class="legislation-process card">
+ <%= link_to url_for(process) do %>
+ <figure class="figure-card">
+ <%= image_tag("welcome_process.png", alt: "") %>
+ <figcaption>
+ <span><%= t("welcome.feed.process_label") %></span><br>
+ <h3><%= process.title %></h3>
+ </figcaption>
+ </figure>
+ <p class="description small"><%= process.summary %></p>
+ <p class="small"><%= t("welcome.feed.see_process") %></p>
+ <% end %>
+</div>

app/components/widgets/feeds/process_component.rb

@@ -0,0 +1,7 @@
+class Widgets::Feeds::ProcessComponent < ApplicationComponent
+ attr_reader :process
+
+ def initialize(process)
+ @process = process
+ end
+end