}
});
- $(document).on("click", "#sidebar_content .btn-close", function () {
+ $(document).on("click", "#sidebar .sidebar-close-controls button", function () {
OSM.router.route("/" + OSM.formatHash(map));
});
});
OSM.router.route("/" + OSM.formatHash(map));
});
- function formatDistance(m) {
- const unitTemplate = "javascripts.directions.distance_";
- if (m < 1000) return I18n.t(unitTemplate + "m", { distance: Math.round(m) });
- if (m < 10000) return I18n.t(unitTemplate + "km", { distance: (m / 1000.0).toFixed(1) });
- return I18n.t(unitTemplate + "km", { distance: Math.round(m / 1000) });
+ function formatTotalDistance(m) {
+ if (m < 1000) {
+ return I18n.t("javascripts.directions.distance_m", { distance: Math.round(m) });
+ } else if (m < 10000) {
+ return I18n.t("javascripts.directions.distance_km", { distance: (m / 1000.0).toFixed(1) });
+ } else {
+ return I18n.t("javascripts.directions.distance_km", { distance: Math.round(m / 1000) });
+ }
+ }
+
+ function formatStepDistance(m) {
+ if (m < 5) {
+ return "";
+ } else if (m < 200) {
+ return I18n.t("javascripts.directions.distance_m", { distance: String(Math.round(m / 10) * 10) });
+ } else if (m < 1500) {
+ return I18n.t("javascripts.directions.distance_m", { distance: String(Math.round(m / 100) * 100) });
+ } else if (m < 5000) {
+ return I18n.t("javascripts.directions.distance_km", { distance: String(Math.round(m / 100) / 10) });
+ } else {
+ return I18n.t("javascripts.directions.distance_km", { distance: String(Math.round(m / 1000)) });
+ }
}
function formatHeight(m) {
}
const distanceText = $("<p>").append(
- I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " +
+ I18n.t("javascripts.directions.distance") + ": " + formatTotalDistance(route.distance) + ". " +
I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".");
if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
distanceText.append(
row.append("<td class='border-0'>");
}
row.append("<td>" + instruction);
- row.append("<td class='distance text-body-secondary text-end'>" + getDistText(dist));
+ row.append("<td class='distance text-body-secondary text-end'>" + formatStepDistance(dist));
row.on("click", function () {
popup
}).finally(function () {
controller = null;
});
-
- function getDistText(dist) {
- if (dist < 5) return "";
- if (dist < 200) return String(Math.round(dist / 10) * 10) + "m";
- if (dist < 1500) return String(Math.round(dist / 100) * 100) + "m";
- if (dist < 5000) return String(Math.round(dist / 100) / 10) + "km";
- return String(Math.round(dist / 1000)) + "km";
- }
}
function hideRoute(e) {
}
function enableListeners() {
- $("#sidebar_content").on("click", ".btn-close", hideRoute);
+ $("#sidebar .sidebar-close-controls button").on("click", hideRoute);
$("#map").on("dragend dragover", function (e) {
e.preventDefault();
$(".search_form").show();
$(".directions_form").hide();
- $("#sidebar_content").off("click", ".btn-close", hideRoute);
+ $("#sidebar .sidebar-close-controls button").off("click", hideRoute);
$("#map").off("dragend dragover drop");
map.off("locationfound", sendstartinglocation);
button.appendTo($container);
const $ui = $("<div>")
- .attr("class", uiClass + "-ui");
-
- $("<div class='d-flex p-3 pb-0'>")
- .appendTo($ui)
- .append($("<h2 class='flex-grow-1 text-break'>")
- .text(I18n.t(paneTitle)))
- .append($("<div>")
- .append($("<button type='button' class='btn-close'>")
- .attr("aria-label", I18n.t("javascripts.close"))
- .bind("click", toggle)));
+ .attr("class", `${uiClass}-ui position-relative z-n1`);
+
+ $("<h2 class='p-3 pb-0 pe-5 text-break'>")
+ .text(I18n.t(paneTitle))
+ .appendTo($ui);
options.sidebar.addPane($ui);
.addClass("active");
};
+ sidebar.find(".sidebar-close-controls button").on("click", () => {
+ control.togglePane(current, currentButton);
+ });
+
return control;
};
display: block;
}
+ .sidebar-close-controls,
#sidebar_loader,
#sidebar_content {
display: none;
-<div class="d-flex">
- <h2 class="flex-grow-1 text-break"><%= title %></h2>
- <div>
- <button type="button" class="btn-close" aria-label="<%= t("javascripts.close") %>"></button>
- </div>
-</div>
+<h2 class="me-4 text-break"><%= title %></h2>
<span><%= changeset.tags["comment"].to_s.presence || t("browse.no_comment") %></span>
</a>
</p>
- <div class="row">
- <div class="col pt-3">
+ <div class="d-flex flex-nowrap gap-3 justify-content-between">
+ <div class="overflow-hidden pt-3">
<%= changeset_details(changeset) %>
·
<a class="changeset_id link-body-emphasis" href="<%= changeset_path(changeset) %>">
#<%= changeset.id %>
</a>
</div>
- <div class="col-auto d-flex flex-column justify-content-end align-items-end text-body-secondary">
+ <div class="d-flex flex-column justify-content-end align-items-end text-body-secondary">
<%= tag.div :class => ["d-flex align-items-baseline gap-1", { "opacity-50" => changeset.comments.empty? }],
:title => t(".comments", :count => changeset.comments.length) do %>
<%= changeset.comments.length %>
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
- <path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" />
+ <% if changeset.comments.empty? %>
+ <path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" />
+ <% else %>
+ <path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" />
+ <% end %>
</svg>
<% end %>
<%= tag.div :class => ["d-flex align-items-baseline gap-1", { "opacity-50" => changeset.num_changes.zero? }],
--- /dev/null
+<div class="sidebar-close-controls sticky-top z-0">
+ <div class="position-absolute end-0 m-2 rounded-5 bg-body-tertiary shadow-sm">
+ <button type="button" disabled class="btn-close d-block p-2 invisible"></button>
+ </div>
+</div>
+<div class="sidebar-close-controls sticky-top">
+ <div class="position-absolute end-0 m-2 rounded-5">
+ <button type="button" class="btn-close d-block p-2 rounded-5" aria-label="<%= t("javascripts.close") %>"></button>
+ </div>
+</div>
+<div class="sidebar-close-controls position-relative">
+ <div class="position-absolute end-0 bg-body p-4">
+ </div>
+</div>
<div id="browse_status"></div>
+ <%= render :partial => "layouts/sidebar_close" %>
+
<div id="sidebar_loader" class="my-3 text-center loader" hidden>
<div class="spinner-border" role="status">
<span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
</div>
</div>
- <div id="sidebar_content" class="p-3">
+ <div id="sidebar_content" class="p-3 position-relative z-n1">
<%= yield %>
</div>
<% unless current_user %>
- <div class="welcome p-3" hidden>
- <%= render "sidebar_header", :title => t("layouts.intro_header") %>
+ <div class="welcome position-relative p-3" hidden>
+ <button type="button" class="btn-close position-absolute end-0 top-0 m-2 rounded-5 p-2" aria-label="<%= t("javascripts.close") %>"></button>
+ <h2 class="me-4 text-break"><%= t "layouts.intro_header" %></h2>
<p class="fs-6 fw-light"><%= t "layouts.intro_text" %></p>
<p class="fs-6 fw-light"><%= t "layouts.hosting_partners_2024_html",
:fastly => link_to(t("layouts.partners_fastly"), "https://www.fastly.com/"),
</noscript>
<div id="map-ui" class="bg-body z-2">
+ <%= render :partial => "layouts/sidebar_close" %>
</div>
<div id="map" tabindex="2" class="bg-body-secondary z-0">
"no-caller": "error",
"no-console": "warn",
"no-div-regex": "error",
- "no-else-return": ["error", { allowElseIf: false }],
"no-eq-null": "error",
"no-eval": "error",
"no-extend-native": "error",
assert_content "Start popup text"
end
- within_sidebar do
- find("button[aria-label='Close']").click
- end
+ find("#sidebar .sidebar-close-controls button[aria-label='Close']").click
within "#map" do
assert_no_content "Start popup text"
visit node_path(node)
find(".icon.share").click
assert_no_selector "#content.overlay-right-sidebar"
- find(".share-ui .btn-close").click
+ find("#map-ui .btn-close").click
assert_selector "#content.overlay-right-sidebar"
end
projects / rails.git / commitdiff