From 08ecc2be9ff8c8e8f86958044e04c075b93de5c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Wed, 15 Nov 2017 12:10:11 +0100
Subject: [PATCH] replace svg icons with google material icons font

---
 .gitattributes                                |  1 +
 src/c3nav/site/static/site/css/c3nav.css      | 20 +++++++++++--------
 .../site/static/site/img/icons/cross.svg      |  4 ----
 .../site/static/site/img/icons/locate.svg     |  1 -
 .../site/static/site/img/icons/locating.svg   |  1 -
 .../site/static/site/img/icons/nolocate.svg   |  1 -
 src/c3nav/site/templates/site/map.html        |  9 +++++----
 7 files changed, 18 insertions(+), 19 deletions(-)
 delete mode 100644 src/c3nav/site/static/site/img/icons/cross.svg
 delete mode 100644 src/c3nav/site/static/site/img/icons/locate.svg
 delete mode 100644 src/c3nav/site/static/site/img/icons/locating.svg
 delete mode 100644 src/c3nav/site/static/site/img/icons/nolocate.svg

diff --git a/.gitattributes b/.gitattributes
index 4b4ca9fe..bc3b3b2b 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,4 @@
 leaflet.js linguist-vendored
 leaflet.editable.js linguist-vendored
 leaflet.css linguist-vendored
+material-icons.css linguist-vendored
diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css
index f7641884..760ed0ef 100644
--- a/src/c3nav/site/static/site/css/c3nav.css
+++ b/src/c3nav/site/static/site/css/c3nav.css
@@ -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);
diff --git a/src/c3nav/site/static/site/img/icons/cross.svg b/src/c3nav/site/static/site/img/icons/cross.svg
deleted file mode 100644
index 6716ee0d..00000000
--- a/src/c3nav/site/static/site/img/icons/cross.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/c3nav/site/static/site/img/icons/locate.svg b/src/c3nav/site/static/site/img/icons/locate.svg
deleted file mode 100644
index 13f00462..00000000
--- a/src/c3nav/site/static/site/img/icons/locate.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/c3nav/site/static/site/img/icons/locating.svg b/src/c3nav/site/static/site/img/icons/locating.svg
deleted file mode 100644
index 78e42a64..00000000
--- a/src/c3nav/site/static/site/img/icons/locating.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/c3nav/site/static/site/img/icons/nolocate.svg b/src/c3nav/site/static/site/img/icons/nolocate.svg
deleted file mode 100644
index 4b8bdbce..00000000
--- a/src/c3nav/site/static/site/img/icons/nolocate.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/c3nav/site/templates/site/map.html b/src/c3nav/site/templates/site/map.html
index 2879794e..f69bba65 100644
--- a/src/c3nav/site/templates/site/map.html
+++ b/src/c3nav/site/templates/site/map.html
@@ -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>