cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix left/right sidebar resizing on mobile devices

Browse source
This commit is contained in:
Roman Deev 2025-01-19 14:31:52 +03:00
parent 5ca24de0d0
commit 8e1e1e4713
2 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/leaflet.map.js
View file

@ -347,15 +347,22 @@ L.OSM.Map = L.Map.extend({
},
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 ($("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")) {
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");

14
app/assets/javascripts/leaflet.sidebar.js
View file

@ -17,6 +17,8 @@ L.OSM.sidebar = function (selector) {
};
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
@ -27,18 +29,22 @@ L.OSM.sidebar = function (selector) {
.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 = $();
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 || $();
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 });
}
}