From: Anton Khorev <tony29@yandex.ru>
Date: Wed, 27 Jul 2022 17:00:22 +0000 (+0300)
Subject: Changed close buttons of banner and other leaflet sidebars to Bootstrap
X-Git-Tag: live~1620^2~5
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/0322ed4295702d5842632af959ecf1ae00fa1983

Changed close buttons of banner and other leaflet sidebars to Bootstrap
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index f0b96f59f..fc7780fca 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -203,7 +203,7 @@ $(document).ready(function () {
   var bannerExpiry = new Date();
   bannerExpiry.setYear(bannerExpiry.getFullYear() + 1);
 
-  $("#banner .close-wrap").on("click", function (e) {
+  $("#banner .btn-close").on("click", function (e) {
     var cookieId = e.target.id;
     $("#banner").hide();
     e.preventDefault();
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index e839171ab..3e8e66854 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -19,9 +19,8 @@ L.OSM.key = function (options) {
       .attr("class", "sidebar_heading")
       .appendTo($ui)
       .append(
-        $("<span>")
-          .text(I18n.t("javascripts.close"))
-          .attr("class", "icon close")
+        $("<button type='button' class='btn-close float-end mt-1'>")
+          .attr("aria-label",I18n.t("javascripts.close"))
           .bind("click", toggle))
       .append(
         $("<h4>")
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index db9839390..0f79e34e2 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -25,9 +25,8 @@ L.OSM.share = function (options) {
       .attr("class", "sidebar_heading")
       .appendTo($ui)
       .append(
-        $("<span>")
-          .text(I18n.t("javascripts.close"))
-          .attr("class", "icon close")
+        $("<button type='button' class='btn-close float-end mt-1'>")
+          .attr("aria-label",I18n.t("javascripts.close"))
           .bind("click", toggle))
       .append(
         $("<h4>")
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 5a03c49e1..2eb6bf98e 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -55,7 +55,6 @@ small, aside {
 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
 .icon.link        { /* no-r2 */ background-position: -180px 0; }
 .icon.close       { /* no-r2 */ background-position: -200px 0; }
-.close-wrap:hover .icon.close,
 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
 .icon.check       { /* no-r2 */ background-position: -220px 0; }
 .icon.note        { /* no-r2 */ background-position: -240px 0; }
@@ -366,22 +365,6 @@ body.compact-nav {
     h3, h4 {
       font-size: 1.25rem;
     }
-
-    .close-wrap {
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 60px;
-      height: 60px;
-
-      .icon.close {
-        pointer-events: none;
-        position: absolute;
-        right: 20px;
-        top: 20px;
-      }
-    }
   }
 
   .overlay-sidebar #sidebar {
diff --git a/app/views/layouts/_banner.html.erb b/app/views/layouts/_banner.html.erb
index bd0c90227..2751a5458 100644
--- a/app/views/layouts/_banner.html.erb
+++ b/app/views/layouts/_banner.html.erb
@@ -1,4 +1,4 @@
 <% unless (banner = next_banner()).nil? %>
 <%= link_to (image_tag banner[:img], :alt => banner[:alt], :title => banner[:alt]), banner[:link] %>
-<div class="close-wrap" id="<%= banner_cookie(banner[:id]) %>"><span class="icon close"></span></div>
+<button type="button" class="btn-close position-absolute top-0 end-0 p-4" id="<%= banner_cookie(banner[:id]) %>"></button>
 <% end %>