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).

diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index 07ad64def19417bb117c5af89f5c03712cc4994d..b6a388d81676b6af2cb9d5695c2642359921f820 100644 (file)
--- a/app/assets/javascripts/index/browse.js
+++ b/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))));
   }

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 6fd02a57bd55a39efa7fddb9873359578e964d2d..5040e7f3ef0d404b449f9fe28895fbf40bbc480e 100644 (file)
--- a/app/assets/javascripts/index/directions.js
+++ b/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);

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 80e0d46fe99e0da1db1895c71a354ab63d109511..39f2f4670048a2d20613aac803c363a37e386245 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/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;

diff --git a/app/views/application/_sidebar_header.html.erb b/app/views/application/_sidebar_header.html.erb
index 5413b4205df1c4bb6584cb1ac9cfe3cb036c3a70..da1f6bf45644e1d45352ca17e6ff6f789e2932f4 100644 (file)
--- a/app/views/application/_sidebar_header.html.erb
+++ b/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>

diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 079915fcf1f48187023d729c690b3ac83102648b..9ede3df324351b9a82c69220565fe3c3f17c48be 100644 (file)
--- a/app/views/browse/changeset.html.erb
+++ b/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>

diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb
index 1786c260f4701e65826c16f23efba95b7ab2a14a..a9937c4bc7d8c9c74b93d90a1c85c2da6c5fcddd 100644 (file)
--- a/app/views/browse/new_note.html.erb
+++ b/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">

diff --git a/app/views/browse/not_found.html.erb b/app/views/browse/not_found.html.erb
index 084c247dcfe3e8bf8a657be3a5fa6aa002ef840b..36ee4c883769ee3b28da09693c025bb499ffb7a5 100644 (file)
--- a/app/views/browse/not_found.html.erb
+++ b/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>

diff --git a/app/views/browse/note.html.erb b/app/views/browse/note.html.erb
index 6dcd46e76435fa76d37f4d8f8171491b4c63ab74..0180e26cad8d84103558354ee9a76f1163823116 100644 (file)
--- a/app/views/browse/note.html.erb
+++ b/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) %>

diff --git a/app/views/browse/query.html.erb b/app/views/browse/query.html.erb
index 65231641c939ab2572d7722616a6f7f724142a0e..53eca97477b424b0e98a1829f81f36aff60d73a3 100644 (file)
--- a/app/views/browse/query.html.erb
+++ b/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>

diff --git a/app/views/browse/timeout.html.erb b/app/views/browse/timeout.html.erb
index 084c247dcfe3e8bf8a657be3a5fa6aa002ef840b..36ee4c883769ee3b28da09693c025bb499ffb7a5 100644 (file)
--- a/app/views/browse/timeout.html.erb
+++ b/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>

diff --git a/app/views/changesets/history.html.erb b/app/views/changesets/history.html.erb
index cb80787a7a6fa36a3f290734c05b562a5551ec79..b601057f6f1280ba780a15bb67271268e77cd51b 100644 (file)
--- a/app/views/changesets/history.html.erb
+++ b/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>

diff --git a/app/views/changesets/index.html.erb b/app/views/changesets/index.html.erb
index e9e620062de20342323056675cf27f4317e7fa91..3ead2abdaed529b60da4a8a5d34d2ceec9270cc3 100644 (file)
--- a/app/views/changesets/index.html.erb
+++ b/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 %>

diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb
index 9f19be48a7922f955f2e9618497abd27c828c075..8502227de49c60a0d5ca4a97ad80ab159ee43292 100644 (file)
--- a/app/views/geocoder/search.html.erb
+++ b/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 %>

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 0403bc889634ebf25a43467ee0cefd06e6f12010..7a0ca0ed714c3bde95ade620844d7dfee23d97f9 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/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"),

diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index d6db3908b73c0816eb4fd0a7f0b2f9dd9245045a..9cbee91daaed2b677467d9570cbe66a63e3ead26 100644 (file)
--- a/app/views/site/export.html.erb
+++ b/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>
 

diff --git a/test/integration/user_changeset_comments_test.rb b/test/integration/user_changeset_comments_test.rb
index 2483f1543293ab5346eac636431f7bfa787a1ea7..a9bd468cead1b1ec6bbcba7ed6ac6c7bbff2de6b 100644 (file)
--- a/test/integration/user_changeset_comments_test.rb
+++ b/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