Fix left/right sidebar resizing on mobile devices

diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index b101017219c12b64f19e522005fa19bdd291e4ba..1b92edf9945ae7f7b996f9cff7a454b1254979d7 100644 (file)
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -347,15 +347,22 @@ L.OSM.Map = L.Map.extend({
   },
 
   setSidebarOverlaid: function (overlaid) {
   },
 
   setSidebarOverlaid: function (overlaid) {

-    var sidebarWidth = 350;
+    var mediumDeviceWidth = window.getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-md");
+    var isMediumDevice = window.matchMedia(`(max-width: ${mediumDeviceWidth})`).matches;
+    var sidebarWidth = $("#sidebar").width();
+    var sidebarHeight = $("#sidebar").height();

     if (overlaid && !$("#content").hasClass("overlay-sidebar")) {
       $("#content").addClass("overlay-sidebar");
       this.invalidateSize({ pan: false });
     if (overlaid && !$("#content").hasClass("overlay-sidebar")) {
       $("#content").addClass("overlay-sidebar");
       this.invalidateSize({ pan: false });

-      if ($("html").attr("dir") !== "rtl") {
+      if (isMediumDevice) {
+        this.panBy([0, -sidebarHeight], { animate: false });
+      } else if ($("html").attr("dir") !== "rtl") {

         this.panBy([-sidebarWidth, 0], { animate: false });
       }
     } else if (!overlaid && $("#content").hasClass("overlay-sidebar")) {
         this.panBy([-sidebarWidth, 0], { animate: false });
       }
     } else if (!overlaid && $("#content").hasClass("overlay-sidebar")) {

-      if ($("html").attr("dir") !== "rtl") {
+      if (isMediumDevice) {
+        this.panBy([0, $("#map").height() / 2], { animate: false });
+      } else if ($("html").attr("dir") !== "rtl") {

         this.panBy([sidebarWidth, 0], { animate: false });
       }
       $("#content").removeClass("overlay-sidebar");
         this.panBy([sidebarWidth, 0], { animate: false });
       }
       $("#content").removeClass("overlay-sidebar");

diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index 9573c839d411c4a6eb5be8ebaed9d84a186cf8af..1c911a961856e4cfae4cf63816c196ef31bf877e 100644 (file)
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -17,6 +17,8 @@ L.OSM.sidebar = function (selector) {
   };
 
   control.togglePane = function (pane, button) {
   };
 
   control.togglePane = function (pane, button) {

+    var mediumDeviceWidth = window.getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-md");
+    var isMediumDevice = window.matchMedia(`(max-width: ${mediumDeviceWidth})`).matches;

     var paneWidth = 250;
 
     current
     var paneWidth = 250;
 
     current


@@ -27,18 +29,22 @@ L.OSM.sidebar = function (selector) {
       .removeClass("active");
 
     if (current === pane) {
       .removeClass("active");
 
     if (current === pane) {

-      if ($("html").attr("dir") === "rtl") {
-        map.panBy([-paneWidth, 0], { animate: false });
-      }

       $(sidebar).hide();
       $("#content").addClass("overlay-right-sidebar");
       current = currentButton = $();
       $(sidebar).hide();
       $("#content").addClass("overlay-right-sidebar");
       current = currentButton = $();

+      if (isMediumDevice) {
+        map.panBy([0, -$("#map").height() / 2], { animate: false });
+      } else if ($("html").attr("dir") === "rtl") {
+        map.panBy([-paneWidth, 0], { animate: false });
+      }

     } else {
       $(sidebar).show();
       $("#content").removeClass("overlay-right-sidebar");
       current = pane;
       currentButton = button || $();
     } else {
       $(sidebar).show();
       $("#content").removeClass("overlay-right-sidebar");
       current = pane;
       currentButton = button || $();

-      if ($("html").attr("dir") === "rtl") {
+      if (isMediumDevice) {
+        map.panBy([0, $("#map").height()], { animate: false });
+      } else if ($("html").attr("dir") === "rtl") {

         map.panBy([paneWidth, 0], { animate: false });
       }
     }
         map.panBy([paneWidth, 0], { animate: false });
       }
     }