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

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/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 06fad7b66dfd4f44bc0c63fe6ae3fdf3ff304f29..7408585f26adbd19dfd1f57d3d87fd49c16fab6e 100644 (file)
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/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");
-
-    $("<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)));
+      .attr("class", `${uiClass}-ui position-relative z-n1`);
+
+    $("<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/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/_sidebar_close.html.erb b/app/views/layouts/_sidebar_close.html.erb
new file mode 100644 (file)
index 0000000..6c9686a
--- /dev/null
+++ b/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>

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index eeb6d7472d92ba8edce37b949427745d42d6f28b..62e979c05e48568c3868b461343da624f9988bb5 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/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>
-        <%= render "sidebar_header", :title => t("layouts.intro_header") %>
+      <div class="welcome position-relative p-3" hidden>
+        <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">

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"

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