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 3cb69cf0b85c0c8cc0a12940091f5e9cbdb5d3d2..58642dd55fd7b31bd4fbf41a6a12bbe20c9def8b 100644 (file)
--- 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 67f1c75a3bc3a21303c9e184e45de389fab1a956..713a1d6d4ecf5734c999f2df4786ef19a471b169 100644 (file)
--- 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 496589a08049daf944c75d78cf4998e508e24dd2..523cb84d6b7815b376b1f35150c05f6d92813be3 100644 (file)
--- 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>