From a1a2cc12f179d2bcdafbad30e1478abba5669ed1 Mon Sep 17 00:00:00 2001
From: Nikolaus Krismer <niko@krismer.de>
Date: Thu, 23 Jan 2014 20:16:34 +0100
Subject: [PATCH] added isochrone image in geosearch result list reworked green
color scheme in geosearch component
---
src/main/webapp/css_new/geosearch.css | 66 +++++++++++++++++++++-----
src/main/webapp/css_new/isoga.css | 21 +++++---
src/main/webapp/img_new/geosearch.png | Bin 1560 -> 1338 bytes
src/main/webapp/index_new.html | 4 +-
src/main/webapp/js_new/geosearch.js | 40 +++++++++++++---
5 files changed, 103 insertions(+), 28 deletions(-)
diff --git a/src/main/webapp/css_new/geosearch.css b/src/main/webapp/css_new/geosearch.css
index a36aa4ff..3d4f7560 100644
--- a/src/main/webapp/css_new/geosearch.css
+++ b/src/main/webapp/css_new/geosearch.css
@@ -1,3 +1,41 @@
+.geosearch-result-icons {
+ color: #00CC44;
+ cursor: pointer;
+ float: right;
+ height: 40px;
+ opacity: 0.8;
+ text-align: center;
+ width: 60px;
+}
+
+.geosearch-result-icons:hover {
+ text-decoration: underline;
+ opacity: 1;
+}
+
+.geosearch-result-text {
+ background-color: #EEEEEE;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.geosearch-result .result-name {
+ display: block;
+ font-size: 16px;
+ font-weight: 800;
+}
+
+.icon-isochrone:before {
+ background: url('/isochrones/img_new/icon-isochrone.png') no-repeat scroll center center transparent;
+ background-size: 100% 100%;
+ content: " ";
+ display: block;
+ height: 24px;
+ margin: 0px auto;
+ width: 24px;
+}
+
.leaflet-control-geosearch-msg ul {
background-color: transparent;
list-style: none;
@@ -10,9 +48,6 @@
.leaflet-control-geosearch-msg ul li {
background-color: #FFFFFF;
- font: 12px arial;
- text-indent: 4px;
- padding: 4px;
}
.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result {
@@ -20,15 +55,22 @@
}
.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result li {
- border: 1px solid #000000;
+ border: 1px solid #CCCCCC;
+ border-radius: 5px;
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
+}
+
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result li div {
+ padding: 4px;
}
.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-suggests li {
- border: 1px solid #bbbbbb;
+ border: 1px solid #CCCCCC;
+ padding: 4px;
}
-.leaflet-control-geosearch-msg ul li:hover {
- background-color: #eeeeee;
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-suggests li:hover {
+ background-color: #EEEEEE;
}
.leaflet-control-geosearch-searchdiv {
@@ -41,15 +83,16 @@
}
.leaflet-control-geosearch-searchdiv input {
- width: 100%;
+ background-color: #FFFFFF;
+ border: none;
height: 28px;
padding: 0px;
- text-indent: 8px;
- border: none;
+ text-indent: 4px;
+ width: 100%;
}
.leaflet-control-geosearch-btn {
- background: url('/isochrones/img_new/geosearch.png') no-repeat scroll center center #72FE4D;
+ background: url('/isochrones/img_new/geosearch.png') no-repeat scroll center center #00CC44;
background-size: auto 100%;
border: 0px none;
border-radius: 0px 5px 5px 0px;
@@ -61,4 +104,3 @@
vertical-align: top;
width: 72px;
}
-
diff --git a/src/main/webapp/css_new/isoga.css b/src/main/webapp/css_new/isoga.css
index 5f6a1918..c3622f93 100644
--- a/src/main/webapp/css_new/isoga.css
+++ b/src/main/webapp/css_new/isoga.css
@@ -32,19 +32,26 @@ fieldset { padding:0; border:0; margin-top:25px; }
.help-control-div {
background: url('/isochrones/img_new/help_filled.png') no-repeat scroll 0px 0px transparent;
- background-position: center;
- background-size: 90%;
- height: 24px;
- width: 24px;
}
.settings-control-div {
background: url('/isochrones/img_new/settings.png') no-repeat scroll 0px 0px transparent;
- background-position: center;
- background-size: 90%;
clear: none;
+}
+
+.help-control-div,
+.settings-control-div {
+ background-position: center;
+ background-size: 90%;
+ cursor: pointer;
height: 24px;
- width: 24px;
+ opacity: 0.8;
+ width: 24px;
+}
+
+.help-control-div:hover,
+.settings-control-div:hover {
+ opacity: 1;
}
.olControlLayerSwitcher .layersDiv {
diff --git a/src/main/webapp/img_new/geosearch.png b/src/main/webapp/img_new/geosearch.png
index e457e923466dfb6e061e694d067d3d7b96ab3a1e..e5d4684cd60987f418b75a521464580439701fdf 100644
GIT binary patch
delta 1298
zcmV+t1?~En47v)CBo78+OGiWi{{a60|De66laVnPe+P6)O+^RZ0T&Yi32NyDr2qf~
z$4Nv%RCwC$om+@iRUC)E)0mc#$>2C+_0Ui@VK*$LVuEf^PofMJfk;F{NJaG!6lnBh
z1VRwuTTq5ZQZJcBkliP3B&HOi@yrxunzvHWGN#M?dsu6TY|dWm%sFSBJ!k(u*e|oz
z?6uDMfA)Xf_e{ym5c%N@eFYLCBt$}lgh+^x5D5_yA|XOTgoH?lkPrzG5+Wf&LL@{;
zh>#Eo5fUOHqOQ!C26bErEC&_?3;fju%mNMp2mLh)Yy)-x<I`10DW@kFyMcaS1+b{f
z-#rSv1#AXBkdWHw0M-Jlfthu<-}}Imz!wrye;sZ9i+ch%x6b!A;C0|p-^58sfVseH
zz#R=PXTR@@hBV5mOb;-aKnB2tz^A}nijc{<4A|)-Bqavi54<EH|81sr`5|pJoCFT|
zzF^D`f4hLrD(~|La2qfnA+7^|2e>^l|6yPwu+>M@WOIy*fn~r-U`Z9j<E6k4xiVsA
zf2prE7RL!Qd&<ntsq+4PW;PsI#-N#%n(!S|yi!L<2k>pg(00T>@q4FO&e^~#z?~6!
z?*X<Hb(FO>LdF1aT@5k-eh2Ob)<@)B2b@{NKBOBM4$Qzuyo}>@Eca#L-awv*fel5A
zkp6&-lfIccUgvTj06q)kd9a90)`~#-fBG7msjMOHLw^2IiA7Twf=_E93&~!!Jq$e8
z!18wkuh#g$w3LwLf%J{QZw;=)h8pYGQbHC7(zhn4!ys^^hB~&CkOhIxd}o3>j04*<
z(q{v6B*d*vrP^}cS3^BpN=R2mTFOnMLp9X1rG(7NNE=J|c|&Ej6-7wali8W@fAfYS
zpj;Fo2XoSHX9+pw`?JCe>BQ}4q@Xt=Z6q+8Zz&<8f%Ihw>d*~bk>}<rrI2lb^py$f
z5GtckLU!P`Oe?Vj=xbp4?ZD%KJVQkiGLAdmnZ+}>oxVo!G;m&^Nqw_OLcpE1&7z0K
z9L-q;JQDFR{GA6OsrS^k<Bs2Cf3Xg?)msm40p2BhW9)m}_P}37ix6<<cSBFW8sJ50
z-{)QxAp_vqyvP8Watvro<Pn_#GrM{U_is0|=OfGb(adJ%=@?Km&h|bQIV0``z63S_
zH$+5pw{Pmci|8{Z81o~r+|aC}q)UNMfU~Ojog=;v+Q<KolJ*8BeOU|xf42r!6Ix!#
z#6)dVP9Ds?egM#PDb0KxVKeScsXucdqzCwr9BfeK;f0->fH#17IS^C!k@8a!BV>Y)
zeV?+cfo1H+ohc4+sgIQNi!5Yfa&|rLJZ`zp_g#%!-oFv}CQ`~rO_P$RF}T0l%&gzc
zhHUDLnAv@1HsiE=cbeJPf06eno7n}e{yIXnT!dQ%?!%p%nmtLLQ@G8gvcHD>LSdz~
zsrk6~*DsGKf5i7G$#xP;)9ha!&Eem_<k02?9H9E0zWKO!*kk4{qrlCnq?8K$Kd3sq
zlq(~pTnn5iN~hioj`|t;o`}4c;8vj(Aqkl0Bju`y5nHz+r1AXhcq3(ZME`|^q~RAY
z<*ST5pR37APdo4)aLs8y|J8TuWkpC@j`<n=3%EZha13}ml?+8l4pD?ih>#Eo5fUOH
zLP8`&NQi_82@w(^AwohVL`aB)2nmr8At6FSBt%Gvgoyg`4@()qmGYs4hyVZp07*qo
IM6N<$g30b<<NyEw
literal 1560
zcmb_c`#aMM9Nrer=5jQ*3c2ivTr(wB(b;U-#jRb0)q|SS$z|@!5;cs<(Kai&lzYBM
z#gbdHRUXZ{NXJ642cZ<>AlJh=tAF8~&+~ad@AJOT`+R<Uv;BNLwbTvOK_HM80gojs
zneiP^HRWZF=2MlV5{DsBp~_)F862gCG4X+M%6#8<fH6A@la=PScw9g{CHiE1QfO=#
zC@Cq);dIoQxD%nwFo)>aQ-z8Hh9Hn?J^_oSCKpW?`EvYedg2Suk>2G_Jw^4m)gHjs
zvMMh-?u_gq^1-Lg9S~jkI|gVBu29DYig>T8&(M2_jD$NMIxWyILznK>6`Z~)$e>(2
zRAR8??Zul{tWBiM$aUjVXZ@GjQ(mWtX4(%f$(OQ$(f&}fLZ#@!N6eLx|GY?45(J55
zxYt1fpz->2D@T1-bz|#Bbck&oh1NaM)p)*RREmR7s=b5QrmNa3QjPl|5oB3p!l!q8
zs@NP!#4vK$J%p&`y$Cj<etTi~o_G;vj(7`>0GWUtYFo~#${{9HS-Er5vHb%X9Es+z
z*6{00kL?iuJ6{x;9~*G*s_o#D;KZIb&9oQk(+Hsrx;BP)H;W^27FUa}bd>5hd(wh^
zjGJ@<*?QM&y3<$e75h|-Ee|M4EDvlXLgIoVK4~(u07ZC=XyUM}!srdS&2zcZe;^m)
zyNQ%WIMIO8PKGX*WhDL%K2qVn@p+}oY^*28YRY2Pm5IJQy#!ga>FmeF<ktx+1;|IP
zJ@vXW?S%&TDZ`P&O*#BWu_TH0*owMU_<klqt6n9!3e$!jZW}~!HNdSfm(hUkaC+yR
z=KIt<p?ec&#C|+Q5+u#?$V?jtR?obOnNfAm?rjlG-1ul&nU{ZU?i4NI!VsGFO|!1#
zjc(_0G!iH(w!q|EvNw9T4okjQvkbIuNp>UKFJ2;G023jCya50kJ<OkX9g?0vS(@kP
zWn7y}(iy9}JnQ6YP;bo3BjS$`1~!L!{c(8DOGK(4Ijog)v^U-aX$M8sPF5Y&J|ulH
z=Y_E`FWwPmZFTi{z4V8okfc6V(o$k=u0<eU`D0+$16k>OBIjG$#t%bsjVt8$O*@%a
zL*wiN>&+OsoR=j2b1qj1wpSCya*2|V3f9>_VR~mC-?OdZuE(lQvLmkY@B8F=*mbgX
zguJ>krkz1HKAQ3b$FQ7bR@}@UM-$k3yHe>0+1?yULnb*H(%f9Z+T1_rHzmNM{%*G>
z%QyA5@A1UG18HM{NUBWqCD+Y?>*JeQU(r7`#B=VX6Ip^ekRxizYvdrx%0LKprK6>!
z22{6JZH<{ndP2(%hAz42j*D%Pg=!+mCAWONfJ*l&6>E$6gF3MqlL$N3z1XL(A@{*e
zj-7}W_;jMKd)V^b;~$>c`s|A%ZEYD3BDQW_-s&pK7|Mk!&_Aurkl*g$ix%?hwF9bv
zuyR<Jq^19y^GIKG`ns5`K^C6Ry$uvXgNf?}wps86kZBHn5oV)dIyI=)ru9;K6My^G
z8%pZS{9hNl%V^(z2|<p`v#VTHSoBi4j9uc?^yH|tYn_T5wI-y|*k8}esw?^vK>?lt
z$N?CO5+h0ti4x4`(K}Eb@tXz3iYSi`5YwexE`~ke1vi<E3wxj6S~nqQa*h&~<>lAw
zqJCRN0mTUD=Ut6M;*;A?L=dqKs*T`2e|%^f)0eQ97ak-D&q<&>`)BM8dNVVCet?4^
zn#$zI)Y3mt2rI#`8s4a{`fA!&TdJu_l)sGk>SWlkwe1$*oN<5}i&nZy6H{KD)VopV
z#@Grkz<suM!2+q(z>xQ+-JvNGM__e#Y4y}qs<%*)^i%`vCkuv>7x~mRJDh{=2G^N;
z9NDoZ_Abv!wHoX-3N9FRW2gY<AkF&8;AIn6a2pA+ZP=~DSnlyZG@7y#|8l7)VJ|#R
SAhj!797MqRVDDi<F8&L`t=R_v
diff --git a/src/main/webapp/index_new.html b/src/main/webapp/index_new.html
index 2c5b6d14..b25b8185 100644
--- a/src/main/webapp/index_new.html
+++ b/src/main/webapp/index_new.html
@@ -20,9 +20,9 @@
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js"></script>
<script type="text/javascript" src="http://domoritz.de/leaflet-locatecontrol/src/L.Control.Locate.js"></script>
- <script type="text/javascript" src="js_new/locatebyip.js"></script>
- <script type="text/javascript" src="js_new/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js_new/console.js"></script>
+ <script type="text/javascript" src="js_new/jquery-ui-timepicker-addon.js"></script>
+ <script type="text/javascript" src="js_new/locatebyip.js"></script>
<script type="text/javascript" src="js_new/geosearch.js"></script>
<script type="text/javascript" src="js_new/geosearch_provider_osm.js"></script>
<script type="text/javascript" src="js_new/controls.js"></script>
diff --git a/src/main/webapp/js_new/geosearch.js b/src/main/webapp/js_new/geosearch.js
index 4570097f..3b2b5c5c 100644
--- a/src/main/webapp/js_new/geosearch.js
+++ b/src/main/webapp/js_new/geosearch.js
@@ -325,22 +325,48 @@ L.Control.GeoSearch = L.Control.extend({
},
_setResult: function(result) {
- var elem = this._result,
- li = null,
- liText = null;
+ var displayName = null,
+ displayDescription = null,
+ divIcons = document.createElement('div'),
+ divText = document.createElement('div'),
+ elem = this._result,
+ iconIsochrone = null,
+ index = -1;
+ li = document.createElement('li'),
+ txtDescription = null,
+ txtName = null;
if (result.lat == undefined || result.lon == undefined) {
return;
}
this._clearResult();
- li = document.createElement('li');
+
+ index = result.displayName.indexOf(',');
+ displayName = result.displayName.substring(0, index);
+ displayDescription = result.displayName.substring(index + 1);
+
li.id = 'geosearch-result';
li.className = 'geosearch-result';
- liText = document.createTextNode(result.displayName);
- li.appendChild(liText);
- elem.appendChild(li);
+ txtDescription = document.createElement('span');
+ txtDescription.className = 'result-description';
+ txtDescription.innerHTML = displayDescription.replace(/^\s+|\s+$/g,'');
+ txtName = document.createElement('span');
+ txtName.className = 'result-name';
+ txtName.innerHTML = displayName.replace(/^\s+|\s+$/g,'');
+ iconIsochrone = document.createElement('div');
+ iconIsochrone.id = 'icon-isochrone';
+ iconIsochrone.className = 'icon-isochrone';
+ iconIsochrone.appendChild(document.createTextNode('Isochrone'));
+ divIcons.className = 'geosearch-result-icons';
+ divIcons.appendChild(iconIsochrone);
+ divText.className = 'geosearch-result-text';
+ divText.appendChild(txtName);
+ divText.appendChild(txtDescription);
+ li.appendChild(divIcons);
+ li.appendChild(divText);
+ elem.appendChild(li);
elem.style.display = 'block';
},
--
GitLab