Presentation of directions

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index 1f50fa480f44a193bbf7ad6ce95d2a75f242e338..ee76fb14f41444ef5ad0bfc07973955a296345ee 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -106,10 +106,18 @@ OSM.Routing=function(map,name,jqSearch) {
                        instText+=TURN_INSTRUCTIONS[instCodes[0]];
                        if (instCodes[1]) { instText+="exit "+instCodes[1]+" "; }
                        if (instCodes[0]!=15) { instText+=step[1] ? "<b>"+step[1]+"</b>" : "(unnamed)"; }
+                       // Distance
+                       var dist=step[2];
+                       if (dist<5) { dist=""; }
+                       else if (dist<200) { dist=Math.round(dist/10)*10+"m"; }
+                       else if (dist<1500) { dist=Math.round(dist/100)*100+"m"; }
+                       else if (dist<5000) { dist=Math.round(dist/100)/10+"km"; }
+                       else { dist=Math.round(dist/1000)+"km"; }
                        // Add to table
                        html+="<tr>";
                        html+="<td class='direction i"+instCodes[0]+"'> ";
-                       html+="<td>"+instText;
+                       html+="<td class='instruction'>"+instText;
+                       html+="<td class='distance'>"+dist;
                }
                html+="</table>";
         $('#sidebar_content').html(html);

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 5166c7a31c5fbf0f74ad29e79222028c931394e4..93b8f0d079082c9fff84687935a31374f0da73de 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -996,7 +996,9 @@ header .search_form {
 /* Rules for routing */
 
 #sidebar_content>table {
-    margin: 20px 0px 10px 15px;
+    padding: 5px 20px 10px 15px;
+    width: 100%;
+    border-collapse: separate;
 }
 
 td.direction {
@@ -1008,6 +1010,16 @@ td.direction {
 td.direction.i#{$i}  { background-position: #{($i)*-20+20}px 0px; }
 }
 
+td.instruction, td.distance {
+    padding-top: 0;
+    border-bottom: 1px solid #DDD;
+}
+td.distance {
+    color: #BBB;
+    text-align: right;
+    font-size: x-small;
+}
+
 /* Rules for entity history */
 
 #sidebar_content {