From 300cd884ec5a8bd76be912f7d745e0ced7761175 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 15:52:59 +0000
Subject: [PATCH 1/1] 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
---
 app/assets/stylesheets/common.scss    |  2 --
 app/views/browse/_paging_nav.html.erb | 19 ++++++++++++++-----
 app/views/browse/changeset.html.erb   | 15 +++------------
 3 files changed, 17 insertions(+), 19 deletions(-)

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