Rework sidebar to use padding on the sidebar_content div

This saves every header, list, paragraph etc having to sort out their own padding. The couple of instances where we want edge-to-edge can be acheived using the negative margin spacing utilities.

The padding is based on $spacer so that it can be adjusted automatically via bootstrap configuration.

This also means that we can remove many (mis-)uses of the browse-section class, which is only supposed to be for cases where there are multiple browse-sections in sequence (e.g. multiple nodes in the node history browse pages).

app/views/application/_sidebar_header.html.erb

@@ -2,7 +2,7 @@
   <div class="flex-grow-1 text-break">
     <h2><%= title %></h2>
   </div>
-  <div class="px-3 py-3">
+  <div>
     <a class="geolink" href="<%= root_path %>">
       <span class="icon close"></span>
     </a>

app/views/browse/changeset.html.erb

@@ -2,7 +2,7 @@
 
 <%= render "sidebar_header", :title => t(".title", :id => @changeset.id) %>
 
-<div class="browse-section">
+<div>
   <p class="font-italic">
     <%= linkify(@changeset.tags["comment"].to_s.presence || t("browse.no_comment")) %>
   </p>

app/views/browse/new_note.html.erb

@@ -2,7 +2,7 @@
 
 <%= render "sidebar_header", :title => t("browse.note.new_note") %>
 
-<div class="note browse-section">
+<div class="note">
   <p class="alert alert-info"><%= t("javascripts.notes.new.intro") %></p>
   <form action="#">
     <input type="hidden" name="lon">

app/views/browse/not_found.html.erb

@@ -2,6 +2,6 @@
 
 <%= render "sidebar_header", :title => t(".title") %>
 
-<div class="browse-section">
+<div>
   <p><%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>
 </div>

app/views/browse/note.html.erb

@@ -2,7 +2,7 @@
 
 <%= render "sidebar_header", :title => t(".#{@note.status}_title", :note_name => @note.id) %>
 
-<div class="browse-section">
+<div>
   <h4><%= t(".description") %></h4>
   <div class="note-description">
     <%= h(@note_comments.first.body.to_html) %>

app/views/browse/query.html.erb

@@ -2,14 +2,14 @@
 
 <%= render "sidebar_header", :title => t(".title") %>
 
-<div class="query-intro">
+<div>
   <p><%= t(".introduction") %></p>
 </div>
 
 <div id="query-nearby" class="query-results">
   <h3><%= t(".nearby") %></h3>
   <%= image_tag "searching.gif", :class => "loader" %>
-  <div>
+  <div class="mx-n3">
     <ul class="query-results-list list-group list-group-flush"></ul>
   </div>
 </div>
@@ -17,7 +17,7 @@
 <div id="query-isin" class="query-results">
   <h3><%= t(".enclosing") %></h3>
   <%= image_tag "searching.gif", :class => "loader" %>
-  <div>
+  <div class="mx-n3">
     <ul class="query-results-list list-group list-group-flush"></ul>
   </div>
 </div>

app/views/browse/timeout.html.erb

@@ -2,6 +2,6 @@
 
 <%= render "sidebar_header", :title => t(".title") %>
 
-<div class="browse-section">
+<div>
   <p><%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>
 </div>

app/views/changesets/history.html.erb

@@ -13,6 +13,6 @@
 
 <%= render "sidebar_header", :title => @heading %>
 
-<div class="changesets">
+<div class="changesets mx-n3">
   <%= image_tag "searching.gif", :class => "loader" %>
 </div>

app/views/changesets/index.html.erb

@@ -9,9 +9,9 @@
   </div>
 <% end -%>
 <% elsif params[:bbox] %>
-  <div class="inner22"><%= t(params[:max_id] ? ".no_more_area" : ".empty_area") %></div>
+  <p><%= t(params[:max_id] ? ".no_more_area" : ".empty_area") %></p>
 <% elsif params[:display_name] %>
-  <div class="inner22"><%= t(params[:max_id] ? ".no_more_user" : ".empty_user") %></div>
+  <p><%= t(params[:max_id] ? ".no_more_user" : ".empty_user") %></p>
 <% else %>
-  <div class="inner22"><%= t(params[:max_id] ? ".no_more" : ".empty") %></div>
+  <p><%= t(params[:max_id] ? ".no_more" : ".empty") %></p>
 <% end %>

app/views/geocoder/search.html.erb

@@ -3,8 +3,8 @@
 <%= render "sidebar_header", :title => t("site.sidebar.search_results") %>
 
 <% @sources.each do |source| %>
-  <h4 class="inner12"><%= t(".title.#{source}_html") %></h4>
-  <div class="search_results_entry" data-href="<%= url_for @params.merge(:action => "search_#{source}") %>">
+  <h4><%= t(".title.#{source}_html") %></h4>
+  <div class="search_results_entry mx-n3" data-href="<%= url_for @params.merge(:action => "search_#{source}") %>">
     <%= image_tag "searching.gif", :class => "loader" %>
   </div>
 <% end %>

app/views/layouts/map.html.erb

@@ -39,9 +39,9 @@
     </div>
 
     <% unless current_user %>
-      <div class="welcome">
+      <div class="welcome p-3">
         <%= render "sidebar_header", :title => t("layouts.intro_header") %>
-        <div class="px-3 pb-3">
+        <div>
           <p><%= t "layouts.intro_text" %></p>
           <p><%= t "layouts.hosting_partners_html",
                    :ucl => link_to(t("layouts.partners_ucl"), "https://www.ucl.ac.uk"),

app/views/site/export.html.erb

@@ -30,11 +30,11 @@
     <div class="form-group d-flex">
       <%= submit_tag t(".export_button"), :class => "btn btn-primary mx-auto" %>
     </div>
-
-    <p><%= t ".too_large.advice" %></p>
   </div>
 
-  <dl class="inner12">
+  <p><%= t ".too_large.advice" %></p>
+
+  <dl class="px-3">
     <dt><a id="export_overpass" href="https://overpass-api.de/api/map?bbox="><%= t ".too_large.overpass.title" %></a></dt>
     <dd><%= t ".too_large.overpass.description" %></dd>