Merge remote-tracking branch 'upstream/pull/5778'

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));
   });
 });

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

app/assets/javascripts/leaflet.sidebar-pane.js

@@ -18,16 +18,11 @@ 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`);
 
-    $("<div class='d-flex p-3 pb-0'>")
+    $("<h2 class='p-3 pb-0 pe-5 text-break'>")
-      .appendTo($ui)
+      .text(I18n.t(paneTitle))
-      .append($("<h2 class='flex-grow-1 text-break'>")
+      .appendTo($ui);
-        .text(I18n.t(paneTitle)))
-      .append($("<div>")
-        .append($("<button type='button' class='btn-close'>")
-          .attr("aria-label", I18n.t("javascripts.close"))
-          .bind("click", toggle)));
 
     options.sidebar.addPane($ui);
 

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;
 };

app/assets/stylesheets/common.scss

@@ -351,6 +351,7 @@ body.small-nav {
       display: block;
     }
 
+    .sidebar-close-controls,
     #sidebar_loader,
     #sidebar_content {
       display: none;

app/views/application/_sidebar_header.html.erb

@@ -1,6 +1 @@
-<div class="d-flex">
+<h2 class="me-4 text-break"><%= title %></h2>
-  <h2 class="flex-grow-1 text-break"><%= title %></h2>
-  <div>
-    <button type="button" class="btn-close" aria-label="<%= t("javascripts.close") %>"></button>
-  </div>
-</div>

app/views/layouts/_sidebar_close.html.erb

@@ -0,0 +1,14 @@
+<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>

app/views/layouts/map.html.erb

@@ -18,19 +18,22 @@
 
     <div id="browse_status"></div>
 
+    <%= render :partial => "layouts/sidebar_close" %>
+
     <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>
       </div>
     </div>
 
-    <div id="sidebar_content" class="p-3">
+    <div id="sidebar_content" class="p-3 position-relative z-n1">
       <%= yield %>
     </div>
 
     <% unless current_user %>
-      <div class="welcome p-3" hidden>
+      <div class="welcome position-relative p-3" hidden>
-        <%= render "sidebar_header", :title => t("layouts.intro_header") %>
+        <button type="button" class="btn-close position-absolute end-0 top-0 m-2 rounded-5 p-2" aria-label="<%= t("javascripts.close") %>"></button>
+        <h2 class="me-4 text-break"><%= t "layouts.intro_header" %></h2>
         <p class="fs-6 fw-light"><%= t "layouts.intro_text" %></p>
         <p class="fs-6 fw-light"><%= t "layouts.hosting_partners_2024_html",
                                        :fastly => link_to(t("layouts.partners_fastly"), "https://www.fastly.com/"),
@@ -55,6 +58,7 @@
   </noscript>
 
   <div id="map-ui" class="bg-body z-2">
+    <%= render :partial => "layouts/sidebar_close" %>
   </div>
 
   <div id="map" tabindex="2" class="bg-body-secondary z-0">

test/system/directions_test.rb

@@ -22,9 +22,7 @@ class DirectionsSystemTest < ApplicationSystemTestCase
       assert_content "Start popup text"
     end
 
-    within_sidebar do
+    find("#sidebar .sidebar-close-controls button[aria-label='Close']").click
-      find("button[aria-label='Close']").click
-    end
 
     within "#map" do
       assert_no_content "Start popup text"

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