From 2d11af4de0572f6d77e277bd5c5436f67c14fdf4 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 31 May 2025 02:28:43 +0300
Subject: [PATCH] Don't use <ul> for overlay layer checkboxes

<ul> is a little inconvenient because checkboxes are placed in the margin of the list, outside of list items. Hovering over the checkboxes doesn't mean hovering over list items in this case.
---
 app/assets/javascripts/leaflet.layers.js | 12 +++++-------
 app/assets/stylesheets/common.scss       |  2 +-
 test/system/site_test.rb                 | 10 +++++-----
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 863a70f32..82f477973 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -85,12 +85,10 @@ L.OSM.layers = function (options) {
         .attr("class", "text-body-secondary small mb-2")
         .appendTo(overlaySection);
 
-      const overlays = $("<ul class='list-unstyled form-check'>")
-        .appendTo(overlaySection);
-
       const addOverlay = function (layer, name, maxArea) {
-        const item = $("<li>")
-          .appendTo(overlays);
+        const item = $("<div>")
+          .attr("class", "form-check")
+          .appendTo(overlaySection);
 
         if (name === "notes" || name === "data") {
           item
@@ -111,7 +109,7 @@ L.OSM.layers = function (options) {
           .prop("checked", checked)
           .appendTo(label);
 
-        label.append(OSM.i18n.t("javascripts.map.layers." + name));
+        label.append(" ", OSM.i18n.t("javascripts.map.layers." + name));
 
         input.on("change", function () {
           checked = input.is(":checked");
@@ -145,7 +143,7 @@ L.OSM.layers = function (options) {
           }
 
           $(item)
-            .attr("class", disabled ? "disabled" : "")
+            .toggleClass("disabled", disabled)
             .tooltip(disabled ? "enable" : "disable");
         });
       };
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index e69bd260c..e972c4a07 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -416,7 +416,7 @@ body.small-nav {
   }
 
   .overlay-layers {
-    li.disabled { color: $darkgrey; }
+    .form-check.disabled { color: $darkgrey; }
   }
 }
 
diff --git a/test/system/site_test.rb b/test/system/site_test.rb
index 911fe36f9..3ae9816f8 100644
--- a/test/system/site_test.rb
+++ b/test/system/site_test.rb
@@ -83,14 +83,14 @@ class SiteTest < ApplicationSystemTestCase
     visit "/#map=10/40/-4" # depends on zoom levels where notes are allowed
 
     find(".control-layers .control-button").click
-    li = find(".layers-ui .overlay-layers li:first-child")
-    assert_not_matches_css li, ".disabled"
-    li.hover # try to trigger disabled tooltip
+    notes_checkbox = find(".layers-ui .overlay-layers .form-check", :text => "Map Notes")
+    assert_not_matches_css notes_checkbox, ".disabled"
+    notes_checkbox.hover # try to trigger disabled tooltip
     zoomout = find(".control-button.zoomout")
     zoomout.hover # un-hover the tooltip that's being tested
     zoomout.click(:shift)
-    assert_matches_css li, ".disabled"
-    li.hover
+    assert_matches_css notes_checkbox, ".disabled"
+    notes_checkbox.hover
     assert_selector ".tooltip", :text => "Zoom in"
   end
 end
-- 
2.39.5