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 f0b96f59fa95d28aa273d8f0362ae290bdfa565d..fc7780fca0b02afea1544d365693537e87be1650 100644 (file)
--- 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 e839171ab0937bcede9d8ef3795a552eb5b71842..3e8e66854a466747bca9f323a69233e846996e77 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.share.js b/app/assets/javascripts/leaflet.share.js
index db983939016de802ee8cbf61d21e42ed9281eb52..0f79e34e255a79792c6cf40e4aad26a7b2c9d5ee 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 5a03c49e1f54383c79f2747a4a66a30bd1f9ab13..2eb6bf98eae8aa0de2b8ad54cbebd9a7be610652 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; }
@@ -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 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 %>