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

Position directions close button with flex

Browse source
This commit is contained in:
Anton Khorev 2022-08-28 00:32:50 +03:00
parent 5a256a6f2b
commit f41b5558b7
2 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -254,20 +254,31 @@ OSM.Directions = function (map) {
map.fitBounds(polyline.getBounds().pad(0.05)); 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>" + var distanceText = $("<p>").append(
"<h2>" + I18n.t("javascripts.directions.directions") + "</h2>" +
"<p>" +
I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " + 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") { 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.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") $("#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 // Add each row
route.steps.forEach(function (step) { route.steps.forEach(function (step) {
@ -309,7 +320,7 @@ OSM.Directions = function (map) {
map.removeLayer(highlight); map.removeLayer(highlight);
}); });
$("#turnbyturn").append(row); turnByTurnTable.append(row);
}); });
$("#sidebar_content").append("<p class=\"text-center\">" + $("#sidebar_content").append("<p class=\"text-center\">" +

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

@ -19,7 +19,7 @@
</form> </form>
<form method="GET" action="<%= directions_path %>" class="directions_form pb-3"> <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="row gx-2 m-1">
<div class="col-1"> <div class="col-1">