add icons and more css logic to ui

src/c3nav/site/static/site/css/c3nav.css

@@ -65,23 +65,27 @@ main.map {
 #sidebar section > * {
     border: 0 #dddddd solid;
     border-top-width: 1px;
-    transition: height 200ms;
+    transition: height 300ms;
     overflow: hidden;
 }
 #sidebar section > :first-child {
     margin-top: -1px;
 }
-#sidebar section > *.hidden {
+#search:not(.location-view) #location-buttons,
+#search:not(.route-view) #origin-input,
+#search:not(.route-view) #route-buttons {
     margin-top: 0;
     height: 0;
     margin-bottom: -1px;
+    pointer-events: none;
 }
+#sidebar section > #route-buttons {
+    border-color: transparent !important;
+}
+
 #search {
     margin-bottom: 10px;
 }
-#search input {
-    margin: 0;
-}
 
 .location {
     padding: 6px 10px;
@@ -124,6 +128,32 @@ main.map {
 .locationinput.selected input {
     padding-bottom: 24px;
 }
+.locationinput button {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    padding: 0;
+    opacity: 0.3;
+    width: 42px;
+    height: 42px;
+    background-size: 42px 42px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-width: 0;
+    transition: transform 150ms, opacity 150ms;
+}
+.locationinput button.locate {
+    background-image: url('../img/icons/locate.svg');
+    background-size: 36px 36px;
+}
+.locationinput button.reset {
+    background-image: url('../img/icons/cross.svg');
+}
+.locationinput.selected button.locate, .locationinput:not(.selected) button.reset {
+    transform: scale(0.7);
+    opacity: 0;
+    pointer-events:none;
+}
 
 .buttons {
     display: flex;

src/c3nav/site/static/site/js/c3nav.js

@@ -34,7 +34,6 @@ c3nav = {
         c3nav._levelControl.finalize();
         c3nav._levelControl.setLevel(c3nav.levels[0][0]);
 
-
         window.setTimeout(c3nav.refresh_tile_access, 16000);
     },
     refresh_tile_access: function () {

src/c3nav/site/templates/site/map.html

@@ -22,28 +22,31 @@
         <h1>c3nav</h1>
     </header>
     <main class="map">
-        <section id="map" data-bounds="{{ bounds }}" data-levels="{{ levels }}">
+        <section id="map" data-bounds="{{ bounds }}" data-levels="{{ levels }}"></section>
-
-        </section>
         <section id="sidebar">
             <section id="search">
                 <div class="location locationinput" id="origin-input">
                     <input type="text" placeholder="{% trans 'Search any location…' %}">
                     <small>Lecture Hall</small>
+                    <button class="button-clear locate"></button>
+                    <button class="button-clear reset"></button>
                 </div>
                 <div class="location locationinput" id="destination-input">
                     <input type="text" placeholder="{% trans 'Search any location…' %}">
                     <small>Lecture Hall</small>
+                    <button class="button-clear locate"></button>
+                    <button class="button-clear reset"></button>
                 </div>
-                <div class="buttons" id="search-buttons">
+                <!--<div class="buttons" id="search-buttons">
                     <button class="button-clear">Scan QR Code</button>
                     <button class="button-clear">Locate</button>
-                </div>
+                </div>-->
-                <div class="buttons hidden" id="location-buttons">
+                <div class="buttons" id="location-buttons">
-                    <button class="button-clear">Share</button>
                     <button class="button-clear">Details</button>
+                    <button class="button-clear">Share</button>
+                    <button class="button-clear">Route</button>
                 </div>
-                <div class="buttons hidden" id="route-buttons">
+                <div class="buttons" id="route-buttons">
                     <button class="button-clear">swap</button>
                     <button class="button-clear">Options</button>
                 </div>