Move close button out of left sidebar content

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index b79c3308888904bfb02b6457a6de7775e42c64fb..9220e12059c9edf5a24865d9585b470a5ba412a9 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -398,7 +398,7 @@ $(function () {
     }
   });
 
-  $(document).on("click", "#sidebar_content .btn-close", function () {
+  $(document).on("click", "#sidebar .sidebar-close-controls button", function () {
     OSM.router.route("/" + OSM.formatHash(map));
   });
 });

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 89888bbd10cf7fd1aeb61f766123ada69bc0737d..2d948d4b2eed3e80a6fd004a41c16b2e11911305 100644 (file)
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -294,7 +294,7 @@ OSM.Directions = function (map) {
   }
 
   function enableListeners() {
-    $("#sidebar_content").on("click", ".btn-close", hideRoute);
+    $("#sidebar .sidebar-close-controls button").on("click", hideRoute);
 
     $("#map").on("dragend dragover", function (e) {
       e.preventDefault();
@@ -350,7 +350,7 @@ OSM.Directions = function (map) {
     $(".search_form").show();
     $(".directions_form").hide();
 
-    $("#sidebar_content").off("click", ".btn-close", hideRoute);
+    $("#sidebar .sidebar-close-controls button").off("click", hideRoute);
     $("#map").off("dragend dragover drop");
     map.off("locationfound", sendstartinglocation);
 

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 27cfb465c5ba5180e4c2b6ad3d993db5eb190781..cbd6a94aafff9c0c5ea845ce3a40858968348ff7 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -351,6 +351,7 @@ body.small-nav {
       display: block;
     }
 
+    .sidebar-close-controls,
     #sidebar_loader,
     #sidebar_content {
       display: none;

diff --git a/app/views/application/_sidebar_header.html.erb b/app/views/application/_sidebar_header.html.erb
index 9e7877f8a41593c133cc7dd0c8e33b98bd3db688..d24a0c5fa9d9a5d6ef810e9fcaec0286e67b73a3 100644 (file)
--- a/app/views/application/_sidebar_header.html.erb
+++ b/app/views/application/_sidebar_header.html.erb
@@ -1,6 +1 @@
-<div class="d-flex">
-  <h2 class="flex-grow-1 text-break"><%= title %></h2>
-  <div>
-    <button type="button" class="btn-close" aria-label="<%= t("javascripts.close") %>"></button>
-  </div>
-</div>
+<h2 class="me-4 text-break"><%= title %></h2>

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index ecaca3d2c1d303123803ff3a299ea72d512fe386..0f97c206e628362368440155b0646d56ab2b6452 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -18,6 +18,12 @@
 
     <div id="browse_status"></div>
 
+    <div class="sidebar-close-controls">
+      <div class="position-absolute end-0 m-2">
+        <button type="button" class="btn-close d-block p-2" aria-label="<%= t("javascripts.close") %>"></button>
+      </div>
+    </div>
+
     <div id="sidebar_loader" class="my-3 text-center loader" hidden>
       <div class="spinner-border" role="status">
         <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>

diff --git a/test/system/directions_test.rb b/test/system/directions_test.rb
index 91a033c4d37f8e780d3f3dbfd59367a73b40e0af..a0ca87ce7150c19b66af1983c8529fb8ceaecb32 100644 (file)
--- a/test/system/directions_test.rb
+++ b/test/system/directions_test.rb
@@ -22,9 +22,7 @@ class DirectionsSystemTest < ApplicationSystemTestCase
       assert_content "Start popup text"
     end
 
-    within_sidebar do
-      find("button[aria-label='Close']").click
-    end
+    find("#sidebar .sidebar-close-controls button[aria-label='Close']").click
 
     within "#map" do
       assert_no_content "Start popup text"