From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 3 Aug 2022 10:47:08 +0000 (+0100)
Subject: Merge pull request #3631 from AntonKhorev/bootstrap-close
X-Git-Tag: live~2111
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/6b696558126fdeaefab37291a3bd26136c95fddb?hp=0371cdcfd9da4ede7f8b04ed53e3e0833d0aeb04

Merge pull request #3631 from AntonKhorev/bootstrap-close

Use Bootstrap close button
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 6d379ca8c..40f546009 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -195,7 +195,7 @@ $(document).ready(function () {
     $(".welcome").addClass("visible");
   }
 
-  $(".welcome .close").on("click", function () {
+  $(".welcome .btn-close").on("click", function () {
     $(".welcome").removeClass("visible");
     Cookies.set("_osm_welcome", "hide", { secure: true, expires: expiry, path: "/", samesite: "lax" });
   });
@@ -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/index/browse.js b/app/assets/javascripts/index/browse.js
index 1140515f5..8ef859d85 100644
--- a/app/assets/javascripts/index/browse.js
+++ b/app/assets/javascripts/index/browse.js
@@ -50,10 +50,11 @@ OSM.initializeBrowse = function (map) {
     $("#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($("<span class='icon close'></span>").click(cancel)))
-        .append(
+            .prepend(),
           $("<div>")
             .append(
               $("<p class='alert alert-warning clearfix'></p>")
diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 5040e7f3e..ad780d4f4 100644
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -157,7 +157,7 @@ OSM.Directions = function (map) {
     }));
   });
 
-  $(".directions_form .close").on("click", function (e) {
+  $(".directions_form .btn-close").on("click", function (e) {
     e.preventDefault();
     var route_from = endpoints[0].value;
     if (route_from) {
@@ -254,9 +254,9 @@ OSM.Directions = function (map) {
         map.fitBounds(polyline.getBounds().pad(0.05));
       }
 
-      var html = "<h2><a class=\"geolink\" href=\"#\">" +
-        "<span class=\"icon close\"></span></a>" + I18n.t("javascripts.directions.directions") +
-        "</h2><p>" +
+      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>" +
         I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " +
         I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".";
       if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index e839171ab..b9b7c9c04 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.layers.js b/app/assets/javascripts/leaflet.layers.js
index 5c5e43c5c..676cd9607 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -22,9 +22,8 @@ L.OSM.layers = 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..1817e71cc 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 8d3da8f7e..1f80a9b5b 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; }
@@ -358,22 +357,6 @@ body.compact-nav {
       clear: both;
       width: 100%;
     }
-
-    .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 {
@@ -625,11 +608,6 @@ body.compact-nav {
   padding: $lineheight/2 $lineheight;
   // background: $offwhite;
   // border-bottom: 1px solid $grey;
-  > .close {
-    float: right;
-    margin-top: 2px;
-    cursor: pointer;
-  }
 }
 
 #browse_status {
diff --git a/app/views/application/_sidebar_header.html.erb b/app/views/application/_sidebar_header.html.erb
index da1f6bf45..83b1ae1c5 100644
--- a/app/views/application/_sidebar_header.html.erb
+++ b/app/views/application/_sidebar_header.html.erb
@@ -4,7 +4,7 @@
   </div>
   <div>
     <a class="geolink" href="<%= root_path %>">
-      <span class="icon close"></span>
+      <button type="button" class="btn-close float-end mt-1"></button>
     </a>
   </div>
 </div>
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 %>
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index c2501b95b..24e25076f 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -19,7 +19,7 @@
   </form>
 
   <form method="GET" action="<%= directions_path %>" class="directions_form pb-3">
-    <div class="clearfix px-3 py-3"><span class="icon close"></span></div>
+    <div class="clearfix px-3 py-3"><button type="button" class="btn-close float-end"></button></div>
 
     <div class="row gx-2 m-1">
       <div class="col-1">