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

Merge pull request #3666 from AntonKhorev/flex-close-buttons

Browse source 
Position close buttons with flexbox
This commit is contained in:
Andy Allan 2022-08-31 15:04:45 +01:00 • committed by GitHub
commit 04ff7d4ee8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 102 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/index.js
View file

@ -1,5 +1,6 @@
//= require_self
//= require leaflet.sidebar
//= require leaflet.sidebar-pane
//= require leaflet.locatecontrol/src/L.Control.Locate
//= require leaflet.layers
//= require leaflet.key

29
app/assets/javascripts/index/browse.js
View file

@ -48,21 +48,20 @@ OSM.initializeBrowse = function (map) {
function displayFeatureWarning(count, limit, add, cancel) {
$("#browse_status").html(
$("<div>")
.append(
$("<button type='button' class='btn-close float-end mt-1'>")
.click(cancel),
$("<h2>")
.text(I18n.t("browse.start_rjs.load_data"))
.prepend(),
$("<div>")
.append(
$("<p class='alert alert-warning clearfix'></p>")
.text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })))
.append(
$("<input type='submit' class='btn btn-primary'>")
.val(I18n.t("browse.start_rjs.load_data"))
.click(add))));
$("<div>").append(
$("<div class='d-flex'>").append(
$("<div class='flex-grow-1 text-break'>").append(
$("<h2>")
.text(I18n.t("browse.start_rjs.load_data"))),
$("<div>").append(
$("<button type='button' class='btn-close mt-1'>")
.click(cancel))),
$("<div>").append(
$("<p class='alert alert-warning'></p>")
.text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })),
$("<input type='submit' class='btn btn-primary'>")
.val(I18n.t("browse.start_rjs.load_data"))
.click(add))));
}
var dataLoader;

29
app/assets/javascripts/index/directions.js
View file

@ -254,20 +254,31 @@ OSM.Directions = function (map) {
map.fitBounds(polyline.getBounds().pad(0.05));
}
var html = "<a class=\"geolink\" href=\"#\"><button type='button' class='btn-close float-end mt-1'></button></a>" +
"<h2>" + I18n.t("javascripts.directions.directions") + "</h2>" +
"<p>" +
var distanceText = $("<p>").append(
I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " +
I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".";
I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".");
if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
html += "<br />" +
distanceText.append(
$("<br>"),
I18n.t("javascripts.directions.ascend") + ": " + Math.round(route.ascend) + "m. " +
I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m.";
I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m.");
}
html += "</p><table id=\"turnbyturn\" class=\"mb-3\"/>";
var turnByTurnTable = $("<table class='mb-3'>");
$("#sidebar_content")
.html(html);
.empty()
.append(
$("<div class='d-flex'>").append(
$("<div class='flex-grow-1 text-break'>").append(
$("<h2>")
.text(I18n.t("javascripts.directions.directions"))),
$("<div>").append(
$("<a class='geolink' href='#'>").append(
$("<button type='button' class='btn-close mt-1'>")))),
distanceText,
turnByTurnTable
);
// Add each row
route.steps.forEach(function (step) {
@ -309,7 +320,7 @@ OSM.Directions = function (map) {
map.removeLayer(highlight);
});
$("#turnbyturn").append(row);
turnByTurnTable.append(row);
});
$("#sidebar_content").append("<p class=\"text-center\">" +

41
app/assets/javascripts/leaflet.key.js
View file

@ -1,37 +1,11 @@
L.OSM.key = function (options) {
var control = L.control(options);
control.onAdd = function (map) {
var $container = $("<div>")
.attr("class", "control-key");
var button = $("<a>")
.attr("class", "control-button")
.attr("href", "#")
.html("<span class=\"icon key\"></span>")
.on("click", toggle)
.appendTo($container);
var $ui = $("<div>")
.attr("class", "key-ui");
$("<div>")
.attr("class", "sidebar_heading")
.appendTo($ui)
.append(
$("<button type='button' class='btn-close float-end mt-1'>")
.attr("aria-label", I18n.t("javascripts.close"))
.bind("click", toggle))
.append(
$("<h4>")
.text(I18n.t("javascripts.key.title")));
var control = L.OSM.sidebarPane(options, "key", null, "javascripts.key.title");
control.onAddPane = function (map, button, $ui) {
var $section = $("<div>")
.attr("class", "section")
.appendTo($ui);
options.sidebar.addPane($ui);
$ui
.on("show", shown)
.on("hide", hidden);
@ -49,15 +23,6 @@ L.OSM.key = function (options) {
map.off("zoomend baselayerchange", update);
}
function toggle(e) {
e.stopPropagation();
e.preventDefault();
if (!button.hasClass("disabled")) {
options.sidebar.togglePane($ui, button);
}
$(".leaflet-control .control-button").tooltip("hide");
}
function updateButton() {
var disabled = ["mapnik", "cyclemap"].indexOf(map.getMapBaseLayerId()) === -1;
button
@ -81,8 +46,6 @@ L.OSM.key = function (options) {
}
});
}
return $container[0];
};
return control;

40
app/assets/javascripts/leaflet.layers.js
View file

@ -1,34 +1,9 @@
L.OSM.layers = function (options) {
var control = L.control(options);
var control = L.OSM.sidebarPane(options, "layers", "javascripts.map.layers.title", "javascripts.map.layers.header");
control.onAdd = function (map) {
control.onAddPane = function (map, button, $ui, toggle) {
var layers = options.layers;
var $container = $("<div>")
.attr("class", "control-layers");
var button = $("<a>")
.attr("class", "control-button")
.attr("href", "#")
.attr("title", I18n.t("javascripts.map.layers.title"))
.html("<span class=\"icon layers\"></span>")
.on("click", toggle)
.appendTo($container);
var $ui = $("<div>")
.attr("class", "layers-ui");
$("<div>")
.attr("class", "sidebar_heading")
.appendTo($ui)
.append(
$("<button type='button' class='btn-close float-end mt-1'>")
.attr("aria-label", I18n.t("javascripts.close"))
.bind("click", toggle))
.append(
$("<h4>")
.text(I18n.t("javascripts.map.layers.header")));
var baseSection = $("<div>")
.attr("class", "section base-layers")
.appendTo($ui);
@ -179,17 +154,6 @@ L.OSM.layers = function (options) {
addOverlay(map.dataLayer, "data", OSM.MAX_REQUEST_AREA);
addOverlay(map.gpsLayer, "gps", Number.POSITIVE_INFINITY);
}
options.sidebar.addPane($ui);
function toggle(e) {
e.stopPropagation();
e.preventDefault();
options.sidebar.togglePane($ui, button);
$(".leaflet-control .control-button").tooltip("hide");
}
return $container[0];
};
return control;

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

@ -1,37 +1,12 @@
L.OSM.share = function (options) {
var control = L.control(options),
var control = L.OSM.sidebarPane(options, "share", "javascripts.share.title", "javascripts.share.title"),
marker = L.marker([0, 0], { draggable: true }),
locationFilter = new L.LocationFilter({
enableButton: false,
adjustButton: false
});
control.onAdd = function (map) {
var $container = $("<div>")
.attr("class", "control-share");
var button = $("<a>")
.attr("class", "control-button")
.attr("href", "#")
.attr("title", I18n.t("javascripts.share.title"))
.html("<span class=\"icon share\"></span>")
.on("click", toggle)
.appendTo($container);
var $ui = $("<div>")
.attr("class", "share-ui");
$("<div>")
.attr("class", "sidebar_heading")
.appendTo($ui)
.append(
$("<button type='button' class='btn-close float-end mt-1'>")
.attr("aria-label", I18n.t("javascripts.close"))
.bind("click", toggle))
.append(
$("<h4>")
.text(I18n.t("javascripts.share.title")));
control.onAddPane = function (map, button, $ui) {
// Link / Embed
var $linkSection = $("<div>")
@ -245,11 +220,15 @@ L.OSM.share = function (options) {
map.on("move", movedMap);
map.on("moveend layeradd layerremove", update);
options.sidebar.addPane($ui);
$ui
.on("show", shown)
.on("hide", hidden);
function shown() {
$("#mapnik_scale").val(getScale());
update();
}
function hidden() {
map.removeLayer(marker);
map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
@ -257,18 +236,6 @@ L.OSM.share = function (options) {
update();
}
function toggle(e) {
e.stopPropagation();
e.preventDefault();
$("#mapnik_scale").val(getScale());
marker.setLatLng(map.getCenter());
update();
options.sidebar.togglePane($ui, button);
$(".leaflet-control .control-button").tooltip("hide");
}
function toggleMarker() {
if ($(this).is(":checked")) {
marker.setLatLng(map.getCenter());
@ -413,8 +380,6 @@ L.OSM.share = function (options) {
var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
return precision * Math.ceil(scale / precision);
}
return $container[0];
};
return control;

53
app/assets/javascripts/leaflet.sidebar-pane.js Normal file
View file

@ -0,0 +1,53 @@
L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
var control = L.control(options);
control.onAdd = function (map) {
var $container = $("<div>")
.attr("class", "control-" + uiClass);
var button = $("<a>")
.attr("class", "control-button")
.attr("href", "#")
.html("<span class=\"icon " + uiClass + "\"></span>")
.on("click", toggle);
if (buttonTitle) {
button.attr("title", I18n.t(buttonTitle));
}
button.appendTo($container);
var $ui = $("<div>")
.attr("class", uiClass + "-ui");
$("<div class='sidebar_heading d-flex'>")
.appendTo($ui)
.append($("<div class='flex-grow-1 text-break'>")
.append($("<h4>")
.text(I18n.t(paneTitle))))
.append($("<div>")
.append($("<button type='button' class='btn-close mt-1'>")
.attr("aria-label", I18n.t("javascripts.close"))
.bind("click", toggle)));
options.sidebar.addPane($ui);
this.onAddPane(map, button, $ui, toggle);
function toggle(e) {
e.stopPropagation();
e.preventDefault();
if (!button.hasClass("disabled")) {
options.sidebar.togglePane($ui, button);
}
$(".leaflet-control .control-button").tooltip("hide");
}
return $container[0];
};
// control.onAddPane = function (map, button, $ui, toggle) {
// }
return control;
};

2
app/views/application/_sidebar_header.html.erb
View file

@ -4,7 +4,7 @@
</div>
<div>
<a class="geolink" href="<%= root_path %>">
<button type="button" class="btn-close float-end mt-1"></button>
<button type="button" class="btn-close mt-1"></button>
</a>
</div>
</div>

2
app/views/layouts/_search.html.erb
View file

@ -19,7 +19,7 @@
</form>
<form method="GET" action="<%= directions_path %>" class="directions_form pb-3">
<div class="clearfix px-3 py-3"><button type="button" class="btn-close float-end"></button></div>
<div class="d-flex flex-row-reverse px-3 py-3"><button type="button" class="btn-close"></button></div>
<div class="row gx-2 m-1">
<div class="col-1">