From c6e8775dbab81daf9515fe94fa0ed4c51cab5f3b Mon Sep 17 00:00:00 2001
From: Richard Fairhurst <richard@systemeD.net>
Date: Tue, 21 Jan 2014 20:42:31 +0000
Subject: [PATCH] Presentation of directions

---
 app/assets/javascripts/routing.js.erb  | 10 +++++++++-
 app/assets/stylesheets/common.css.scss | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index 1f50fa480..ee76fb14f 100644
--- 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 5166c7a31..93b8f0d07 100644
--- 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 {
-- 
2.39.5