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 6d379ca8c32caa8b038af3fa7c7cb4fa096cca13..40f546009b0d4e7554d0ee6f0f669a55f4e644f4 100644 (file)
--- 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 1140515f5629b93ebd8b04079b806d69493fd5cb..8ef859d855b96650d0a579b49cc7693d6922f8a2 100644 (file)
--- 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 5040e7f3ef0d404b449f9fe28895fbf40bbc480e..ad780d4f40dffa74d6f7ecd5346120a66764b4fb 100644 (file)
--- 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 e839171ab0937bcede9d8ef3795a552eb5b71842..b9b7c9c04e0bb74c677a1e38396b6a2be4acc458 100644 (file)
--- 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 5c5e43c5c20351b3abf537a9bd55d13f5078dff2..676cd960780fe6741809ba3e21ca0573644313d1 100644 (file)
--- 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 db983939016de802ee8cbf61d21e42ed9281eb52..1817e71ccd03d2b759618cf3dd576e3f08cf69d3 100644 (file)
--- 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 8d3da8f7e8267d467b642176d13e9e6ae8a8ecd9..1f80a9b5b520c08029d9965e273b92b731ec1429 100644 (file)
--- 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 da1f6bf45644e1d45352ca17e6ff6f789e2932f4..83b1ae1c5415c9a3ff22ccb7ad3472f311c68007 100644 (file)
--- 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 bd0c902275013ebfdc7cf155ba3533916e252696..2751a545816f58a81cff1864b34497b33c04296c 100644 (file)
--- 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 c2501b95bf34762c1701c2fb3bea2422fe152237..24e25076f4494fdffb8fdde8f4d1f1c654078a06 100644 (file)
--- 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">