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/assets/javascripts/index/browse.js

@@ -55,12 +55,12 @@ OSM.initializeBrowse = function (map) {
             .text(I18n.t("browse.start_rjs.load_data"))
             .prepend($("<span class='icon close'></span>").click(cancel)))
         .append(
-          $("<div class='inner12'>")
+          $("<div>")
             .append(
               $("<p class='alert alert-warning clearfix'></p>")
                 .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })))
             .append(
-              $("<input type='submit'>")
+              $("<input type='submit' class='btn btn-primary'>")
                 .val(I18n.t("browse.start_rjs.load_data"))
                 .click(add))));
   }

app/assets/javascripts/index/directions.js

@@ -256,7 +256,7 @@ OSM.Directions = function (map) {
 
       var html = "<h2><a class=\"geolink\" href=\"#\">" +
         "<span class=\"icon close\"></span></a>" + I18n.t("javascripts.directions.directions") +
-        "</h2><p id=\"routing_summary\">" +
+        "</h2><p>" +
         I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " +
         I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".";
       if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
@@ -264,7 +264,7 @@ OSM.Directions = function (map) {
           I18n.t("javascripts.directions.ascend") + ": " + Math.round(route.ascend) + "m. " +
           I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m.";
       }
-      html += "</p><table id=\"turnbyturn\" />";
+      html += "</p><table id=\"turnbyturn\" class=\"mb-3\"/>";
 
       $("#sidebar_content")
         .html(html);

app/assets/stylesheets/common.scss

@@ -362,6 +362,10 @@ body.compact-nav {
       display: none;
     }
 
+    #sidebar_content {
+      padding: $spacer;
+    }
+
     > div {
       position: relative;
       float: left;
@@ -370,7 +374,6 @@ body.compact-nav {
     }
 
     h2 {
-      padding: $lineheight $lineheight $lineheight/2;
       font-size: 1.5rem;
     }
 
@@ -676,6 +679,10 @@ body.compact-nav {
     margin-left: auto;
     margin-right: auto;
   }
+
+  > div {
+   padding: $spacer;
+  }
 }
 
 #sidebar {
@@ -739,13 +746,6 @@ header .search_forms,
 
 /* Rules for routing */
 
-#sidebar_content>table {
-    padding: 5px 20px 10px 15px;
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-}
-
 div.direction {
   background-image: image-url('routing-sprite.png');
   width: 20px;
@@ -756,10 +756,6 @@ div.direction {
 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
 }
 
-p#routing_summary {
-    padding: 0 $lineheight $lineheight/4;
-}
-
 td.instruction, td.distance {
     padding-top: $lineheight/5;
     padding-bottom: $lineheight/5;
@@ -821,7 +817,8 @@ tr.turn:hover {
 
 #sidebar_content {
   .browse-section {
-    padding: $lineheight/2 $lineheight;
+    padding-bottom: $spacer;
+    margin-bottom: $spacer;
     border-bottom: 1px solid $grey;
 
     h4:first-child {
@@ -942,17 +939,8 @@ tr.turn:hover {
     margin: 0 0 10px 10px;
   }
 
-  .query-intro p {
-    padding: $lineheight $lineheight $lineheight/2;
-  }
-
   .query-results {
     display: none;
-    padding-bottom: $lineheight/2;
-
-    h3 {
-      padding: 0 $lineheight;
-    }
 
     ul {
       li {
@@ -981,8 +969,6 @@ tr.turn:hover {
 /* Rules for export sidebar */
 
 .export_form {
-  padding: $lineheight;
-
   .export_area_inputs,
   .export_button {
     text-align: center;

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>
 

test/integration/user_changeset_comments_test.rb

@@ -11,7 +11,7 @@ class UserChangesetCommentsTest < ActionDispatch::IntegrationTest
     assert_select "div#content" do
       assert_select "div#sidebar" do
         assert_select "div#sidebar_content" do
-          assert_select "div.browse-section" do
+          assert_select "div" do
             assert_select "div.notice" do
               assert_select "a[href='/login?referer=%2Fchangeset%2F#{changeset.id}']", :text => I18n.t("browse.changeset.join_discussion"), :count => 1
             end
@@ -43,7 +43,7 @@ class UserChangesetCommentsTest < ActionDispatch::IntegrationTest
     assert_select "div#content" do
       assert_select "div#sidebar" do
         assert_select "div#sidebar_content" do
-          assert_select "div.browse-section" do
+          assert_select "div" do
             assert_select "form[action='#']" do
               assert_select "textarea[name=text]"
             end