Remove controls sprite
This commit is contained in:
Marwin Hochfelsner
parent
0fca171657
commit
1f182c673b
11 changed files with 62 additions and 106 deletions
|
|
@ -1,62 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
|
||||
<g id="query">
|
||||
<text transform="matrix(1, 0, 0, 1, 276.165, 12.5)">
|
||||
<tspan x="-3.665" y="6.012" font-family="Helvetica, sans-serif" font-weight="Bold" font-size="12" fill="#FFFFFF">?</tspan>
|
||||
</text>
|
||||
<path d="M263,1 C263,1 272,8 272,8 C270.944,8.587 269.888,9.173 268.832,9.76 L271.863,16.375 C272.209,17.128 271.878,18.018 271.125,18.364 C270.372,18.709 269.482,18.378 269.136,17.625 L266.201,11.221 C265.134,11.814 264.067,12.407 263,13 L263,1 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="add-note-grey">
|
||||
<path d="M242,31 L242,24 L243,23 L253,23 L254,24 L254,31 L253,32 L250,32 L248,35 L246,32 L243,32 z" fill="#CCCCCC"/>
|
||||
<path d="M257,33 L257,35 L259,35 L259,37 L257,37 L257,39 L255,39 L255,37 L253,37 L253,35 L255,35 L255,33 L257,33 z" fill="#CCCCCC"/>
|
||||
</g>
|
||||
<g id="add-note">
|
||||
<path d="M257,12 L257,14 L259,14 L259,16 L257,16 L257,18 L255,18 L255,16 L253,16 L253,14 L255,14 L255,12 L257,12 z" fill="#FFFFFF"/>
|
||||
<path d="M242,11 L242,4 L243,3 L253,3 L254,4 L254,11 L253,12 L250,12 L248,15 L246,12 L243,12 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="check-green">
|
||||
<path d="M224,28 L226,28 L229,31 L233.773,25 L236,25 L236,27 L231,33 L230,34 L228,34 L227,33 L224,30 z" fill="#70CD8F"/>
|
||||
</g>
|
||||
<g id="check">
|
||||
<path d="M224,8 L226,8 L229,11 L233.773,5 L236,5 L236,7 L231,13 L230,14 L228,14 L227,13 L224,10 z" fill="#222222"/>
|
||||
</g>
|
||||
<g id="close-grey">
|
||||
<path d="M205.938,25.156 L204.938,26.156 L204.938,27.156 L207.938,30.156 L204.938,33.156 L204.938,34.156 L205.938,35.156 L206.938,35.156 L209.938,32.156 L212.938,35.156 L213.938,35.156 L214.938,34.156 L214.938,33.156 L211.938,30.156 L214.938,27.156 L214.938,26.156 L213.938,25.156 L212.938,25.156 L209.938,28.156 L206.938,25.156 L205.938,25.156 z" fill="#999999"/>
|
||||
</g>
|
||||
<g id="close">
|
||||
<path d="M206,5 L205,6 L205,7 L208,10 L205,13 L205,14 L206,15 L207,15 L210,12 L213,15 L214,15 L215,14 L215,13 L212,10 L215,7 L215,6 L214,5 L213,5 L210,8 L207,5 L206,5 z" fill="#CCCCCC"/>
|
||||
</g>
|
||||
<g id="link">
|
||||
<path d="M185,6 L183,8 L183,12 L185,14 L187,14 L185,12 L185,8 L190,8 L190,11 L192,11 L192,8 L190,6 L187,6 L185,6 z M192,6 L194,8 L194,12 L189,12 L189,9 L187,9 L187,12 L189,14 L194,14 L196,12 L196,8 L194,6 L192,6 z" fill="#0000FF"/>
|
||||
</g>
|
||||
<g id="clipboard">
|
||||
<path d="M170,1 L169,2 L169,3 L168,3 L167,4 L167,6 L174,6 L174,4 L173,3 L172,3 L172,2 L171,1 L170,1 z M165,4 L164,5 L164,16 L165,17 L176,17 L177,16 L177,5 L176,4 L175,4 L175,5 L175,7 L175,15 L166,15 L166,7 L166,5 L166,4 L165,4 z M168,8 L168,9 L173,9 L173,8 L168,8 z M168,10 L168,11 L173,11 L173,10 L168,10 z M168,12 L168,13 L171,13 L171,12 L168,12 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="export">
|
||||
<path d="M155,2 L154,3 L154,5 L152,5 C146,5 146,12 146,12 C146,12 148,8 152,8 C152.667,8 153.333,8 154,8 L154,10 L155,11 L159,6.5 L155,2 z M142,6 L141,7 L141,16 L142,17 L152,17 L153,16 L153,14 L153,11 L153,10 L152,10 C151.68,10 151.34,10.073 151,10.188 L151,13 L151,15 L145.438,15 C145.139,15.069 144.829,15.069 144.531,15 L143,15 L143,13.375 C142.967,13.168 142.967,12.957 143,12.75 L143,10 L143,8 L144.531,8 C144.875,7.331 145.323,6.652 145.875,6 L145,6 L142,6 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="info">
|
||||
<path d="M129,3 L128,4 L128,6 L129,7 L131,7 L132,6 L132,4 L131,3 z M129,9 L128,10 L128,16 L129,17 L131,17 L132,16 L132,10 L131,9 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="layers">
|
||||
<path d="M109.5,3 L103,6 L103,7 L109.5,10 L110.5,10 L117,7 L117,6 L110.5,3 L109.5,3 z M104.094,9.5 L103,10 L103,11 L109.5,14 L110.5,14 L117,11 L117,10 L115.906,9.5 L110.5,12 L109.5,12 L104.094,9.5 z M104.094,13.5 L103,14 L103,15 L109.5,18 L110.5,18 L117,15 L117,14 L115.906,13.5 L110.5,16 L109.5,16 L104.094,13.5 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="locate-green">
|
||||
<path d="M84,30 L84,28 L94,24 L96,24 L96,26 L92,36 L90,36 L90,30 z" fill="#70CD8F"/>
|
||||
</g>
|
||||
<g id="locate">
|
||||
<path d="M84,10 L84,8 L94,4 L96,4 L96,6 L92,16 L90,16 L90,10 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="minus">
|
||||
<path d="M65,8 L76,8 L77,9 L77,10 L76,11 L65,11 L64,10 L64,9 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="plus">
|
||||
<path d="M57,9 L56,8 L52,8 L52,4 L51,3 L50,3 L49,4 L49,8 L45,8 L44,9 L44,10 L45,11 L49,11 L49,15 L50,16 L51,16 L52,15 L52,11 L56,11 L57,10 L57,9 z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="heart">
|
||||
<path d="M24,8 C24,6.172 25,4 27.75,4 C29.578,4 30.5,6 30.5,6 C30.5,6 31.422,4 33.25,4 C36,4 37,6.172 37,8 C37,13 30.5,16 30.5,16 C30.5,16 24,13 24,8 z" fill="#000000"/>
|
||||
</g>
|
||||
<g id="search">
|
||||
<path d="M11.5,3 C14.538,3 17,5.462 17,8.5 C17,11.538 14.538,14 11.5,14 C10.494,14 9.561,13.722 8.75,13.25 L5,17 L4,17 L3,16 L3,15 L6.75,11.25 C6.278,10.439 6,9.506 6,8.5 C6,5.462 8.462,3 11.5,3 z M12,5 L11,5 L9,6 L8,8 L8,9 L9,11 L11,12 L12,12 L14,11 L15,9 L15,8 L14,6 L12,5 z" fill="#999999"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.7 KiB |
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@ L.OSM.note = function (options) {
|
|||
const link = $("<a>")
|
||||
.attr("class", "control-button")
|
||||
.attr("href", "#")
|
||||
.html("<span class=\"icon note\"></span>")
|
||||
.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() {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@ L.OSM.query = function (options) {
|
|||
const link = $("<a>")
|
||||
.attr("class", "control-button")
|
||||
.attr("href", "#")
|
||||
.html("<span class=\"icon query\"></span>")
|
||||
.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() {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
|
|||
const button = $("<a>")
|
||||
.attr("class", "control-button")
|
||||
.attr("href", "#")
|
||||
.html("<span class=\"icon " + uiClass + "\"></span>")
|
||||
.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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -16,35 +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; }
|
||||
.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 {
|
||||
|
|
@ -280,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;
|
||||
|
|
@ -304,16 +277,17 @@ 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 */
|
||||
|
||||
.map-layout {
|
||||
|
|
|
|||
|
|
@ -47,6 +47,19 @@
|
|||
<%= render :partial => "layouts/banner" %>
|
||||
</div>
|
||||
|
||||
<svg class="d-none">
|
||||
<defs>
|
||||
<path id="icon-layers" fill="currentColor" d="M4.094 13.5 9.5 16h1l5.406-2.5L17 14v1l-6.5 3h-1L3 15V14l1.094-.5Zm0-4L9.5 12h1l5.406-2.5L17 10v1l-6.5 3h-1L3 11V10l1.094-.5ZM9.5 3h1L17 6V7l-6.5 3h-1L3 7V6L9.5 3Z" />
|
||||
<path id="icon-key" fill="currentColor" d="M9 3 8 4V6L9 7h2l1-1V4L11 3zM9 9 8 10v6l1 1h2l1-1V10L11 9z" />
|
||||
<path id="icon-share" fill="currentColor" d="m15 2-1 1V5h-2c-6 0-6 7-6 7s2-4 6-4h2v2l1 1 4-4.5L15 2ZM2 6 1 7v9l1 1h10l1-1V10h-1c-.32 0-.66.073-1 .188V15H3V8h1.531c.344-.669.792-1.348 1.344-2H2Z" />
|
||||
<path id="icon-note" fill="currentColor" d="M17 12H15v2H13v2h2v2h2V16h2V14H17V12ZM3 12H6l2 3 2-3h3l1-1V4L13 3H3L2 4v7Z" />
|
||||
<g id="icon-query" fill="currentColor">
|
||||
<path d="M3 1s9 7 9 7c-1.056.587-2.112 1.173-3.168 1.76l3.031 6.615c.346.753.015 1.643-.738 1.989-.753.345-1.643.014-1.989-.739L6.201 11.221C5.134 11.814 4.067 12.407 3 13V1z" />
|
||||
<text x="12.5" y="18.512" font-family="Helvetica, sans-serif" font-weight="Bold" font-size="12">?</text>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<noscript>
|
||||
<div class="mt-5 p-3">
|
||||
<p><%= t "site.index.js_1" %></p>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,16 @@
|
|||
<div class='col-sm'>
|
||||
<h3 class='fs-5'><%= t "site.welcome.add_a_note.title" %></h3>
|
||||
<p><%= t "site.welcome.add_a_note.para_1" %></p>
|
||||
<p><%= t ".how_to_help.add_a_note.instructions_1_html", :note_icon => tag.a(:href => new_note_path, :class => "icon note bg-dark rounded-1 new-note") %></p>
|
||||
<p><%= t(
|
||||
".how_to_help.add_a_note.instructions_1_html",
|
||||
:note_icon => link_to(
|
||||
tag.svg(:width => "20", :height => "20", :fill => "currentColor", :class => "align-top") do
|
||||
tag.path(:d => "M17 12H15v2H13v2h2v2h2V16h2V14H17V12ZM3 12H6l2 3 2-3h3l1-1V4L13 3H3L2 4v7Z")
|
||||
end,
|
||||
new_note_path,
|
||||
:class => "new-note"
|
||||
)
|
||||
) %></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,11 @@
|
|||
<div class='alert alert-primary'>
|
||||
<h2><%= t ".add_a_note.title" %></h2>
|
||||
<p><%= t ".add_a_note.para_1" %></p>
|
||||
<p><%= t ".add_a_note.para_2_html", :map_link => link_to(t(".add_a_note.the_map"), root_path),
|
||||
:note_icon => tag.span(:class => "icon note bg-dark rounded-1") %></p>
|
||||
<p><%= t(
|
||||
".add_a_note.para_2_html",
|
||||
:map_link => link_to(t(".add_a_note.the_map"), root_path),
|
||||
:note_icon => tag.svg(:width => "20", :height => "20", :fill => "currentColor", :class => "align-top") do
|
||||
tag.path(:d => "M17 12H15v2H13v2h2v2h2V16h2V14H17V12ZM3 12H6l2 3 2-3h3l1-1V4L13 3H3L2 4v7Z")
|
||||
end
|
||||
) %></p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue