Move close button out of right sidebar content

diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 06fad7b66dfd4f44bc0c63fe6ae3fdf3ff304f29..6c7de5da77582fc35975947ec7dcdd7e11270078 100644 (file)
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/app/assets/javascripts/leaflet.sidebar-pane.js
@@ -20,14 +20,9 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
     const $ui = $("<div>")
       .attr("class", uiClass + "-ui");
 
-    $("<div class='d-flex p-3 pb-0'>")
-      .appendTo($ui)
-      .append($("<h2 class='flex-grow-1 text-break'>")
-        .text(I18n.t(paneTitle)))
-      .append($("<div>")
-        .append($("<button type='button' class='btn-close'>")
-          .attr("aria-label", I18n.t("javascripts.close"))
-          .bind("click", toggle)));
+    $("<h2 class='p-3 pb-0 pe-5 text-break'>")
+      .text(I18n.t(paneTitle))
+      .appendTo($ui);
 
     options.sidebar.addPane($ui);
 

diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index 910da53f20ca17d4ee685ca4fd9acaca74c7fb0c..f16156b72d0d83e44349990f46a49aa31e6faf4e 100644 (file)
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -59,5 +59,9 @@ L.OSM.sidebar = function (selector) {
       .addClass("active");
   };
 
+  sidebar.find(".sidebar-close-controls button").on("click", () => {
+    control.togglePane(current, currentButton);
+  });
+
   return control;
 };

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 0f97c206e628362368440155b0646d56ab2b6452..66d773f7db59bbeec4cc6e8dcac3f6fea4ab8642 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -62,6 +62,11 @@
   </noscript>
 
   <div id="map-ui" class="bg-body z-2">
+    <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>
 
   <div id="map" tabindex="2" class="bg-body-secondary z-0">

diff --git a/test/system/index_test.rb b/test/system/index_test.rb
index 8352cdd1c5ee7a010ecb645a88341d90796b3f83..8bee528d3c645550d953e329864e470c7155876f 100644 (file)
--- a/test/system/index_test.rb
+++ b/test/system/index_test.rb
@@ -16,7 +16,7 @@ class IndexTest < ApplicationSystemTestCase
     visit node_path(node)
     find(".icon.share").click
     assert_no_selector "#content.overlay-right-sidebar"
-    find(".share-ui .btn-close").click
+    find("#map-ui .btn-close").click
     assert_selector "#content.overlay-right-sidebar"
   end