Make close buttons stick to the top of scrolled areas

diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 6c7de5da77582fc35975947ec7dcdd7e11270078..7408585f26adbd19dfd1f57d3d87fd49c16fab6e 100644 (file)
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/app/assets/javascripts/leaflet.sidebar-pane.js
@@ -18,7 +18,7 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
     button.appendTo($container);
 
     const $ui = $("<div>")
-      .attr("class", uiClass + "-ui");
+      .attr("class", `${uiClass}-ui position-relative z-n1`);
 
     $("<h2 class='p-3 pb-0 pe-5 text-break'>")
       .text(I18n.t(paneTitle))

diff --git a/app/views/layouts/_sidebar_close.html.erb b/app/views/layouts/_sidebar_close.html.erb
index 5c3773625eb5cda369674109dca5386a58ae67a2..6c9686a50e1e0fa0eb86f24bfc9c85a12da2ec73 100644 (file)
--- a/app/views/layouts/_sidebar_close.html.erb
+++ b/app/views/layouts/_sidebar_close.html.erb
@@ -1,5 +1,14 @@
-<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 class="sidebar-close-controls sticky-top z-0">
+  <div class="position-absolute end-0 m-2 rounded-5 bg-body-tertiary shadow-sm">
+    <button type="button" disabled class="btn-close d-block p-2 invisible"></button>
+  </div>
+</div>
+<div class="sidebar-close-controls sticky-top">
+  <div class="position-absolute end-0 m-2 rounded-5">
+    <button type="button" class="btn-close d-block p-2 rounded-5" aria-label="<%= t("javascripts.close") %>"></button>
+  </div>
+</div>
+<div class="sidebar-close-controls position-relative">
+  <div class="position-absolute end-0 bg-body p-4">
   </div>
 </div>

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index f65fde2c2581801a2d3233f3cba3f0df0dee56a3..62e979c05e48568c3868b461343da624f9988bb5 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -26,7 +26,7 @@
       </div>
     </div>
 
-    <div id="sidebar_content" class="p-3">
+    <div id="sidebar_content" class="p-3 position-relative z-n1">
       <%= yield %>
     </div>