2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

replace svg icons with google material icons font

Browse source
This commit is contained in:
Laura Klünder 2017-11-15 12:10:11 +01:00
parent 4edfb957bd
commit 08ecc2be9f
7 changed files with 18 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitattributes vendored
View file

@ -1,3 +1,4 @@
leaflet.js linguist-vendored
leaflet.editable.js linguist-vendored
leaflet.css linguist-vendored
material-icons.css linguist-vendored

20
src/c3nav/site/static/site/css/c3nav.css
View file

@ -104,7 +104,7 @@ main:not([data-view=route-result]) #route-result-buttons{
}
.location {
padding: 6px 10px;
padding: 5px 10px;
height: 55px;
}
.location > * {
@ -135,7 +135,7 @@ main:not([data-view=route-result]) #route-result-buttons{
.locationinput small {
position: absolute;
left: 10px;
top: 31px;
top: 30px;
line-height: 1.1;
opacity: 1;
transition: opacity 150ms;
@ -149,14 +149,13 @@ main:not([data-view=route-result]) #route-result-buttons{
pointer-events: none;
}
.locationinput.selected input {
padding-bottom: 24px;
padding-bottom: 25px;
}
.locationinput button {
.locationinput button, #route-summary button {
position: absolute;
top: 6px;
right: 6px;
padding: 0;
opacity: 0.3;
width: 42px;
height: 42px;
background-size: 42px 42px;
@ -164,13 +163,18 @@ main:not([data-view=route-result]) #route-result-buttons{
background-position: center;
border-width: 0;
transition: transform 150ms, opacity 150ms;
font-size: 42px;
color: #b2b2b2;
}
.locationinput button:hover, #route-summary button:hover {
color: #a2a2a2;
}
.locationinput button.locate {
background-image: url('../img/icons/locate.svg');
background-size: 36px 36px;
font-size: 38px;
top: 7px;
}
.locationinput button.clear, #route-summary button.close {
background-image: url('../img/icons/cross.svg');
}
.locationinput:not(.empty) button.locate, .locationinput.empty button.clear {
transform: scale(0.7);

4
src/c3nav/site/static/site/img/icons/cross.svg
View file

@ -1,4 +0,0 @@
<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 265 B

1
src/c3nav/site/static/site/img/icons/locate.svg
View file

@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M24 16c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm17.88 6c-.92-8.34-7.54-14.96-15.88-15.88v-4.12h-4v4.12c-8.34.92-14.96 7.54-15.88 15.88h-4.12v4h4.12c.92 8.34 7.54 14.96 15.88 15.88v4.12h4v-4.12c8.34-.92 14.96-7.54 15.88-15.88h4.12v-4h-4.12zm-17.88 16c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.27 14-14 14z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 488 B

1
src/c3nav/site/static/site/img/icons/locating.svg
View file

@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0-.17h48v48h-48z" fill="none"/><path d="M41.88 22.17c-.92-8.34-7.54-14.96-15.88-15.88v-4.12h-4v4.12c-8.34.92-14.96 7.54-15.88 15.88h-4.12v4h4.12c.92 8.34 7.54 14.96 15.88 15.88v4.12h4v-4.12c8.34-.92 14.96-7.54 15.88-15.88h4.12v-4h-4.12zm-17.88 16c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.27 14-14 14z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 435 B

1
src/c3nav/site/static/site/img/icons/nolocate.svg
View file

@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0-.17h48v48h-48z" fill="none"/><path d="M41.88 22.17c-.92-8.34-7.54-14.96-15.88-15.88v-4.12h-4v4.12c-2.26.25-4.38.93-6.31 1.94l3 3c1.64-.67 3.43-1.05 5.31-1.05 7.73 0 14 6.27 14 14 0 1.88-.38 3.67-1.05 5.31l3 3c1.01-1.93 1.68-4.05 1.93-6.31h4.12v-4h-4.12zm-35.88-13.45l4.07 4.07c-2.14 2.62-3.57 5.84-3.96 9.38h-4.11v4h4.12c.92 8.34 7.54 14.96 15.88 15.88v4.12h4v-4.12c3.54-.39 6.76-1.82 9.38-3.96l4.08 4.08 2.54-2.54-33.45-33.46-2.55 2.55zm26.53 26.53c-2.36 1.82-5.32 2.92-8.53 2.92-7.73 0-14-6.27-14-14 0-3.22 1.1-6.17 2.92-8.53l19.61 19.61z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 666 B

9
src/c3nav/site/templates/site/map.html
View file

@ -12,6 +12,7 @@
<link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">
<link href="{% static 'milligram/milligram.css' %}" rel="stylesheet">
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
<link href="{% static 'material-icons/material-icons.css' %}" rel="stylesheet">
<link href="{% static 'site/css/c3nav.css' %}" rel="stylesheet">
{% endcompress %}
</head>
@ -32,14 +33,14 @@
<div class="location locationinput empty" id="origin-input">
<input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
<small></small>
<button class="button-clear locate"></button>
<button class="button-clear clear"></button>
<button class="button-clear locate material-icons">my_location</button>
<button class="button-clear clear material-icons">clear</button>
</div>
<div class="location locationinput empty" id="destination-input">
<input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
<small></small>
<button class="button-clear locate"></button>
<button class="button-clear clear"></button>
<button class="button-clear locate material-icons">my_location</button>
<button class="button-clear clear material-icons">clear</button>
</div>
<div class="buttons" id="location-buttons">
<button class="button-clear details">Details</button>