diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg deleted file mode 100644 index ae2e03c6b..000000000 --- a/app/assets/images/sprite.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - ? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/javascripts/fixthemap.js b/app/assets/javascripts/fixthemap.js index 46afb0f68..96bd061f9 100644 --- a/app/assets/javascripts/fixthemap.js +++ b/app/assets/javascripts/fixthemap.js @@ -1,8 +1,8 @@ $(function () { const params = OSM.params(); - let url = "/note/new"; if (!params.zoom) params.zoom = 17; - if (params.lat && params.lon) url += OSM.formatHash(params); - $(".icon.note").attr("href", url); + if (params.lat && params.lon) { + $("a.new-note")[0].href += OSM.formatHash(params); + } }); diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index b1457d10b..a8be3917f 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -2,7 +2,8 @@ OSM.NewNote = function (map) { const noteLayer = map.noteLayer, content = $("#sidebar_content"), page = {}, - addNoteButton = $(".control-note .control-button"); + control = $(".control-note"), + addNoteButton = control.find(".control-button"); let newNoteMarker, halo; @@ -127,7 +128,7 @@ OSM.NewNote = function (map) { }; page.load = function (path) { - addNoteButton.addClass("active"); + control.addClass("active"); map.addLayer(noteLayer); @@ -181,7 +182,7 @@ OSM.NewNote = function (map) { map.off("click", moveNewNotMarkerToClick); addNoteButton.off("disabled enabled", updateControls); removeNewNoteMarker(); - addNoteButton.removeClass("active"); + control.removeClass("active"); }; return page; diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js index dfe0adfe2..ad45ae92d 100644 --- a/app/assets/javascripts/index/query.js +++ b/app/assets/javascripts/index/query.js @@ -1,7 +1,8 @@ OSM.Query = function (map) { const url = OSM.OVERPASS_URL, credentials = OSM.OVERPASS_CREDENTIALS, - queryButton = $(".control-query .control-button"), + control = $(".control-query"), + queryButton = control.find(".control-button"), uninterestingTags = ["source", "source_ref", "source:ref", "history", "attribution", "created_by", "tiger:county", "tiger:tlid", "tiger:upload_uuid", "KSJ2:curve_id", "KSJ2:lat", "KSJ2:lon", "KSJ2:coordinate", "KSJ2:filename", "note:ja"]; let marker; @@ -17,19 +18,19 @@ OSM.Query = function (map) { e.preventDefault(); e.stopPropagation(); - if (queryButton.hasClass("active")) { + if (control.hasClass("active")) { disableQueryMode(); } else if (!queryButton.hasClass("disabled")) { enableQueryMode(); } }).on("disabled", function () { - if (queryButton.hasClass("active")) { + if (control.hasClass("active")) { map.off("click", clickHandler); $(map.getContainer()).removeClass("query-active").addClass("query-disabled"); $(this).tooltip("show"); } }).on("enabled", function () { - if (queryButton.hasClass("active")) { + if (control.hasClass("active")) { map.on("click", clickHandler); $(map.getContainer()).removeClass("query-disabled").addClass("query-active"); $(this).tooltip("hide"); @@ -304,7 +305,7 @@ OSM.Query = function (map) { } function enableQueryMode() { - queryButton.addClass("active"); + control.addClass("active"); map.on("click", clickHandler); $(map.getContainer()).addClass("query-active"); } @@ -313,7 +314,7 @@ OSM.Query = function (map) { if (marker) map.removeLayer(marker); $(map.getContainer()).removeClass("query-active").removeClass("query-disabled"); map.off("click", clickHandler); - queryButton.removeClass("active"); + control.removeClass("active"); } const page = {}; diff --git a/app/assets/javascripts/leaflet.locate.js b/app/assets/javascripts/leaflet.locate.js index 81b4f1a4e..0fbf3c09d 100644 --- a/app/assets/javascripts/leaflet.locate.js +++ b/app/assets/javascripts/leaflet.locate.js @@ -1,7 +1,7 @@ L.OSM.locate = function (options) { const control = L.control.locate({ - icon: "icon geolocate", - iconLoading: "icon geolocate", + icon: "geolocate h-100 w-100 d-inline-block", + iconLoading: "geolocate h-100 w-100 d-inline-block", strings: { title: I18n.t("javascripts.map.locate.title"), popup: function (options) { diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js index e2ca4ffdf..4ebdf0505 100644 --- a/app/assets/javascripts/leaflet.note.js +++ b/app/assets/javascripts/leaflet.note.js @@ -8,9 +8,13 @@ L.OSM.note = function (options) { const link = $("") .attr("class", "control-button") .attr("href", "#") - .html("") .appendTo($container); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-note")) + .attr("class", "h-100 w-100") + .appendTo(link); + map.on("zoomend", update); function update() { diff --git a/app/assets/javascripts/leaflet.query.js b/app/assets/javascripts/leaflet.query.js index 041764877..fd8872a2a 100644 --- a/app/assets/javascripts/leaflet.query.js +++ b/app/assets/javascripts/leaflet.query.js @@ -8,9 +8,13 @@ L.OSM.query = function (options) { const link = $("") .attr("class", "control-button") .attr("href", "#") - .html("") .appendTo($container); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-query")) + .attr("class", "h-100 w-100") + .appendTo(link); + map.on("zoomend", update); function update() { diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js index 7408585f2..4ad1307a6 100644 --- a/app/assets/javascripts/leaflet.sidebar-pane.js +++ b/app/assets/javascripts/leaflet.sidebar-pane.js @@ -8,9 +8,13 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) { const button = $("") .attr("class", "control-button") .attr("href", "#") - .html("") .on("click", toggle); + $(L.SVG.create("svg")) + .append($(L.SVG.create("use")).attr("href", "#icon-" + uiClass)) + .attr("class", "h-100 w-100") + .appendTo(button); + if (buttonTitle) { button.attr("title", I18n.t(buttonTitle)); } diff --git a/app/assets/javascripts/leaflet.zoom.js b/app/assets/javascripts/leaflet.zoom.js index 71662608c..671389fb1 100644 --- a/app/assets/javascripts/leaflet.zoom.js +++ b/app/assets/javascripts/leaflet.zoom.js @@ -33,11 +33,16 @@ L.OSM.Zoom = L.Control.extend({ _createButton: function (html, title, className, container, fn, context) { const link = L.DomUtil.create("a", "control-button " + className, container); + const paths = { zoomin: "M16 8H12V4L11 3H10L9 4V8H5L4 9v1l1 1H9v4l1 1h1l1-1V11h4l1-1V9z", zoomout: "M4 9v1l1 1H16l1-1V9L16 8H5Z" }; link.innerHTML = html; link.href = "#"; link.title = title; - L.DomUtil.create("span", "icon " + className, link); + $(L.SVG.create("svg")) + .append($(L.SVG.create("path")).attr("d", paths[className])) + .attr("fill", "currentColor") + .attr("class", "h-100 w-100") + .appendTo(link); const stop = L.DomEvent.stopPropagation; diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index f3fe02e0c..924fe0fb7 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -23,8 +23,8 @@ $(function () { const locate = L.control.locate({ position: position, - icon: "icon geolocate", - iconLoading: "icon geolocate", + icon: "geolocate h-100 w-100 d-inline-block", + iconLoading: "geolocate h-100 w-100 d-inline-block", strings: { title: I18n.t("javascripts.map.locate.title"), popup: function (options) { diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 3ba484cd5..b3367a3b8 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -16,36 +16,6 @@ time[title] { text-decoration: underline dotted; } -/* Rules for icons */ - -.icon { - display: inline-block; - vertical-align: top; - width: 20px; - height: 20px; - background: transparent image-url("sprite.svg") no-repeat 0 0; - text-indent: -9999px; - overflow: hidden; -} - -.icon.search { /*rtl:ignore*/ background-position: 0 0; } -.icon.donate { /*rtl:ignore*/ background-position: -20px 0; } -.icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; } -.icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; } -.icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; } -.active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; } -.icon.layers { /*rtl:ignore*/ background-position: -100px 0; } -.icon.key { /*rtl:ignore*/ background-position: -120px 0; } -.icon.share { /*rtl:ignore*/ background-position: -140px 0; } -.icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; } -.icon.link { /*rtl:ignore*/ background-position: -180px 0; } -.icon.close { /*rtl:ignore*/ background-position: -200px 0; } -.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; } -.icon.check { /*rtl:ignore*/ background-position: -220px 0; } -.icon.note { /*rtl:ignore*/ background-position: -240px 0; } -.icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; } -.icon.query { /*rtl:ignore*/ background-position: -260px 0; } - /* Utility for de-emphasizing content */ .text-body-secondary a { @@ -281,6 +251,8 @@ body.small-nav { display: block; height: 40px; width: 40px; + color: white; + padding: 10px; background-color: #333; background-color: rgba(0,0,0,.6); outline: none; @@ -297,10 +269,6 @@ body.small-nav { cursor: default; } - &.active { - background-color: $vibrant-green; - } - &-first { border-start-start-radius: 4px; } @@ -309,10 +277,15 @@ body.small-nav { border-end-start-radius: 4px; margin-bottom: 10px; } +} - .icon { - margin: 10px; - } +.leaflet-control.active .control-button { + background-color: $vibrant-green; +} + +.geolocate { + background: currentColor; + clip-path: polygon(20% 50%, 20% 40%, 70% 20%, 80% 20%, 80% 30%, 60% 80%, 50% 80%, 50% 50%); } /* Rules for the sidebar and main map area */ diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 62e979c05..6e61d8277 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -50,6 +50,19 @@ <%= render :partial => "layouts/banner" %> + + + + + + + + + ? + + + +