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.

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 7b1c995c2d1a45fe03cc6fe9e6fe3dffcd13f620..c72760c972e5b8733af2e81b1e3e24d5edcafdf1 100644 (file)
--- 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)
     $("<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)
 
     $("<div class='btn-group btn-group-sm mb-2'>")
       .appendTo($form)


@@ -131,46 +129,61 @@ L.OSM.share = function (options) {
       .attr("method", "post")
       .appendTo($imageSection);
 
       .attr("method", "post")
       .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)
     $("<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)
 
     $("<div>")
       .appendTo($form)

+      .attr("class", "row mb-3")

       .append($("<label>")
         .attr("for", "mapnik_scale")
       .append($("<label>")
         .attr("for", "mapnik_scale")

+        .attr("class", "col-auto col-form-label")

         .text(I18n.t("javascripts.share.scale")))
         .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>")
 
     ["minlon", "minlat", "maxlon", "maxlat"].forEach(function (name) {
       $("<input>")

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 60a4bd59c331b94abaa4d737b039bc6c1f8708a3..f2c06052a6844507cb36b8fcec654da285462027 100644 (file)
--- 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;
   }
   #mapnik_scale {
     width: 100px;
   }


@@ -647,6 +641,9 @@ form {
   label {
     font-size: 16px;
   }
   label {
     font-size: 16px;
   }

+  .col-form-label {
+    font-size: 16px;
+  }

 }
 
 /* Stop bootstrap 5 from floating legends when they don't need to be */
 }
 
 /* Stop bootstrap 5 from floating legends when they don't need to be */