From 351f34e58434a37f14c93a8dda1f4b79a4502e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Wed, 21 Dec 2016 04:05:06 +0100
Subject: [PATCH] improve map selector

---
 src/c3nav/site/static/site/css/c3nav.css           | 14 ++++++++++++--
 src/c3nav/site/static/site/js/c3nav.js             |  4 ++++
 .../site/templates/site/fragment_location.html     |  5 ++---
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css
index 3f1bedd4..0851045c 100644
--- a/src/c3nav/site/static/site/css/c3nav.css
+++ b/src/c3nav/site/static/site/css/c3nav.css
@@ -10,7 +10,6 @@ body, .btn {
     display:none
 }
 
-
 .locationselect .input-lg {
     height: 62px;
 }
@@ -68,7 +67,7 @@ body, .btn {
 .locationselect-map .map-container {
     width:100%;
     overflow:auto;
-    height:200px;
+    height:300px;
     position:relative;
 }
 .locationselect-map .map-container img, .locationselect-map .map-container input {
@@ -81,6 +80,9 @@ body, .btn {
     top:8px;
     left:8px;
 }
+.locationselect-map .close-map {
+    margin-left:8px;
+}
 .locationselect-map .scroll-hint {
     color:#FFFFFF;
     position:absolute;
@@ -254,3 +256,11 @@ circle.pos {
     vertical-align:middle;
     line-height: 1.42857143;
 }
+
+
+.locationselect-selected.loading .location,
+.locationselect-map .map-container {
+    background-image:url('/static/img/loader.gif');
+    background-repeat:no-repeat;
+    background-position:center;
+}
diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index cfeee0c8..01edf2a5 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -74,6 +74,8 @@ c3nav = {
         var location_group = $(this).closest('.location-group');
         var map_container = location_group.find('.map-container');
         var level = $(this).attr('data-level');
+        $(this).siblings().removeClass('active');
+        $(this).addClass('active');
         map_container.find('img').remove();
         map_container.append($('<img>').attr({
             'src': '/map/'+level+'.png',
@@ -91,9 +93,11 @@ c3nav = {
         selected.find('.title').text('');
         selected.find('.subtitle').text('');
         selected.find('.id-field').val(coords);
+        selected.addClass('loading');
         $.getJSON('/api/locations/'+coords, function(data) {
             selected.find('.title').text(data.title);
             selected.find('.subtitle').text(data.subtitle);
+            selected.removeClass('loading');
         });
         c3nav._locations_changed();
         c3nav.locationselect_focus();
diff --git a/src/c3nav/site/templates/site/fragment_location.html b/src/c3nav/site/templates/site/fragment_location.html
index 86badd64..78388f05 100644
--- a/src/c3nav/site/templates/site/fragment_location.html
+++ b/src/c3nav/site/templates/site/fragment_location.html
@@ -38,10 +38,9 @@
                 <div class="map-buttons">
                     <div class="btn-group level-selector" role="group">
                         {% for level in levels %}
-                            <a href="?map-level={{ level }}" data-level="{{ level }}" class="btn btn-default{% if level == map_level %} active{% endif %}">{{ level }}</a>
+                            <a href="?map-level={{ level }}" data-level="{{ level }}" class="btn btn-sm btn-default{% if level == map_level %} active{% endif %}">{{ level }}</a>
                         {% endfor %}
-                    </div>
-                    <a href="?" class="btn btn-default close-map">{% trans 'close' %}</a>
+                    </div><a href="?" class="btn btn-sm btn-default close-map">{% trans 'close' %}</a>
                 </div>
                 <span class="help-block">{% trans 'Click or tap the desired location on the map.' %}</span>
             </div>