save views in <main> and add route-result view and route-header
This commit is contained in:
Laura Klünder
parent
284cbb15c2
commit
e74811122d
3 changed files with 114 additions and 27 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -42,8 +42,20 @@
|
|||
<button class="button-clear share">Share</button>
|
||||
<button class="button-clear route">Route</button>
|
||||
</div>
|
||||
<div class="buttons" id="route-buttons">
|
||||
<button class="button-clear swap">swap</button>
|
||||
<div class="buttons" id="route-search-buttons">
|
||||
<button class="button-clear swap">Swap</button>
|
||||
<button class="button-clear close">Close</button>
|
||||
</div>
|
||||
</section>
|
||||
<section id="route-header">
|
||||
<div id="route-summary">
|
||||
<span><strong>10min</strong> (100m)… sorry no routing yet</span>
|
||||
<small><em>default options</em></small>
|
||||
<button class="button-clear close"></button>
|
||||
</div>
|
||||
<div class="buttons" id="route-result-buttons">
|
||||
<button class="button-clear swap">Return</button>
|
||||
<button class="button-clear options">Share</button>
|
||||
<button class="button-clear options">Options</button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue