diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css
index 65f7e118..19df423e 100644
--- a/src/c3nav/site/static/site/css/c3nav.css
+++ b/src/c3nav/site/static/site/css/c3nav.css
@@ -49,7 +49,7 @@ main.map {
position: absolute;
z-index: 2;
top: 0;
- padding: 10px 10px 26px;
+ padding: 10px 10px 16px;
width: 100%;
bottom: 0;
max-width: 420px;
@@ -64,6 +64,8 @@ main.map {
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 2px;
overflow: hidden;
+ margin-bottom: 10px;
+ flex-shrink: 0;
}
#sidebar section > * {
border: 0 #dddddd solid;
@@ -74,13 +76,30 @@ main.map {
#sidebar section > :first-child {
margin-top: -1px;
}
-#search:not(.route-view) #origin-input {
+
+#search {
+ z-index: 4;
+/* height: 54px;
+ transition: height 150ms;
+}
+main[data-view=location] #search {
+ height: 87px;
+}
+main[data-view=route-search] #search {
+ height: 142px;
+}
+main[data-view=route-result] #search {
+ height: 109px;*/
+}
+
+
+main:not([data-view^=route]) #origin-input {
margin-bottom: -55px;
pointer-events: none;
opacity: 0;
}
-#search:not(.location-view) #location-buttons,
-#search:not(.route-view) #route-buttons {
+main:not([data-view=location]) #location-buttons,
+main:not([data-view=route-search]) #route-search-buttons {
margin-bottom: -3.3rem;
pointer-events: none;
opacity: 0;
@@ -93,11 +112,6 @@ main.map {
overflow: auto;
}
-#search {
- margin-bottom: 10px;
- flex-shrink: 0;
-}
-
.location {
padding: 6px 10px;
height: 55px;
@@ -146,7 +160,7 @@ main.map {
.locationinput.selected input {
padding-bottom: 24px;
}
-.locationinput button {
+.locationinput button, #route-summary button {
position: absolute;
top: 6px;
right: 6px;
@@ -164,7 +178,7 @@ main.map {
background-image: url('../img/icons/locate.svg');
background-size: 36px 36px;
}
-.locationinput button.clear {
+.locationinput button.clear, #route-summary button.close {
background-image: url('../img/icons/cross.svg');
}
.locationinput:not(.empty) button.locate, .locationinput.empty button.clear {
@@ -195,6 +209,31 @@ main.map {
background-color: #eeeeee;
}
+#route-header {
+ transition: margin-top 150ms, opacity 150ms;
+ z-index: 3;
+}
+main:not([data-view=route-result]) #route-header {
+ margin-top: -97px;
+ opacity: 0;
+ pointer-events: none;
+}
+
+#route-summary {
+ height: 55px;
+ padding: 6px 10px;
+ position: relative;
+}
+#route-summary > * {
+ display: block;
+ white-space: nowrap;
+}
+#route-summary > small {
+ display: block;
+ white-space: nowrap;
+ line-height: 1.1;
+}
+
/* leaftlet levels control */
.leaflet-control-levels a, .leaflet-control-levels a:hover {
width: auto;
diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index 533a0be3..0ce7a659 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -12,17 +12,22 @@ c3nav = {
},
init_sidebar: function () {
+ c3nav._set_view('search');
c3nav.init_locationinputs();
$('#location-buttons').find('.route').on('click', c3nav._location_buttons_route_click);
- $('#route-buttons').find('.swap').on('click', c3nav._route_buttons_swap_click);
+ $('#route-search-buttons, #route-result-buttons').find('.swap').on('click', c3nav._route_buttons_swap_click);
+ $('#route-search-buttons, #route-summary').find('.close').on('click', c3nav._route_buttons_close_click);
+ },
+ _set_view: function(view) {
+ c3nav._view = view;
+ $('main').attr('data-view', view);
},
_location_buttons_route_click: function () {
- $('#search').removeClass('location-view').addClass('route-view');
+ c3nav._set_view('route-search');
},
_route_buttons_swap_click: function () {
- var $search = $('#search'),
- $origin = $('#origin-input'),
+ var $origin = $('#origin-input'),
$destination = $('#destination-input');
tmp = $origin.data('location');
c3nav._locationinput_set($origin, $destination.data('location'));
@@ -30,6 +35,15 @@ c3nav = {
$origin.stop().css('top', '55px').animate({top: 0}, 150);
$destination.stop().css('top', '-55px').animate({top: 0}, 150);
},
+ _route_buttons_close_click: function () {
+ var $origin = $('#origin-input'),
+ $destination = $('#destination-input');
+ if ($origin.is('.selected') && !$destination.is('.selected')) {
+ c3nav._locationinput_set($destination, $origin.data('location'));
+ }
+ c3nav._locationinput_set($origin, null);
+ c3nav._set_view($destination.is('.selected') ? 'location' : 'search');
+ },
init_locationinputs: function () {
c3nav.locations = [];
@@ -68,12 +82,27 @@ c3nav = {
elem.find('input').val(title).data('origval', null);
elem.find('small').text(subtitle);
- if (elem.attr('id') === 'destination-input') {
- if (location === null) {
- $search.removeClass('location-view');
- } else if (!$search.is('.location-view, .route-view')) {
- $search.addClass('location-view');
- }
+ switch(c3nav._view) {
+ case 'search':
+ if (elem.attr('id') === 'destination-input' && location !== null) {
+ c3nav._set_view('location');
+ }
+ break;
+ case 'location':
+ if (elem.attr('id') === 'destination-input' && location === null) {
+ c3nav._set_view('search');
+ }
+ break;
+ case 'route-search':
+ if (location !== null && $('#origin-input').is('.selected') && $('#destination-input').is('.selected')) {
+ c3nav._set_view('route-result');
+ }
+ break;
+ case 'route-result':
+ if (location === null) {
+ c3nav._set_view('route-search');
+ }
+ break;
}
c3nav.update_map_locations();
if (location !== null) {
@@ -204,12 +233,19 @@ c3nav = {
$parent.toggleClass('empty', val === '');
if ($parent.is('.selected')) {
$parent.removeClass('selected').data('location', null);
- }
-
- if ($parent.attr('id') === 'destination-input') {
- $('#search').removeClass('location-view');
+ switch(c3nav._view) {
+ case 'location':
+ if ($parent.attr('id') === 'destination-input') {
+ c3nav._set_view('search');
+ }
+ break;
+ case 'route-result':
+ c3nav._set_view('route-search');
+ break;
+ }
c3nav.update_map_locations();
}
+
$autocomplete.find('.focus').removeClass('focus');
c3nav.current_locationinput = $parent.attr('id');
diff --git a/src/c3nav/site/templates/site/map.html b/src/c3nav/site/templates/site/map.html
index a47c7b91..e11cafcd 100644
--- a/src/c3nav/site/templates/site/map.html
+++ b/src/c3nav/site/templates/site/map.html
@@ -42,8 +42,20 @@
-