From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 15:52:59 +0000 (+0000)
Subject: Use flex grid instead of floating to position changeset element paging nav
X-Git-Tag: live~2318^2~7
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/300cd884ec5a8bd76be912f7d745e0ced7761175?ds=inline

Use flex grid instead of floating to position changeset element paging nav

This works much better when either the heading or the paging is long.

The heading was moved into the partial to avoid repetitive grid definitions
---

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 3cb69cf0b..58642dd55 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -803,8 +803,6 @@ tr.turn:hover {
   }
 
   .paginate {
-    float: right;
-    padding: 1px 6px;
     border: 1px solid $lightgrey;
     border-radius: 3px;
   }
diff --git a/app/views/browse/_paging_nav.html.erb b/app/views/browse/_paging_nav.html.erb
index 67f1c75a3..713a1d6d4 100644
--- a/app/views/browse/_paging_nav.html.erb
+++ b/app/views/browse/_paging_nav.html.erb
@@ -1,5 +1,14 @@
-<% if pages.page_count > 1 %>
-  <span class="paginate">
-    <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
-  </span>
-<% end %>
+<div class="row">
+  <div class="col">
+    <h4><%= heading %></h4>
+  </div>
+  <% if pages.page_count > 1 %>
+    <div class="col-auto">
+      <h4>
+        <span class="paginate p-1">
+          <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
+        </span>
+      </h4>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 496589a08..523cb84d6 100644
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -86,10 +86,7 @@
   <% end %>
 
   <% unless @ways.empty? %>
-    <h4>
-      <%= type_and_paginated_count("way", @way_pages) %>
-      <%= render :partial => "paging_nav", :locals => { :pages => @way_pages, :page_param => "way_page" } %>
-    </h4>
+    <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("way", @way_pages), :pages => @way_pages, :page_param => "way_page" } %>
     <ul class="list-unstyled">
       <% @ways.each do |way| %>
         <li><%= link_to printable_name(way, :version => true), { :action => "way", :id => way.way_id.to_s }, { :class => link_class("way", way), :title => link_title(way) } %></li>
@@ -98,10 +95,7 @@
   <% end %>
 
   <% unless @relations.empty? %>
-    <h4>
-      <%= type_and_paginated_count("relation", @relation_pages) %>
-      <%= render :partial => "paging_nav", :locals => { :pages => @relation_pages, :page_param => "relation_page" } %>
-    </h4>
+    <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("relation", @relation_pages), :pages => @relation_pages, :page_param => "relation_page" } %>
     <ul class="list-unstyled">
       <% @relations.each do |relation| %>
         <li><%= link_to printable_name(relation, :version => true), { :action => "relation", :id => relation.relation_id.to_s }, { :class => link_class("relation", relation), :title => link_title(relation) } %></li>
@@ -110,10 +104,7 @@
   <% end %>
 
   <% unless @nodes.empty? %>
-    <h4>
-      <%= type_and_paginated_count("node", @node_pages) %>
-      <%= render :partial => "paging_nav", :locals => { :pages => @node_pages, :page_param => "node_page" } %>
-    </h4>
+    <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("node", @node_pages), :pages => @node_pages, :page_param => "node_page" } %>
     <ul class="list-unstyled">
       <% @nodes.each do |node| %>
         <li><%= link_to printable_name(node, :version => true), { :action => "node", :id => node.node_id.to_s }, { :class => link_class("node", node), :title => link_title(node), :rel => link_follow(node) } %></li>