From 0d3c4c81546b79f446e468d91fdda486da002138 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 21 Jan 2021 01:46:06 +0100
Subject: [PATCH] Simplify styling tags

This way we won't have to add the `inline-block` and `no-bullet` classes
to other elements and we can define the styles in one place.

Note we're using the `ul.tags` selector instead of just `.tags` to avoid
conflicts with a `div.tags` selector which is used to select tags in a
form. Renaming the selector to `.tag-list` would be better, but we
aren't doing so because it would break custom stylesheets using that
selector.

Also note we're keeping the %tags placeholder selector in `.tags`
selector in the participation.scss file. This is so styles are not
overwritten by selectors like `.debate-show ul li`, which has the same
specifity as `ul.tags li`.
---
 app/assets/stylesheets/application.scss   |  1 +
 app/assets/stylesheets/mixins.scss        | 10 ++++++++++
 app/assets/stylesheets/participation.scss |  8 +++-----
 app/assets/stylesheets/tags.scss          |  6 ++++++
 app/views/polls/_poll_group.html.erb      |  4 ++--
 app/views/polls/_poll_header.html.erb     |  4 ++--
 app/views/shared/_tags.html.erb           |  6 +++---
 app/views/users/_interests.html.erb       |  4 ++--
 8 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/stylesheets/tags.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0b899e516..ffb1517de 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -29,6 +29,7 @@
 @import "jquery-ui/sortable";
 @import "leaflet";
 @import "sticky_overrides";
+@import "tags";
 @import "admin/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 906c0bc3f..ee6aef106 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -226,3 +226,13 @@
     }
   }
 }
+
+%tags {
+  margin-bottom: 0;
+  margin-left: 0;
+
+  li {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index a825c77bb..5290d20c8 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -408,10 +408,10 @@
     }
   }
 
-  .tags,
   .geozone {
 
     li {
+      display: inline-block;
       margin-bottom: 0;
     }
   }
@@ -487,8 +487,7 @@
   }
 
   .tags {
-    display: block;
-    margin-bottom: 0;
+    @extend %tags;
 
     a {
       margin-right: rem-calc(6);
@@ -673,8 +672,7 @@
   }
 
   .tags {
-    display: block;
-    margin-bottom: 0;
+    @extend %tags;
 
     a {
       font-size: $tiny-font-size;
diff --git a/app/assets/stylesheets/tags.scss b/app/assets/stylesheets/tags.scss
new file mode 100644
index 000000000..b572da7a3
--- /dev/null
+++ b/app/assets/stylesheets/tags.scss
@@ -0,0 +1,6 @@
+ul {
+
+  &.tags {
+    @extend %tags;
+  }
+}
diff --git a/app/views/polls/_poll_group.html.erb b/app/views/polls/_poll_group.html.erb
index 95b1660aa..16da5efaa 100644
--- a/app/views/polls/_poll_group.html.erb
+++ b/app/views/polls/_poll_group.html.erb
@@ -47,9 +47,9 @@
             <small><%= t("polls.index.geozone_info") %></small>
           </p>
         <% end %>
-        <ul class="no-bullet inline-block tags">
+        <ul class="tags">
           <% poll.geozones.each do |g| %>
-            <li class="inline-block"><span><%= g.name %></span></li>
+            <li><span><%= g.name %></span></li>
           <% end %>
         </ul>
       </div>
diff --git a/app/views/polls/_poll_header.html.erb b/app/views/polls/_poll_header.html.erb
index b94d03e39..32008cb8e 100644
--- a/app/views/polls/_poll_header.html.erb
+++ b/app/views/polls/_poll_header.html.erb
@@ -12,9 +12,9 @@
       <%= auto_link_already_sanitized_html simple_format(@poll.summary) %>
 
       <% if @poll.geozones.any? %>
-        <ul class="no-bullet margin-top tags">
+        <ul class="margin-top tags">
           <% @poll.geozones.each do |g| %>
-            <li class="inline-block"><span><%= g.name %></span></li>
+            <li><span><%= g.name %></span></li>
           <% end %>
         </ul>
       <% end %>
diff --git a/app/views/shared/_tags.html.erb b/app/views/shared/_tags.html.erb
index 679bbdbf1..077efa5ae 100644
--- a/app/views/shared/_tags.html.erb
+++ b/app/views/shared/_tags.html.erb
@@ -1,15 +1,15 @@
 <%- limit ||= nil %>
 
 <% if taggable.tags.any? %>
-  <ul id="tags_<%= dom_id(taggable) %>" class="no-bullet tags">
+  <ul id="tags_<%= dom_id(taggable) %>" class="tags">
     <% taggable.tag_list_with_limit(limit).each do |tag| %>
-      <li class="inline-block">
+      <li>
         <%= link_to sanitize(tag.name),
                     polymorphic_path(taggable.class, search: tag.name) %></li>
     <% end %>
 
     <% if taggable.tags_count_out_of_limit(limit) > 0 %>
-      <li class="inline-block">
+      <li>
         <%= link_to "#{taggable.tags_count_out_of_limit(limit)}+",
                     polymorphic_path(taggable) %>
       </li>
diff --git a/app/views/users/_interests.html.erb b/app/views/users/_interests.html.erb
index 3b830e1ac..121072423 100644
--- a/app/views/users/_interests.html.erb
+++ b/app/views/users/_interests.html.erb
@@ -2,9 +2,9 @@
   <h4><%= interests_title_text(user) %></h4>
 
   <% if user.interests.any? %>
-    <ul class="no-bullet tags">
+    <ul class="tags">
       <% user.interests.each do |interest| %>
-        <li class="inline-block"><span><%= interest %></span></li>
+        <li><span><%= interest %></span></li>
       <% end %>
     </ul>
   <% end %>