From 0b84c0da01762cfab10e12aaa0e22f0929aba642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 28 Jan 2021 21:34:03 +0100
Subject: [PATCH] Improve margin rules in SDG icons

We were using the classic approach of adding a margin-right property to
all elements except the last one. This works great when all icons are
displayed in one row.

However, when they're displayed in several rows, there could be a
scenario where the last row has more elements:

element1 <margin> element2 <margin>
element3 <margin> element4 <margin> element5

In the example above, `element3` does not fit in the first row because
it's got a margin to its right. However, `element5` fits in the second
row because the last element has now right margin.

One option to fix this issue it using CSS `gap` property. However, at
the time of writing, it's only supported by 70% of the browsers.

So we're emulating the gap by giving a negative margin to the list
equivalent to the margin of the first element.

This idea is based on:

https://coryrylan.com/blog/css-gap-space-with-flexbox

The exception is the index page. Here the list of icons is centered with
`margin: auto`, and so we cannot use negative margins. We're using the
classic approach instead, which is fine because we define there are 6
icons per row.
---
 app/assets/stylesheets/mixins.scss          | 19 ++++++++++---------
 app/assets/stylesheets/sdg/goals/index.scss |  9 +++++----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 3cf7945ff..e54f735fd 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -227,23 +227,24 @@
   }
 }
 
-%sdg-goal-list {
+@mixin sdg-goal-list($spacing: 1ch) {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin-bottom: 0;
-  margin-left: 0;
+  margin: -$spacing 0 $line-height / 3 -#{$spacing};
+  width: calc(100% + #{$spacing});
 
   li {
-    margin-bottom: 1ch;
-    margin-right: 1ch;
-
-    &:last-child {
-      margin-right: 0;
-    }
+    margin-bottom: 0;
+    margin-left: $spacing;
+    margin-top: $spacing;
   }
 }
 
+%sdg-goal-list {
+  @include sdg-goal-list;
+}
+
 %tags {
   margin-bottom: 0;
   margin-left: 0;
diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index 82d8a5cd6..392b51c33 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -18,16 +18,17 @@
   }
 
   .sdg-goal-list {
-    @extend %sdg-goal-list;
+    $spacing: 1vw;
+
+    @include sdg-goal-list($spacing);
     @include grid-row;
     @include grid-column-gutter;
+
     max-width: 40rem;
+    width: 100%;
 
     li {
-      $spacing: 1vw;
-
       line-height: 0;
-      margin-bottom: $spacing;
       margin-left: $spacing / 2;
       margin-right: $spacing / 2;
       width: calc(100% / 6 - #{$spacing});