beginning to restructure routing header area

This commit is contained in:
DennisSchiefer 2012-04-24 09:38:20 +01:00
parent cd3005f9fe
commit 253df58fdb
2 changed files with 35 additions and 21 deletions

View File

@ -475,6 +475,10 @@ html, body {
display:table; display:table;
width:100%; width:100%;
} }
.row
{
display:table-row;
}
.left .left
{ {
display:table-cell; display:table-cell;

View File

@ -96,14 +96,16 @@ show: function(response) {
// create header // create header
header = header =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' + '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' + '<div class="full">' +
'<div class="left">' + '<div class="row">' +
'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' + '<div class="left header-content">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' + '<div class="left header-content">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'</div>' + '<div class="right header-content" id="route-link">' + route_link + '</div>' +
'<div class="right">' + '</div>' +
'<div id="route-link" class="header-content">' + route_link + '</div>' + '<div class="row">' +
'<div class="header-content">' + gpx_link + '</div>' + '<div class="left header-content">' + OSRM.loc("DURATION")+":" + '</div>' +
'<div class="left header-content">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'<div class="right header-content">' + gpx_link + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
@ -114,16 +116,20 @@ show: function(response) {
// simple description // simple description
showSimple: function(response) { showSimple: function(response) {
header = header =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' + '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' + '<div class="full">' +
'<div class="left">' + '<div class="row">' +
'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' + '<div class="left header-content">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' + '<div class="left header-content">' + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'<div class="right header-content" id="route-link"></div>' +
'</div>' + '</div>' +
'<div class="right">' + '<div class="row">' +
'</div>' + '<div class="left header-content">' + OSRM.loc("DURATION")+":" + '</div>' +
'</div>'; '<div class="left header-content">' + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'<div class="right header-content"></div>' +
'</div>' +
'</div>';
// update DOM // update DOM
document.getElementById('information-box-header').innerHTML = header; document.getElementById('information-box-header').innerHTML = header;
@ -132,15 +138,19 @@ showSimple: function(response) {
// no description // no description
showNA: function( display_text ) { showNA: function( display_text ) {
header = header =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' + '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' + '<div class="full">' +
'<div class="left">' + '<div class="row">' +
'<div class="header-content">' + OSRM.loc("DISTANCE")+": N/A" + '</div>' + '<div class="left header-content">' + OSRM.loc("DISTANCE")+":" + '</div>' +
'<div class="header-content">' + OSRM.loc("DURATION")+": N/A" + '</div>' + '<div class="left header-content">' + "N/A" + '</div>' +
'<div class="right header-content" id="route-link"></div>' +
'</div>' +
'<div class="row">' +
'<div class="left header-content">' + OSRM.loc("DURATION")+":" + '</div>' +
'<div class="left header-content">' + "N/A" + '</div>' +
'<div class="right header-content"></div>' +
'</div>' + '</div>' +
'<div class="right">' +
'</div>' +
'</div>'; '</div>';
// update DOM // update DOM