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

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