Make close buttons stick to the top of scrolled areas

This commit is contained in:
Anton Khorev 2025-03-08 18:26:07 +03:00
parent 9224f825b5
commit c3fa34b595
3 changed files with 14 additions and 5 deletions

View file

@ -18,7 +18,7 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
button.appendTo($container);
const $ui = $("<div>")
.attr("class", uiClass + "-ui");
.attr("class", `${uiClass}-ui position-relative z-n1`);
$("<h2 class='p-3 pb-0 pe-5 text-break'>")
.text(I18n.t(paneTitle))

View file

@ -1,5 +1,14 @@
<div class="sidebar-close-controls">
<div class="position-absolute end-0 m-2">
<button type="button" class="btn-close d-block p-2" aria-label="<%= t("javascripts.close") %>"></button>
<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>

View file

@ -26,7 +26,7 @@
</div>
</div>
<div id="sidebar_content" class="p-3">
<div id="sidebar_content" class="p-3 position-relative z-n1">
<%= yield %>
</div>