cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use bootstrap for share forms

Browse source 
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.
This commit is contained in:
Andy Allan 2023-09-06 15:31:49 +01:00
parent cabee40032
commit 0ea6646fb6
2 changed files with 59 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

99
app/assets/javascripts/leaflet.share.js
View file

@ -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>")

9
app/assets/stylesheets/common.scss
View file

@ -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 */