add icons to route descriptions

This commit is contained in:
Laura Klünder 2017-12-11 18:27:48 +01:00
parent 7d5cd85851
commit 3df101d2aa
3 changed files with 31 additions and 10 deletions

View file

@ -53,17 +53,24 @@ class Route:
# descriptions for waytypes
next_item = None
for item in reversed(items):
icon = 'arrow'
if item.waytype:
icon = item.waytype.icon_name or 'arrow'
if item.waytype.join_edges and next_item and next_item.waytype == item.waytype:
continue
if item.waytype.icon_name:
icon = item.waytype.icon_name
if item.waytype.up_separate:
icon += '-up' if item.edge.rise > 0 else '-down'
icon += '.svg'
if item.waytype.up_separate and item.edge.rise > 0:
item.descriptions.append(item.waytype.description_up)
item.descriptions.append((icon, item.waytype.description_up))
else:
item.descriptions.append(item.waytype.description)
item.descriptions.append((icon, item.waytype.description))
elif item.new_space:
pass # todo: custom space transition descriptions
items[-1].descriptions.append(_('You have reached your destination.'))
items[-1].descriptions.append(('done', _('You have reached your destination.')))
return OrderedDict((
('origin', describe_location(self.origin, locations)),

View file

@ -455,12 +455,21 @@ main:not([data-view=route-result]) #route-dots {
position: relative;
}
.routeitem .icon {
color: #7C848A;
position: absolute;
top: 4px;
left: 16px;
left: 12px;
width: 29px;
height: 21px;
text-align: center;
}
.routeitem .icon .material-icons {
color: #7C848A;
font-size: 21px;
}
.routeitem .icon img {
opacity: 0.6;
height: 21px;
}
#popup-buttons, #attributions {
display: none;

View file

@ -285,7 +285,7 @@ c3nav = {
for (var j=0; j < item.descriptions.length; j++) {
description = item.descriptions[j];
$details.append(c3nav._build_route_item('more_vert', description));
$details.append(c3nav._build_route_item(description[0], description[1]));
}
coords = [item.coordinates[0], item.coordinates[1]];
@ -357,9 +357,14 @@ c3nav = {
if (!nofly) c3nav.fly_to_bounds(true);
},
_build_route_item: function (icon, text) {
return $('<div class="routeitem">')
.append($('<i class="icon material-icons">'+icon+'</i>'))
.append($('<span>').text(text));
var elem = $('<div class="routeitem">');
if (icon.indexOf('.') === -1) {
elem.append($('<span class="icon"><i class="material-icons">' + icon + '</i></span>'));
} else {
elem.append($('<span class="icon"><img src="/static/site/img/icons/' + icon + '"></span>'));
}
elem.append($('<span>').text(text));
return elem;
},
_add_intermediate_point: function(origin, destination, next) {
var angle = Math.atan2(destination[1]-next[1], destination[0]-next[0]),
@ -376,7 +381,7 @@ c3nav = {
color: gray ? '#888888': $('button.swap').css('color'),
dashArray: (gray || link_to_level) ? '7' : null,
interactive: false
}).addTo(routeLayer),
}).addTo(routeLayer)
bounds = {};
bounds[level] = line.getBounds();