Set borders and spacing for control groups directly in js

Previous stylesheet code is more complicated.

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2bda933a975e53f4171ee132b7a21cc854e30f50..6f3bb0c5016bfc1573c6a2d1b38c656befc6eba0 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -109,8 +109,14 @@ $(document).ready(function () {
       control.addTo(map);
     });
 
-    var lastContainer = controls[controls.length -1].getContainer();
-    $(lastContainer).addClass("leaflet-control-group-end");
+    var firstContainer = controls[0].getContainer();
+    $(firstContainer).find(".control-button").first()
+      .css("border-start-start-radius", "4px");
+
+    var lastContainer = controls[controls.length - 1].getContainer();
+    $(lastContainer).find(".control-button").last()
+      .css("margin-bottom", "10px")
+      .css("border-end-start-radius", "4px");
   }
 
   addControlGroup([

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1e638d47d5680888d3066574bf7ef3a2666554e2..f48387a595973c584df0fc397b937c238d9251cd 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -381,23 +381,6 @@ body.small-nav {
   }
 }
 
-.leaflet-control-group-end + .leaflet-control {
-  padding-top: 10px;
-}
-
-.leaflet-control:first-child,
-.leaflet-control-group-end + .leaflet-control {
-  &.control-button, .control-button:first-child {
-    border-start-start-radius: 4px;
-  }
-}
-
-.leaflet-control-group-end {
-  &.control-button, .control-button:last-child {
-    border-end-start-radius: 4px;
-  }
-}
-
 /* Rules for the sidebar and main map area */
 
 .map-layout {