From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 8 Mar 2025 15:15:17 +0000 (+0300)
Subject: Move close button out of right sidebar content
X-Git-Tag: live~22^2~2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/0b207537de88852d05ddeb950695a7b2c9cc4871?ds=inline;hp=-c

Move close button out of right sidebar content
---

0b207537de88852d05ddeb950695a7b2c9cc4871
diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 06fad7b66..6c7de5da7 100644
--- 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 910da53f2..f16156b72 100644
--- 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 0f97c206e..66d773f7d 100644
--- 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 8352cdd1c..8bee528d3 100644
--- 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