From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 19 Sep 2022 15:20:34 +0000 (+0300)
Subject: Group map controls
X-Git-Tag: live~1477^2~2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/7904b49bb13c23b8c8beb4f5bcf25fa12d8374dd

Group map controls
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 011f3b282..2bda933a9 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -104,38 +104,50 @@ $(document).ready(function () {
 
   var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
 
-  L.OSM.zoom({ position: position })
-    .addTo(map);
+  function addControlGroup(controls) {
+    controls.forEach(function (control) {
+      control.addTo(map);
+    });
 
-  L.OSM.locate({ position: position })
-    .addTo(map);
+    var lastContainer = controls[controls.length -1].getContainer();
+    $(lastContainer).addClass("leaflet-control-group-end");
+  }
 
-  L.OSM.layers({
-    position: position,
-    layers: map.baseLayers,
-    sidebar: sidebar
-  }).addTo(map);
-
-  L.OSM.key({
-    position: position,
-    sidebar: sidebar
-  }).addTo(map);
-
-  L.OSM.share({
-    "position": position,
-    "sidebar": sidebar,
-    "short": true
-  }).addTo(map);
-
-  L.OSM.note({
-    position: position,
-    sidebar: sidebar
-  }).addTo(map);
-
-  L.OSM.query({
-    position: position,
-    sidebar: sidebar
-  }).addTo(map);
+  addControlGroup([
+    L.OSM.zoom({ position: position }),
+    L.OSM.locate({ position: position })
+  ]);
+
+  addControlGroup([
+    L.OSM.layers({
+      position: position,
+      layers: map.baseLayers,
+      sidebar: sidebar
+    }),
+    L.OSM.key({
+      position: position,
+      sidebar: sidebar
+    }),
+    L.OSM.share({
+      "position": position,
+      "sidebar": sidebar,
+      "short": true
+    })
+  ]);
+
+  addControlGroup([
+    L.OSM.note({
+      position: position,
+      sidebar: sidebar
+    })
+  ]);
+
+  addControlGroup([
+    L.OSM.query({
+      position: position,
+      sidebar: sidebar
+    })
+  ]);
 
   L.control.scale()
     .addTo(map);
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d2ab3d272..1e638d47d 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -358,8 +358,6 @@ body.small-nav {
   width: 40px;
   background-color: #333;
   background-color: rgba(0,0,0,.6);
-  border-radius: 4px 0 0 4px;
-  margin-bottom: 10px;
   outline: none;
 
   &:hover,
@@ -383,21 +381,21 @@ body.small-nav {
   }
 }
 
-.leaflet-control .zoomin,
-.control-layers .control-button {
-  margin-bottom: 0px;
-  border-radius: 4px 0 0 0;
+.leaflet-control-group-end + .leaflet-control {
+  padding-top: 10px;
 }
 
-.leaflet-control .zoomout,
-.control-key .control-button {
-  margin-bottom: 0;
-  border-radius: 0;
+.leaflet-control:first-child,
+.leaflet-control-group-end + .leaflet-control {
+  &.control-button, .control-button:first-child {
+    border-start-start-radius: 4px;
+  }
 }
 
-.control-locate .control-button,
-.control-share .control-button {
-  border-radius: 0 0 0 4px;
+.leaflet-control-group-end {
+  &.control-button, .control-button:last-child {
+    border-end-start-radius: 4px;
+  }
 }
 
 /* Rules for the sidebar and main map area */