From f90d1db802e0d89868179729653e5341637fc226 Mon Sep 17 00:00:00 2001 From: shiin Date: Sat, 12 May 2012 08:22:21 +0200 Subject: [PATCH] made html + css look better --- WebContent/gui/OSRM.MainGUI.js | 2 +- WebContent/gui/OSRM.Selector.js | 4 +- WebContent/localization/OSRM.Localization.js | 4 +- WebContent/main.css | 267 +++++++++++-------- WebContent/main.html | 69 +++-- WebContent/printing/printing.css | 5 +- 6 files changed, 187 insertions(+), 164 deletions(-) diff --git a/WebContent/gui/OSRM.MainGUI.js b/WebContent/gui/OSRM.MainGUI.js index 015a9087d..cca1eccd4 100644 --- a/WebContent/gui/OSRM.MainGUI.js +++ b/WebContent/gui/OSRM.MainGUI.js @@ -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"); diff --git a/WebContent/gui/OSRM.Selector.js b/WebContent/gui/OSRM.Selector.js index cd593c5ea..a9700f50a 100644 --- a/WebContent/gui/OSRM.Selector.js +++ b/WebContent/gui/OSRM.Selector.js @@ -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"; }, diff --git a/WebContent/localization/OSRM.Localization.js b/WebContent/localization/OSRM.Localization.js index 58b878b0f..f65ce350a 100644 --- a/WebContent/localization/OSRM.Localization.js +++ b/WebContent/localization/OSRM.Localization.js @@ -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; diff --git a/WebContent/main.css b/WebContent/main.css index 103368cfb..efe027180 100644 --- a/WebContent/main.css +++ b/WebContent/main.css @@ -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 @@ -572,4 +575,32 @@ select .stretch { 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; } \ No newline at end of file diff --git a/WebContent/main.html b/WebContent/main.html index 96cdad7f6..8c1663bae 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -81,55 +81,49 @@ or see http://www.gnu.org/licenses/agpl.txt. - +
+ +
+
Configuraion
-
-
Configuraion
-
-
-
Language:
-
-
-
Units:
-
-
-
- + +
+
+
Language:
+
+
+
+
Units:
+
+
+
- -
-
Mapping Tools
-
-
-
- -Highlight unnamed streets -
-
-
-
- -Show previous routes -
-
-
-
-JOSM -OSM Bugs -
-
-
- + +
+
Mapping Tools
+ + +
+
+
+
Highlight unnamed streets
+
+
+
+
Show previous routes
+
+
+ OSM BugsJOSM
@@ -181,5 +175,6 @@ or see http://www.gnu.org/licenses/agpl.txt. + diff --git a/WebContent/printing/printing.css b/WebContent/printing/printing.css index 9b9d75bb5..929d4b39a 100644 --- a/WebContent/printing/printing.css +++ b/WebContent/printing/printing.css @@ -32,13 +32,10 @@ body top:0px; height:20px; } -.top-left-button -{ - float:left; -} .top-right-button { float:right; + vertical-align:top; }