From 6acb032d4c5ab6e891a773d4a89dfc53725f9d86 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 19 Sep 2022 18:50:04 +0300
Subject: [PATCH] Set borders and spacing for control groups directly in js

Previous stylesheet code is more complicated.
---
 app/assets/javascripts/index.js    | 10 ++++++++--
 app/assets/stylesheets/common.scss | 17 -----------------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2bda933a9..6f3bb0c50 100644
--- 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 1e638d47d..f48387a59 100644
--- 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 {
-- 
2.45.1