Group map controls

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 })
+  function addControlGroup(controls) {
-    .addTo(map);
+    controls.forEach(function (control) {
+      control.addTo(map);
+    });
 
+    var lastContainer = controls[controls.length -1].getContainer();
+    $(lastContainer).addClass("leaflet-control-group-end");
+  }
+
+  addControlGroup([
+    L.OSM.zoom({ position: position }),
     L.OSM.locate({ position: position })
-    .addTo(map);
+  ]);
 
+  addControlGroup([
     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);
+    })
+  ]);
 
+  addControlGroup([
     L.OSM.note({
       position: position,
       sidebar: sidebar
-  }).addTo(map);
+    })
+  ]);
 
+  addControlGroup([
     L.OSM.query({
       position: position,
       sidebar: sidebar
-  }).addTo(map);
+    })
+  ]);
 
   L.control.scale()
     .addTo(map);

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,
+.leaflet-control-group-end + .leaflet-control {
-.control-layers .control-button {
+  padding-top: 10px;
-  margin-bottom: 0px;
-  border-radius: 4px 0 0 0;
 }
 
-.leaflet-control .zoomout,
+.leaflet-control:first-child,
-.control-key .control-button {
+.leaflet-control-group-end + .leaflet-control {
-  margin-bottom: 0;
+  &.control-button, .control-button:first-child {
-  border-radius: 0;
+    border-start-start-radius: 4px;
+  }
 }
 
-.control-locate .control-button,
+.leaflet-control-group-end {
-.control-share .control-button {
+  &.control-button, .control-button:last-child {
-  border-radius: 0 0 0 4px;
+    border-end-start-radius: 4px;
+  }
 }
 
 /* Rules for the sidebar and main map area */