From d1ab8ac29bdc74cb9c3d210329f3dd43d1977367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 21 Jan 2021 13:51:23 +0100
Subject: [PATCH] Split li tags in link list helper

This way we generate the same HTML as we generate everywhere where we
manually generate lists of links. Having a blank space betwwen tags
results in a space being introduced when the elements are displayed
inline (or with `inline-block`).

So in places where we don't want that space between the elements we have
to use a flex layout.
---
 app/assets/stylesheets/mixins.scss             | 9 ++++++++-
 app/assets/stylesheets/sdg/goals/index.scss    | 6 +++---
 app/assets/stylesheets/sdg/goals/tag_list.scss | 8 --------
 app/helpers/link_list_helper.rb                | 2 +-
 spec/helpers/link_list_helper_spec.rb          | 4 +++-
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 3f133cc42..a7b82c049 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -228,12 +228,19 @@
 }
 
 %sdg-goal-list {
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
   margin-bottom: 0;
   margin-left: 0;
 
   li {
-    display: inline-block;
+    margin-bottom: 1ch;
+    margin-right: 1ch;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index 2faccff8b..1efb09297 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -11,9 +11,9 @@
 
       line-height: 0;
       margin-bottom: $spacing;
-      padding-left: $spacing / 2;
-      padding-right: $spacing / 2;
-      width: 1 * 100% / 6;
+      margin-left: $spacing / 2;
+      margin-right: $spacing / 2;
+      width: calc(100% / 6 - #{$spacing});
 
       .sdg-goal-icon {
         width: 100%;
diff --git a/app/assets/stylesheets/sdg/goals/tag_list.scss b/app/assets/stylesheets/sdg/goals/tag_list.scss
index 831cba49f..f2149ef53 100644
--- a/app/assets/stylesheets/sdg/goals/tag_list.scss
+++ b/app/assets/stylesheets/sdg/goals/tag_list.scss
@@ -1,11 +1,3 @@
 .sdg-goal-tag-list {
   @extend %sdg-goal-list;
-
-  li {
-    margin-bottom: 1ch;
-
-    &:not(:last-child) {
-      padding-right: 1ch;
-    }
-  }
 }
diff --git a/app/helpers/link_list_helper.rb b/app/helpers/link_list_helper.rb
index 5042d55c5..f3e00d1bb 100644
--- a/app/helpers/link_list_helper.rb
+++ b/app/helpers/link_list_helper.rb
@@ -7,7 +7,7 @@ module LinkListHelper
         tag.li(({ "aria-current": true } if current)) do
           link_to text, url, link_options
         end
-      end)
+      end, "\n")
     end
   end
 end
diff --git a/spec/helpers/link_list_helper_spec.rb b/spec/helpers/link_list_helper_spec.rb
index 8fd04f5ac..31ff73768 100644
--- a/spec/helpers/link_list_helper_spec.rb
+++ b/spec/helpers/link_list_helper_spec.rb
@@ -13,7 +13,9 @@ describe LinkListHelper do
     it "generates a list of links" do
       list = helper.link_list(["Home", "/"], ["Info", "/info"], class: "menu")
 
-      expect(list).to eq '<ul class="menu"><li><a href="/">Home</a></li><li><a href="/info">Info</a></li></ul>'
+      expect(list).to eq '<ul class="menu">' +
+        '<li><a href="/">Home</a></li>' + "\n" +
+        '<li><a href="/info">Info</a></li></ul>'
       expect(list).to be_html_safe
     end