Rework tabs to use flexbox

This improves the behaviour on small widths, where the tabs stack neatly. It also avoids the use of ml-auto which isn't RTL compatible.

The change in indentation is because it was previously coded with multiple li nested inside another li

diff --git a/app/views/traces/index.html.erb b/app/views/traces/index.html.erb
index fa4e57f4751d9d1217c4b1e57ca152547fa1ad74..026e85aed02a687c901f2842ab0bbcb78f7c7d5e 100644 (file)
--- a/app/views/traces/index.html.erb
+++ b/app/views/traces/index.html.erb
@@ -7,43 +7,42 @@
       <%= link_to t(".remove_tag_filter", :tag => params[:tag]), { :controller => "traces", :action => "index", :display_name => nil, :tag => nil, :page => nil }, { :class => "border-left ml-2 pl-2" } %>
     <% end %>
   </p>
-  <ul class="nav nav-tabs">
-    <li class="nav-item">
-      <% if @target_user.blank? %>
-        <!-- public traces -->
+  <ul class="nav nav-tabs flex-column flex-sm-row">
+    <% if @target_user.blank? %>
+      <!-- public traces -->
+      <li class="nav-item">
+        <%= link_to t(".all_traces"), { :controller => "traces", :action => "index", :display_name => nil, :page => nil }, { :class => "nav-link active" } %>
+      </li>
+      <% if current_user %>
         <li class="nav-item">
-          <%= link_to t(".all_traces"), { :controller => "traces", :action => "index", :display_name => nil, :page => nil }, { :class => "nav-link active" } %>
+          <%= link_to t(".my_traces"), { :action => "mine", :page => nil }, { :class => "nav-link" } %>
         </li>
-        <% if current_user %>
-          <li class="nav-item">
-            <%= link_to t(".my_traces"), { :action => "mine", :page => nil }, { :class => "nav-link" } %>
-          </li>
-        <% end %>
-      <% elsif current_user && current_user == @target_user %>
-        <li class="nav-item">
-          <%= link_to t(".all_traces"), { :controller => "traces", :action => "index", :display_name => nil, :page => nil }, { :class => "nav-link" } %>
-        </li>
-        <!-- my traces -->
-        <li class="nav-item">
-          <%= link_to t(".my_traces"), { :action => "mine", :page => nil }, { :class => "nav-link active" } %>
-        </li>
-      <% else %>
-        <!-- public_traces_from @target_user -->
-        <li class="nav-item">
-          <%= link_to t(".all_traces"), { :controller => "traces", :action => "index", :display_name => nil, :page => nil }, { :class => "nav-link" } %>
-        </li>
-        <% if current_user && current_user != @target_user %>
-          <li class="nav-item">
-            <%= link_to t(".my_traces"), { :action => "mine", :page => nil }, { :class => "nav-link" } %>
-          </li>
-        <% end %>
+      <% end %>
+    <% elsif current_user && current_user == @target_user %>
+      <li class="nav-item">
+        <%= link_to t(".all_traces"), { :controller => "traces", :action => "index", :display_name => nil, :page => nil }, { :class => "nav-link" } %>
+      </li>
+      <!-- my traces -->
+      <li class="nav-item">
+        <%= link_to t(".my_traces"), { :action => "mine", :page => nil }, { :class => "nav-link active" } %>
+      </li>
+    <% else %>
+      <!-- public_traces_from @target_user -->
+      <li class="nav-item">
+        <%= link_to t(".all_traces"), { :controller => "traces", :action => "index", :display_name => nil, :page => nil }, { :class => "nav-link" } %>
+      </li>
+      <% if current_user && current_user != @target_user %>
         <li class="nav-item">
-          <%= link_to t(".public_traces_from", :user => @target_user&.display_name), { :action => "mine", :page => nil }, { :class => "nav-link active" } %>
+          <%= link_to t(".my_traces"), { :action => "mine", :page => nil }, { :class => "nav-link" } %>
         </li>
       <% end %>
-    </li>
+      <li class="nav-item">
+        <%= link_to t(".public_traces_from", :user => @target_user&.display_name), { :action => "mine", :page => nil }, { :class => "nav-link active" } %>
+      </li>
+    <% end %>
 
-    <li class="nav-item ml-auto pt-1">
+    <li class="nav-item flex-sm-grow-1"><li>
+    <li class="nav-item pt-1">
       <%= link_to({ :action => :georss, :display_name => @target_user&.display_name, :tag => params[:tag] }, { :class => "btn btn-secondary btn-sm px-1 py-0" }) do %>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
           <path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z" />