Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

made html + css look better

Browse Source
This commit is contained in:
shiin 2012-05-12 08:22:21 +02:00
parent 14ca66459a
commit f90d1db802
6 changed files with 187 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
WebContent/gui/OSRM.MainGUI.js
View File

@ -62,7 +62,7 @@ setLabels: function() {
document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE"); document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE");
document.getElementById("gui-mapping-label").innerHTML = OSRM.loc("GUI_MAPPING_TOOLS"); document.getElementById("gui-mapping-label").innerHTML = OSRM.loc("GUI_MAPPING_TOOLS");
document.getElementById("gui-config-label").innerHTML = OSRM.loc("GUI_CONFIGURATION"); document.getElementById("gui-config-label").innerHTML = OSRM.loc("GUI_CONFIGURATION");
document.getElementById("gui-language-label").innerHTML = OSRM.loc("GUI_LANGUAGE")+":"; document.getElementById("gui-language-2-label").innerHTML = OSRM.loc("GUI_LANGUAGE")+":";
document.getElementById("gui-units-label").innerHTML = OSRM.loc("GUI_UNITS")+":"; document.getElementById("gui-units-label").innerHTML = OSRM.loc("GUI_UNITS")+":";
document.getElementById("gui-units-toggle").getElementsByTagName("option")[0].innerHTML = OSRM.loc("GUI_KILOMETERS"); document.getElementById("gui-units-toggle").getElementsByTagName("option")[0].innerHTML = OSRM.loc("GUI_KILOMETERS");

4
WebContent/gui/OSRM.Selector.js
View File

@ -25,7 +25,7 @@ OSRM.GUI.extend( {
selectorInit: function(id, options, selected, onchange_fct) { selectorInit: function(id, options, selected, onchange_fct) {
// create dropdown menu // create dropdown menu
var select = document.getElementById(id); var select = document.getElementById(id);
select.className = "styled-select-helper base-font"; select.className += " styled-select-helper base-font";
select.onchange = function() { OSRM.GUI.selectorOnChange(this); onchange_fct(this.value); }; select.onchange = function() { OSRM.GUI.selectorOnChange(this); onchange_fct(this.value); };
// fill dropdown menu // fill dropdown menu
@ -44,7 +44,7 @@ selectorInit: function(id, options, selected, onchange_fct) {
myspan.id = "styled-select-" + select.id; myspan.id = "styled-select-" + select.id;
myspan.appendChild(textnode); myspan.appendChild(textnode);
select.parentNode.insertBefore(myspan, select); select.parentNode.insertBefore(myspan, select);
myspan.style.width = (select.clientWidth)+"px"; myspan.style.width = (select.clientWidth-2)+"px";
myspan.style.height = (select.clientHeight)+"px"; myspan.style.height = (select.clientHeight)+"px";
}, },

4
WebContent/localization/OSRM.Localization.js
View File

@ -43,7 +43,7 @@ init: function() {
// generate selectors // generate selectors
OSRM.GUI.selectorInit("gui-language-toggle", options, selected, OSRM.Localization.setLanguage); OSRM.GUI.selectorInit("gui-language-toggle", options, selected, OSRM.Localization.setLanguage);
OSRM.GUI.selectorInit("gui-language-toggle-2", options_2, selected, OSRM.Localization.setLanguage); OSRM.GUI.selectorInit("gui-language-2-toggle", options_2, selected, OSRM.Localization.setLanguage);
// set default language // set default language
OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE ); OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );
@ -51,7 +51,7 @@ init: function() {
setLanguage: function(language) { setLanguage: function(language) {
// change value of both language selectors // change value of both language selectors
OSRM.GUI.selectorChange( document.getElementById('gui-language-toggle'), language ); OSRM.GUI.selectorChange( document.getElementById('gui-language-toggle'), language );
OSRM.GUI.selectorChange( document.getElementById('gui-language-toggle-2'), language ); OSRM.GUI.selectorChange( document.getElementById('gui-language-2-toggle'), language );
if( OSRM.Localization[language]) { if( OSRM.Localization[language]) {
OSRM.Localization.current_language = language; OSRM.Localization.current_language = language;

267
WebContent/main.css
View File

@ -17,6 +17,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
/* OSRM CSS styles */ /* OSRM CSS styles */
/* ------------------------------------------------------------------------ */
/* fullscreen map */ /* fullscreen map */
html, body { html, body {
@ -30,6 +31,7 @@ html, body {
z-index: 0; z-index: 0;
} }
/* ------------------------------------------------------------------------ */
/* general styles for gui boxes */ /* general styles for gui boxes */
.box-wrapper .box-wrapper
@ -106,7 +108,21 @@ html, body {
} }
/* styles for specific gui boxes */ /* general styles for gui box headers */
.top-left-button
{
float:left;
vertical-align:top;
}
.top-right-button
{
float:right;
vertical-align:top;
}
/* ------------------------------------------------------------------------ */
/* styles for main gui boxes */
#main-wrapper #main-wrapper
{ {
width:410px; width:410px;
@ -125,30 +141,6 @@ html, body {
top:160px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */ top:160px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
bottom:0px; bottom:0px;
} }
#mapping-wrapper
{
width:410px;
height:100px;
bottom:25px;
right:5px;
}
#mapping-content
{
width:390px;
height:80px;
}
#config-wrapper
{
width:410px;
height:100px;
bottom:25px;
right:5px;
}
#config-content
{
width:390px;
height:80px;
}
/* styles for main-input areas */ /* styles for main-input areas */
@ -174,16 +166,7 @@ html, body {
/* styles for main-input input-mask-header */ /* styles for main-input input-mask-header */
#gui-language-toggle #gui-language-toggle
{ {
position:relative; position:absolute;
}
.top-left-button
{
float:left;
}
.top-right-button
{
float:right;
} }
@ -251,29 +234,7 @@ html, body {
} }
/* workaround for invisible scrollbars in Chrome */ /* styles for main-output information-box-header */
#information-box::-webkit-scrollbar {
height: 10px;
width: 10px;
}
#information-box::-webkit-scrollbar-track {
background: #FFFFFF;
}
#information-box::-webkit-scrollbar-thumb {
min-height: 30px;
background: #EEEEEE;
border: 1px solid #999999;
-webkit-border-radius: 5ex;
}
#information-box::-webkit-scrollbar-thumb:hover {
background: #F9F9F9;
}
#information-box::-webkit-scrollbar-thumb:active {
background: #F4F4F4;
}
/* styles for information-box-header */
.header-title .header-title
{ {
font-weight:bold; font-weight:bold;
@ -300,7 +261,29 @@ html, body {
} }
/* style for information-box table (general) */ /* styles for main-output information-box -> workaround for invisible scrollbars in Chrome */
#information-box::-webkit-scrollbar {
height: 10px;
width: 10px;
}
#information-box::-webkit-scrollbar-track {
background: #FFFFFF;
}
#information-box::-webkit-scrollbar-thumb {
min-height: 30px;
background: #EEEEEE;
border: 1px solid #999999;
-webkit-border-radius: 5ex;
}
#information-box::-webkit-scrollbar-thumb:hover {
background: #F9F9F9;
}
#information-box::-webkit-scrollbar-thumb:active {
background: #F4F4F4;
}
/* style for main-output information-box -> table (general) */
.no-results .no-results
{ {
text-align:center; text-align:center;
@ -308,7 +291,7 @@ html, body {
} }
/* style for information-box table (search results) */ /* style for main-output information-box -> table (search results) */
.results .results
{ {
border-spacing:0px; border-spacing:0px;
@ -347,7 +330,7 @@ html, body {
} }
/* style for information-box table (driving directions) */ /* style for main-output information-box -> table (driving directions) */
.description .description
{ {
border-spacing:0px; border-spacing:0px;
@ -396,9 +379,37 @@ html, body {
color:#ff0000 color:#ff0000
} }
/* ------------------------------------------------------------------------ */
/* styles for config and mapping boxes */ /* styles for other gui boxes */
#gui-language-toggle-2 #mapping-wrapper
{
width:410px;
height:100px;
bottom:25px;
right:5px;
}
#mapping-content
{
width:390px;
height:80px;
}
#config-wrapper
{
width:410px;
height:100px;
bottom:25px;
right:5px;
}
#config-content
{
width:390px;
height:80px;
}
/* styles for content of other gui boxes */
#gui-language-2-toggle
{ {
position:relative; position:relative;
} }
@ -406,21 +417,31 @@ html, body {
{ {
position:relative; position:relative;
} }
.config-select .box-label
{
width:100px;
}
.label
{ {
font-weight:bold; font-weight:bold;
margin-bottom:10px; margin-bottom:10px;
} }
.inner-label .config-label
{ {
padding:0px 20px 0px 5px; margin: 0px 0px 0px 5px;
}
.config-select
{
width:100px;
}
.mapping-checkbox
{
margin: 0px 5px 3px 5px;
}
.mapping-button
{
float: right;
} }
/* ------------------------------------------------------------------------ */
/* buttons */ /* buttons */
.button .button
{ {
@ -465,30 +486,39 @@ html, body {
} }
/* fonts */ /* styled select */
.base-font { .styled-select-helper
font-family: Verdana, Arial, Helvetica, sans-serif; {
font-size: 12px; border: 0px;
font-weight: normal; text-decoration:none;
opacity: 0;
filter: alpha(opacity=0);
z-index: 5;
cursor:pointer;
} }
.big-font { .styled-select
font-family: Verdana, Arial, Helvetica, sans-serif; {
font-size: 14px; position:absolute;
font-weight: bold; background-repeat:no-repeat;
} background-position: top right;
.medium-font { padding: 1px 1px 1px 1px;
font-family: Verdana, Arial, Helvetica, sans-serif; overflow: hidden;
font-size: 10.5px;
font-weight: normal;
}
.small-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
} }
/* utility styles (defined above buttons, so that buttons retain cursor:pointer)*/ /* checkboxes */
input[type=checkbox],
{
cursor:pointer;
}
.checkbox-label
{
vertical-align:2px;
}
/* ------------------------------------------------------------------------ */
/* utility styles */
.quad .quad
{ {
min-width:10px; min-width:10px;
@ -512,34 +542,7 @@ html, body {
user-select: text; user-select: text;
} }
.checkbox-label /* ------------------------------------------------------------------------ */
{
vertical-align:2px;
}
.styled-select-helper
{
border: 0px;
text-decoration:none;
opacity: 0;
filter: alpha(opacity=0);
z-index: 5;
}
.styled-select
{
position:absolute;
background-repeat:no-repeat;
background-position: top right;
padding: 1px 1px 1px 1px;
overflow: hidden;
}
input[type=checkbox],
select
{
cursor:pointer;
}
/* table styles */ /* table styles */
.full .full
@ -573,3 +576,31 @@ select
{ {
width:100%; width:100%;
} }
.fixed
{
min-width:100px;
}
/* ------------------------------------------------------------------------ */
/* fonts */
.base-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.big-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.medium-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
font-weight: normal;
}
.small-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
}

67
WebContent/main.html
View File

@ -81,55 +81,49 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- body --> <!-- body -->
<body class="base-font not-selectable"> <body class="base-font not-selectable">
<!--map--> <!-- map -->
<div id="map"></div> <div id="map"></div>
<!-- config gui --> <!-- config gui -->
<div id="config-wrapper" class="box-wrapper not-selectable"> <div id="config-wrapper" class="box-wrapper not-selectable">
<div id="config-content" class="box-content"> <div id="config-content" class="box-content">
<!-- header -->
<div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div>
<div id="gui-config-label" class="box-label">Configuraion</div>
<div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div> <!-- config options -->
<div id="gui-config-label" class="label">Configuraion</div> <div class="full">
<div class="full"> <div class="row">
<div class="row"> <div class="left fixed"><span id="gui-language-2-label" class="config-label">Language:</span></div>
<div id="gui-language-label" class="left inner-label">Language:</div> <div class="left stretch"><select id="gui-language-2-toggle" class="config-select"></select></div>
<div id="gui-language-area" class="left stretch"><select id="gui-language-toggle-2" class="config-select"></select></div></div> </div>
<div class="row"> <div class="row">
<div id="gui-units-label" class="left inner-label">Units:</div> <div class="left fixed"><span id="gui-units-label" class="config-label">Units:</span></div>
<div id="gui-units-area" class="left stretch"><select id="gui-units-toggle" class="config-select"></select></div> <div class="left stretch"><select id="gui-units-toggle" class="config-select"></select></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- mapping gui --> <!-- mapping gui -->
<div id="mapping-wrapper" class="box-wrapper not-selectable"> <div id="mapping-wrapper" class="box-wrapper not-selectable">
<div id="mapping-content" class="box-content"> <div id="mapping-content" class="box-content">
<!-- header -->
<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
<div id="gui-mapping-label" class="box-label">Mapping Tools</div>
<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div> <!-- header -->
<div id="gui-mapping-label" class="label">Mapping Tools</div> <div class="full">
<div class="full"> <div class="row">
<div class="row"> <div class="left"><input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" class="mapping-checkbox"/></div>
<div class="left"> <div class="left stretch"><span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span></div>
<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames"/> </div>
<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span> <div class="row">
</div> <div class="left"><input type="checkbox" id="option-show-previous-routes" value="show-previous-routes" class="mapping-checkbox"/></div>
</div> <div class="left stretch"><span id="gui-option-show-previous-routes-label" class="checkbox-label small-font">Show previous routes</span></div>
<div class="row"> </div>
<div class="left"> </div>
<input type="checkbox" id="option-show-previous-routes" value="show-previous-routes"/> <a class="button mapping-button" id="open-osmbugs">OSM Bugs</a><span class="quad mapping-button"></span><a class="button mapping-button" id="open-josm">JOSM</a>
<span id="gui-option-show-previous-routes-label" class="checkbox-label small-font">Show previous routes</span>
</div>
</div>
<div class="row" style="max-height:14px;">
<div class="right" style="max-height:14px;">
<a class="button" id="open-josm">JOSM</a>
<a class="button" id="open-osmbugs">OSM Bugs</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -181,5 +175,6 @@ or see http://www.gnu.org/licenses/agpl.txt.
</div> </div>
</div> </div>
</body> </body>
</html> </html>

5
WebContent/printing/printing.css
View File

@ -32,13 +32,10 @@ body
top:0px; top:0px;
height:20px; height:20px;
} }
.top-left-button
{
float:left;
}
.top-right-button .top-right-button
{ {
float:right; float:right;
vertical-align:top;
} }