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