From cabee400321555597cfa3b8a348d702ee758d530 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Tue, 5 Sep 2023 11:50:58 +0300
Subject: [PATCH 1/8] Mute hidden comment text in each table cell

---
 app/views/diary_entries/comments.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/diary_entries/comments.html.erb b/app/views/diary_entries/comments.html.erb
index e3a7ff23e..0d6ddfb01 100644
--- a/app/views/diary_entries/comments.html.erb
+++ b/app/views/diary_entries/comments.html.erb
@@ -16,10 +16,10 @@
       </tr>
     </thead>
     <% @comments.each do |comment| -%>
-    <tr class="<%= "text-muted" unless comment.visible? %>">
-      <td width="25%"><%= link_to comment.diary_entry.title, diary_entry_path(comment.diary_entry.user, comment.diary_entry) %></td>
-      <td width="25%"><span title="<%= l comment.created_at, :format => :friendly %>"><%= time_ago_in_words(comment.created_at, :scope => :"datetime.distance_in_words_ago") %></span></td>
-      <td width="50%" class="richtext text-break"><%= comment.body.to_html %></td>
+    <tr>
+      <td width="25%" class="<%= "text-muted" unless comment.visible? %>"><%= link_to comment.diary_entry.title, diary_entry_path(comment.diary_entry.user, comment.diary_entry) %></td>
+      <td width="25%" class="<%= "text-muted" unless comment.visible? %>"><span title="<%= l comment.created_at, :format => :friendly %>"><%= time_ago_in_words(comment.created_at, :scope => :"datetime.distance_in_words_ago") %></span></td>
+      <td width="50%" class="richtext text-break<%= " text-muted" unless comment.visible? %>"><%= comment.body.to_html %></td>
     </tr>
     <% end -%>
   </table>

From 0ea6646fb6d86b11c78bc554168b76096fe21821 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 15:31:49 +0100
Subject: [PATCH 2/8] Use bootstrap for share forms

This fixes alignment of the checkboxes, and uses bootstrap form
controls for the image format and scale inputs.

Move the custom dimensions input to beside the custom dimensions
display.
---
 app/assets/javascripts/leaflet.share.js | 99 ++++++++++++++-----------
 app/assets/stylesheets/common.scss      |  9 +--
 2 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 7b1c995c2..c72760c97 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -23,17 +23,15 @@ L.OSM.share = function (options) {
     $("<div>")
       .attr("class", "form-check mb-3")
       .appendTo($form)
-      .append(
-        $("<label>")
-          .attr("for", "link_marker")
-          .attr("class", "form-check-label")
-          .append(
-            $("<input>")
-              .attr("id", "link_marker")
-              .attr("type", "checkbox")
-              .attr("class", "form-check-input")
-              .bind("change", toggleMarker))
-          .append(I18n.t("javascripts.share.include_marker")));
+      .append($("<label>")
+        .attr("for", "link_marker")
+        .attr("class", "form-check-label")
+        .text(I18n.t("javascripts.share.include_marker")))
+      .append($("<input>")
+        .attr("id", "link_marker")
+        .attr("type", "checkbox")
+        .attr("class", "form-check-input")
+        .bind("change", toggleMarker));
 
     $("<div class='btn-group btn-group-sm mb-2'>")
       .appendTo($form)
@@ -132,45 +130,60 @@ L.OSM.share = function (options) {
       .appendTo($imageSection);
 
     $("<div>")
-      .attr("class", "mb-3 form-check")
       .appendTo($form)
-      .append(
-        $("<label>")
-          .attr("for", "image_filter")
-          .attr("class", "form-check-label")
-          .append(
-            $("<input>")
-              .attr("id", "image_filter")
-              .attr("type", "checkbox")
-              .attr("class", "form-check-input")
-              .bind("change", toggleFilter))
-          .append(I18n.t("javascripts.share.custom_dimensions")));
-
-    $("<div>")
-      .appendTo($form)
-      .append(
-        $("<label>")
-          .attr("for", "mapnik_format")
-          .text(I18n.t("javascripts.share.format")))
-      .append($("<select>")
-        .attr("name", "mapnik_format")
-        .attr("id", "mapnik_format")
-        .append($("<option>").val("png").text("PNG").prop("selected", true))
-        .append($("<option>").val("jpeg").text("JPEG"))
-        .append($("<option>").val("svg").text("SVG"))
-        .append($("<option>").val("pdf").text("PDF")));
+      .attr("class", "row mb-3")
+      .append($("<label>")
+        .attr("for", "mapnik_format")
+        .attr("class", "col-auto col-form-label")
+        .text(I18n.t("javascripts.share.format")))
+      .append($("<div>")
+        .attr("class", "col-auto")
+        .append($("<select>")
+          .attr("name", "mapnik_format")
+          .attr("id", "mapnik_format")
+          .attr("class", "form-select w-auto")
+          .append($("<option>").val("png").text("PNG").prop("selected", true))
+          .append($("<option>").val("jpeg").text("JPEG"))
+          .append($("<option>").val("svg").text("SVG"))
+          .append($("<option>").val("pdf").text("PDF"))));
 
     $("<div>")
       .appendTo($form)
+      .attr("class", "row mb-3")
       .append($("<label>")
         .attr("for", "mapnik_scale")
+        .attr("class", "col-auto col-form-label")
         .text(I18n.t("javascripts.share.scale")))
-      .append("1 : ")
-      .append($("<input>")
-        .attr("name", "mapnik_scale")
-        .attr("id", "mapnik_scale")
-        .attr("type", "text")
-        .on("change", update));
+      .append($("<div>")
+        .attr("class", "col-auto")
+        .append($("<div>")
+          .attr("class", "input-group flex-nowrap")
+          .append($("<span>")
+            .attr("class", "input-group-text")
+            .text("1 : "))
+          .append($("<input>")
+            .attr("name", "mapnik_scale")
+            .attr("id", "mapnik_scale")
+            .attr("type", "text")
+            .attr("class", "form-control")
+            .on("change", update))));
+
+    $("<div>")
+      .attr("class", "row mb-3")
+      .appendTo($form)
+      .append($("<div>")
+        .attr("class", "col-auto")
+        .append($("<div>")
+          .attr("class", "form-check")
+          .append($("<label>")
+            .attr("for", "image_filter")
+            .attr("class", "form-check-label")
+            .text(I18n.t("javascripts.share.custom_dimensions")))
+          .append($("<input>")
+            .attr("id", "image_filter")
+            .attr("type", "checkbox")
+            .attr("class", "form-check-input")
+            .bind("change", toggleFilter))));
 
     ["minlon", "minlat", "maxlon", "maxlat"].forEach(function (name) {
       $("<input>")
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 60a4bd59c..f2c06052a 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -583,12 +583,6 @@ body.small-nav {
     }
   }
 
-  .share-image {
-    label {
-      margin-right: 10px;
-    }
-  }
-
   #mapnik_scale {
     width: 100px;
   }
@@ -647,6 +641,9 @@ form {
   label {
     font-size: 16px;
   }
+  .col-form-label {
+    font-size: 16px;
+  }
 }
 
 /* Stop bootstrap 5 from floating legends when they don't need to be */

From dc24f6c2195c6053efd43778d53ae68984e54107 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 15:55:16 +0100
Subject: [PATCH 3/8] Use bootstrap form controls for the link and html
 controls

---
 app/assets/javascripts/leaflet.share.js |  3 +++
 app/assets/stylesheets/common.scss      | 10 ----------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index c72760c97..5fb189a76 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -68,6 +68,7 @@ L.OSM.share = function (options) {
       .append($("<input>")
         .attr("id", "long_input")
         .attr("type", "text")
+        .attr("class", "form-control form-control-sm font-monospace")
         .on("click", select));
 
     $("<div>")
@@ -77,6 +78,7 @@ L.OSM.share = function (options) {
       .append($("<input>")
         .attr("id", "short_input")
         .attr("type", "text")
+        .attr("class", "form-control form-control-sm font-monospace")
         .on("click", select));
 
     $("<div>")
@@ -86,6 +88,7 @@ L.OSM.share = function (options) {
       .append(
         $("<textarea>")
           .attr("id", "embed_html")
+          .attr("class", "form-control form-control-sm font-monospace")
           .on("click", select))
       .append(
         $("<p>")
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f2c06052a..5fcbd83ab 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -573,16 +573,6 @@ body.small-nav {
 }
 
 .share-ui {
-  .share-link {
-    input[type=text],
-    textarea {
-      width: 100%;
-      font-family: monospace;
-      font-size: small;
-      line-height: 1.3;
-    }
-  }
-
   #mapnik_scale {
     width: 100px;
   }

From 01eed9b96c47365c1e6517df6d21f5d8b9286f29 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 15:59:23 +0100
Subject: [PATCH 4/8] Make the sharing controls read-only

They aren't used for inputting any information, only for copying.
---
 app/assets/javascripts/leaflet.share.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 5fb189a76..c096a92fc 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -69,6 +69,7 @@ L.OSM.share = function (options) {
         .attr("id", "long_input")
         .attr("type", "text")
         .attr("class", "form-control form-control-sm font-monospace")
+        .attr("readonly", true)
         .on("click", select));
 
     $("<div>")
@@ -79,6 +80,7 @@ L.OSM.share = function (options) {
         .attr("id", "short_input")
         .attr("type", "text")
         .attr("class", "form-control form-control-sm font-monospace")
+        .attr("readonly", true)
         .on("click", select));
 
     $("<div>")
@@ -89,6 +91,7 @@ L.OSM.share = function (options) {
         $("<textarea>")
           .attr("id", "embed_html")
           .attr("class", "form-control form-control-sm font-monospace")
+          .attr("readonly", true)
           .on("click", select))
       .append(
         $("<p>")

From 6fc0f764d564491be1b4d0a1e9b49c21865d1c61 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 16:26:12 +0100
Subject: [PATCH 5/8] Round the clickable map previews on the layer switcher

Most interactive elements on the site are rounded, so we can do the
same for these map previews.
---
 app/assets/javascripts/leaflet.layers.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 020876c47..1aa3824b0 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -13,6 +13,7 @@ L.OSM.layers = function (options) {
 
     layers.forEach(function (layer) {
       var item = $("<li>")
+        .attr("class", "rounded-3")
         .appendTo(baseLayers);
 
       if (map.hasLayer(layer)) {

From c162a9660e66e2a414c922cf5ec9efa318f86b0e Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 16:29:47 +0100
Subject: [PATCH 6/8] Use standard padding size for map-ui sidebar

The previous padding didn't match the main sidebar, and also used
sass division as part of the calculation.
---
 app/assets/javascripts/leaflet.layers.js       | 2 +-
 app/assets/javascripts/leaflet.sidebar-pane.js | 2 +-
 app/assets/stylesheets/common.scss             | 9 +--------
 app/views/site/key.html.erb                    | 2 +-
 4 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 1aa3824b0..27311f7c1 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -8,7 +8,7 @@ L.OSM.layers = function (options) {
       .attr("class", "section base-layers")
       .appendTo($ui);
 
-    var baseLayers = $("<ul class='list-unstyled'>")
+    var baseLayers = $("<ul class='list-unstyled mb-0'>")
       .appendTo(baseSection);
 
     layers.forEach(function (layer) {
diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index d8213a376..5e5006fb0 100644
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/app/assets/javascripts/leaflet.sidebar-pane.js
@@ -20,7 +20,7 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
     var $ui = $("<div>")
       .attr("class", uiClass + "-ui");
 
-    $("<div class='sidebar_heading d-flex'>")
+    $("<div class='d-flex p-3 pb-0'>")
       .appendTo($ui)
       .append($("<h4 class='flex-grow-1 text-break'>")
         .text(I18n.t(paneTitle)))
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 5fcbd83ab..2dabe8939 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -486,7 +486,7 @@ body.small-nav {
 
     .section {
       border-bottom: 1px solid $grey;
-      padding: 10px 20px;
+      padding: $spacer;
     }
   }
 }
@@ -606,13 +606,6 @@ body.small-nav {
 
 /* Rules for the sidebar */
 
-.sidebar_heading {
-  position: relative;
-  padding: $lineheight/2 $lineheight;
-  // background: $offwhite;
-  // border-bottom: 1px solid $grey;
-}
-
 #browse_status {
   input {
     display: block;
diff --git a/app/views/site/key.html.erb b/app/views/site/key.html.erb
index 370ae3b64..949121d96 100644
--- a/app/views/site/key.html.erb
+++ b/app/views/site/key.html.erb
@@ -1,5 +1,5 @@
 <div id="mapkey">
-  <table class="table table-sm table-borderless mapkey-table">
+  <table class="table table-sm table-borderless mapkey-table mb-0">
     <% YAML.load_file(Rails.root.join("config/key.yml")).each do |name,data| %>
       <% data.each do |entry| %>
         <tr class="mapkey-table-entry" data-layer="<%= name %>" data-zoom-min="<%= entry["min_zoom"] %>" data-zoom-max="<%= entry["max_zoom"] %>">

From 6eac50525bd8df7a096a82d6a9de2d95893b397b Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 16:32:04 +0100
Subject: [PATCH 7/8] Use h2 as the main header on the map-ui panel

---
 app/assets/javascripts/leaflet.sidebar-pane.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 5e5006fb0..516a446c3 100644
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/app/assets/javascripts/leaflet.sidebar-pane.js
@@ -22,7 +22,7 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
 
     $("<div class='d-flex p-3 pb-0'>")
       .appendTo($ui)
-      .append($("<h4 class='flex-grow-1 text-break'>")
+      .append($("<h2 class='flex-grow-1 text-break'>")
         .text(I18n.t(paneTitle)))
       .append($("<div>")
         .append($("<button type='button' class='btn-close'>")

From fdb687517e4fb4657e33db775450b57c4829b1eb Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 6 Sep 2023 16:32:43 +0100
Subject: [PATCH 8/8] Match the top spacing of the leaflet buttons to the gap
 between groups

This removes a usage of sass division operator
---
 app/assets/stylesheets/common.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 2dabe8939..2cd357845 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -579,7 +579,7 @@ body.small-nav {
 }
 
 .leaflet-top {
-  top: $lineheight/2 !important;
+  top: 10px !important;
   .leaflet-control {
     margin-right: 0px !important;
     margin-top: 0px !important;