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("gui-mapping-label").innerHTML = OSRM.loc("GUI_MAPPING_TOOLS");
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-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) {
// create dropdown menu
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); };
// fill dropdown menu
@ -44,7 +44,7 @@ selectorInit: function(id, options, selected, onchange_fct) {
myspan.id = "styled-select-" + select.id;
myspan.appendChild(textnode);
select.parentNode.insertBefore(myspan, select);
myspan.style.width = (select.clientWidth)+"px";
myspan.style.width = (select.clientWidth-2)+"px";
myspan.style.height = (select.clientHeight)+"px";
},

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

@ -43,7 +43,7 @@ init: function() {
// generate selectors
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
OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );
@ -51,7 +51,7 @@ init: function() {
setLanguage: function(language) {
// change value of both language selectors
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]) {
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 */
/* ------------------------------------------------------------------------ */
/* fullscreen map */
html, body {
@ -30,6 +31,7 @@ html, body {
z-index: 0;
}
/* ------------------------------------------------------------------------ */
/* general styles for gui boxes */
.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
{
width:410px;
@ -125,30 +141,6 @@ html, body {
top:160px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
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 */
@ -174,16 +166,7 @@ html, body {
/* styles for main-input input-mask-header */
#gui-language-toggle
{
position:relative;
}
.top-left-button
{
float:left;
}
.top-right-button
{
float:right;
position:absolute;
}
@ -251,29 +234,7 @@ html, body {
}
/* 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;
}
/* styles for information-box-header */
/* styles for main-output information-box-header */
.header-title
{
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
{
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
{
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
{
border-spacing:0px;
@ -396,9 +379,37 @@ html, body {
color:#ff0000
}
/* ------------------------------------------------------------------------ */
/* styles for config and mapping boxes */
#gui-language-toggle-2
/* styles for other gui boxes */
#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;
}
@ -406,21 +417,31 @@ html, body {
{
position:relative;
}
.config-select
{
width:100px;
}
.label
.box-label
{
font-weight:bold;
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 */
.button
{
@ -465,30 +486,39 @@ html, body {
}
/* fonts */
.base-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* styled select */
.styled-select-helper
{
border: 0px;
text-decoration:none;
opacity: 0;
filter: alpha(opacity=0);
z-index: 5;
cursor:pointer;
}
.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;
.styled-select
{
position:absolute;
background-repeat:no-repeat;
background-position: top right;
padding: 1px 1px 1px 1px;
overflow: hidden;
}
/* 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
{
min-width:10px;
@ -512,34 +542,7 @@ html, body {
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 */
.full
@ -573,3 +576,31 @@ select
{
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 class="base-font not-selectable">
<!--map-->
<!-- map -->
<div id="map"></div>
<!-- config gui -->
<div id="config-wrapper" class="box-wrapper not-selectable">
<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>
<div id="gui-config-label" class="label">Configuraion</div>
<div class="full">
<div class="row">
<div id="gui-language-label" class="left inner-label">Language:</div>
<div id="gui-language-area" class="left stretch"><select id="gui-language-toggle-2" class="config-select"></select></div></div>
<div class="row">
<div id="gui-units-label" class="left inner-label">Units:</div>
<div id="gui-units-area" class="left stretch"><select id="gui-units-toggle" class="config-select"></select></div>
</div>
</div>
<!-- config options -->
<div class="full">
<div class="row">
<div class="left fixed"><span id="gui-language-2-label" class="config-label">Language:</span></div>
<div class="left stretch"><select id="gui-language-2-toggle" class="config-select"></select></div>
</div>
<div class="row">
<div class="left fixed"><span id="gui-units-label" class="config-label">Units:</span></div>
<div class="left stretch"><select id="gui-units-toggle" class="config-select"></select></div>
</div>
</div>
</div>
</div>
<!-- mapping gui -->
<div id="mapping-wrapper" class="box-wrapper not-selectable">
<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>
<div id="gui-mapping-label" class="label">Mapping Tools</div>
<div class="full">
<div class="row">
<div class="left">
<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames"/>
<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span>
</div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" id="option-show-previous-routes" value="show-previous-routes"/>
<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>
<!-- header -->
<div class="full">
<div class="row">
<div class="left"><input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" class="mapping-checkbox"/></div>
<div class="left stretch"><span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span></div>
</div>
<div class="row">
<div class="left"><input type="checkbox" id="option-show-previous-routes" value="show-previous-routes" class="mapping-checkbox"/></div>
<div class="left stretch"><span id="gui-option-show-previous-routes-label" class="checkbox-label small-font">Show previous routes</span></div>
</div>
</div>
<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>
</div>
</div>
@ -181,5 +175,6 @@ or see http://www.gnu.org/licenses/agpl.txt.
</div>
</div>
</body>
</html>

5
WebContent/printing/printing.css
View File

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