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

@@ -29,6 +29,7 @@
 @import "jquery-ui/sortable";
 @import "leaflet";
 @import "sticky_overrides";
+@import "tags";
 @import "admin/*";
 @import "sdg/**/*";
 @import "sdg_management/*";

app/assets/stylesheets/mixins.scss

@@ -226,3 +226,13 @@
     }
   }
 }
+
+%tags {
+  margin-bottom: 0;
+  margin-left: 0;
+
+  li {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}

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;
+    @extend %tags;
-    margin-bottom: 0;
 
     a {
       margin-right: rem-calc(6);
@@ -673,8 +672,7 @@
   }
 
   .tags {
-    display: block;
+    @extend %tags;
-    margin-bottom: 0;
 
     a {
       font-size: $tiny-font-size;

app/assets/stylesheets/tags.scss

@@ -0,0 +1,6 @@
+ul {
+
+  &.tags {
+    @extend %tags;
+  }
+}

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>

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 %>

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>

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 %>