From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Mar 2021 18:57:36 +0000 (+0000)
Subject: Use list-inline to achieve spacing between elements on a line
X-Git-Tag: live~2166^2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/a08fe1c2915722e70a695db244479c60157dd2b3

Use list-inline to achieve spacing between elements on a line

This is a better solution than spans and margins. Additionally, rework
to use mb-* instead of my-* (bootstrap advises against using margin-top)
and get rid of <br>s by using paragraphs instead.
---

diff --git a/app/views/traces/_trace.html.erb b/app/views/traces/_trace.html.erb
index b7325dc54..7dc20c203 100644
--- a/app/views/traces/_trace.html.erb
+++ b/app/views/traces/_trace.html.erb
@@ -9,24 +9,26 @@
     <% end %>
   </td>
   <td>
-    <span class="mr-2">
-      <%= link_to trace.name, :controller => "traces", :action => "show", :display_name => trace.user.display_name, :id => trace.id %>
-    </span>
+    <ul class="list-inline mb-0">
+      <li class="list-inline-item">
+        <%= link_to trace.name, :controller => "traces", :action => "show", :display_name => trace.user.display_name, :id => trace.id %>
+      </li>
 
-    <% if trace.inserted? %>
-      <span class="mr-2">
-        <%= t ".count_points", :count => trace.size %>
-      </span>
-    <% end %>
-
-    <% badge_class = case trace.visibility
-                     when "public", "identifiable" then "success"
-                     else "danger"
-                     end %>
-    <span class="badge badge-<%= badge_class %> text-white"><%= t(".#{trace.visibility}") %></span>
+      <% if trace.inserted? %>
+        <li class="list-inline-item">
+          <%= t ".count_points", :count => trace.size %>
+        </li>
+      <% end %>
 
-    <br />
-    <span class="text-muted">
+      <li class="list-inline-item">
+        <% badge_class = case trace.visibility
+                         when "public", "identifiable" then "success"
+                         else "danger"
+                         end %>
+        <span class="badge badge-<%= badge_class %> text-white"><%= t(".#{trace.visibility}") %></span>
+      </li>
+    </ul>
+    <p class="text-muted mb-0">
       <span title="<%= trace.timestamp %>">
         <%= time_ago_in_words(trace.timestamp, :scope => :'datetime.distance_in_words_ago') %>
       </span>
@@ -35,9 +37,8 @@
         <%= t ".in" %>
         <%= safe_join(trace.tags.collect { |tag| link_to_tag tag.tag }, ", ") %>
       <% end %>
-    </span>
-    <br />
-    <p class="font-italic my-1">
+    </p>
+    <p class="font-italic mb-0">
       <%= trace.description %>
     </p>
   </td>
diff --git a/test/controllers/traces_controller_test.rb b/test/controllers/traces_controller_test.rb
index 16a4741a0..39a72568f 100644
--- a/test/controllers/traces_controller_test.rb
+++ b/test/controllers/traces_controller_test.rb
@@ -768,7 +768,7 @@ class TracesControllerTest < ActionDispatch::IntegrationTest
         assert_select "tr", :count => traces.length do |rows|
           traces.zip(rows).each do |trace, row|
             assert_select row, "a", Regexp.new(Regexp.escape(trace.name))
-            assert_select row, "span", Regexp.new(Regexp.escape("#{trace.size} points")) if trace.inserted?
+            assert_select row, "li", Regexp.new(Regexp.escape("#{trace.size} points")) if trace.inserted?
             assert_select row, "td", Regexp.new(Regexp.escape(trace.description))
             assert_select row, "td", Regexp.new(Regexp.escape("by #{trace.user.display_name}"))
           end