cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed close buttons of banner and other leaflet sidebars to Bootstrap

Browse source
This commit is contained in:
Anton Khorev 2022-07-27 20:00:22 +03:00
parent 5ed2bfc950
commit 0322ed4295
5 changed files with 6 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/index.js
View file

@ -203,7 +203,7 @@ $(document).ready(function () {
var bannerExpiry = new Date(); var bannerExpiry = new Date();
bannerExpiry.setYear(bannerExpiry.getFullYear() + 1); bannerExpiry.setYear(bannerExpiry.getFullYear() + 1);
$("#banner .close-wrap").on("click", function (e) { $("#banner .btn-close").on("click", function (e) {
var cookieId = e.target.id; var cookieId = e.target.id;
$("#banner").hide(); $("#banner").hide();
e.preventDefault(); e.preventDefault();

5
app/assets/javascripts/leaflet.key.js
View file

@ -19,9 +19,8 @@ L.OSM.key = function (options) {
.attr("class", "sidebar_heading") .attr("class", "sidebar_heading")
.appendTo($ui) .appendTo($ui)
.append( .append(
$("<span>") $("<button type='button' class='btn-close float-end mt-1'>")
.text(I18n.t("javascripts.close")) .attr("aria-label",I18n.t("javascripts.close"))
.attr("class", "icon close")
.bind("click", toggle)) .bind("click", toggle))
.append( .append(
$("<h4>") $("<h4>")

5
app/assets/javascripts/leaflet.share.js
View file

@ -25,9 +25,8 @@ L.OSM.share = function (options) {
.attr("class", "sidebar_heading") .attr("class", "sidebar_heading")
.appendTo($ui) .appendTo($ui)
.append( .append(
$("<span>") $("<button type='button' class='btn-close float-end mt-1'>")
.text(I18n.t("javascripts.close")) .attr("aria-label",I18n.t("javascripts.close"))
.attr("class", "icon close")
.bind("click", toggle)) .bind("click", toggle))
.append( .append(
$("<h4>") $("<h4>")

17
app/assets/stylesheets/common.scss
View file

@ -55,7 +55,6 @@ small, aside {
.icon.clipboard { /* no-r2 */ background-position: -160px 0; } .icon.clipboard { /* no-r2 */ background-position: -160px 0; }
.icon.link { /* no-r2 */ background-position: -180px 0; } .icon.link { /* no-r2 */ background-position: -180px 0; }
.icon.close { /* no-r2 */ background-position: -200px 0; } .icon.close { /* no-r2 */ background-position: -200px 0; }
.close-wrap:hover .icon.close,
.icon.close:hover { /* no-r2 */ background-position: -200px -20px; } .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
.icon.check { /* no-r2 */ background-position: -220px 0; } .icon.check { /* no-r2 */ background-position: -220px 0; }
.icon.note { /* no-r2 */ background-position: -240px 0; } .icon.note { /* no-r2 */ background-position: -240px 0; }
@ -366,22 +365,6 @@ body.compact-nav {
h3, h4 { h3, h4 {
font-size: 1.25rem; 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 { .overlay-sidebar #sidebar {

2
app/views/layouts/_banner.html.erb
View file

@ -1,4 +1,4 @@
<% unless (banner = next_banner()).nil? %> <% unless (banner = next_banner()).nil? %>
<%= link_to (image_tag banner[:img], :alt => banner[:alt], :title => banner[:alt]), banner[:link] %> <%= 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 %> <% end %>