From b9a19ab23a8dc63bc7c7f867e2ece6924319f0f2 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Mon, 10 Jun 2013 16:14:34 -0700 Subject: [PATCH] starting to cleanup+style map controls. --- app/assets/images/sprite.png | Bin 3839 -> 3281 bytes app/assets/images/sprite.svg | 188 ++++++++++-------------- app/assets/javascripts/index/map_ui.js | 5 +- app/assets/javascripts/leaflet.note.js | 8 +- app/assets/javascripts/leaflet.share.js | 8 +- app/assets/stylesheets/common.css.scss | 72 +++++++-- app/assets/stylesheets/map-ui.css.scss | 25 ---- app/views/layouts/site.html.erb | 1 + vendor/assets/leaflet/leaflet.locate.js | 14 +- 9 files changed, 157 insertions(+), 164 deletions(-) diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png index 528d4201c43761606810da17d5d1e7eacae75222..baac9b835fdf9a5209ed63fac075bf26cce9fa67 100644 GIT binary patch literal 3281 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 literal 3839 zcmeH~c{Cf^*1!{EYQC)@6s=2o4HZ?T)le-(QB+JZ)LcViDkU_cTuNKiHJ2E!no5L} z8d^oFhT9tQP-1M-OPZEcqA6m2>3Z+|`M!U?@6T_qb%wq7S?iqhJ8SQA&chpamf|7` zA^-qD-0Ip@H~;`V&FlXK65`cx>Vh+`5r{Umasu%r0Tl3nryq&D<`&HxPx)DZrs}vj zo>BgeIpU6EMBp8?Z`3US8jXgAgrlPUeIsu{Bcg(EYeotHfJB1T)hkYMrQa6AGCilT zL+h;Ko5wXB;0hmZSc3In@Feh6VomK6qX+FG1QDmOU{R!_ejG&t@&U2#S||gD8lwE2Akk3aPqXm>s{h#-Y|$m_1BV z_@2o`Fq&10VXgP=Z7v)dN1y5k*X!%+$7r092<3wclnWlnaOa;te_m9`JZWVth2%#e zkt;gMRz6{6n=Bv8Dl&U!oJ0C_K?r%{+d*XEB&XLFykudhjNIvd>RNvd( zEmm(MMalNVMH-Y=z`X6+PB>`#ar^Ok1>glV47k6dxbI>i}XDy3txMfrpuGFBx z(owjTMQ#Y;Tu<@$6g09}$^pCKhFY-h4%LdW$b++x_F<; z$HcdGPdR-5GrK{bB+IWgh=|ucnE2R@p*lC;&Rp-%q>{UTzw1mmHXF?vnY%RQcW>TVNtz5qyM#r2j$+C9ytslR_L;5B`1y>I$@hf0x|g9v zm|$|bF~j-%LPrFZu9AvrIUyNF?b+`wF|y2YJZz!hZ#$Vh3R8@zv8-CsK3~$Xp-1~9 z6xLLoP`qUnsYf>qMf01CDx-tu!^h@4i@r@h`n7BkB1VFcR`cI(KV~AlpC;td_zKfT zc=|@6=jC+?a>TPr)pPE&Yz?aU>t_!Sw9$_r1#S_Tu8RlF8tIJmq-O0_`>L+g zwjsjSZXxckh)vwh@==2@F3 z7DXwMEomDPJ|>Z=-;LT^TZg{Qw(q;)Vvz`Zh-jpKUE0)esaT;EjT{nYol=ytQX=Ia zfJ7owqpoag&u;#fB=_~BM>PCNo#WzAP|~P26ZU{ZT*(R#2PlU;y{R=6lUmbsMAC>& zD*nx`G)|$@Xx@d-AS)}Ydt!i7D~p&94o{7N(7QsjgLa$w!};5T$SlE2qI>7*_qN(d z*-5MyvpQc+6EB8P>@fT`O7i769IPm>C~e3LbV5-{>02P8rncA*V@`kU9V5P~(_%T` z{ywHE7KKQG-Z!zZb_)MVb$bQh+;cqcWGXwTs;Y{*imnqHd7E#Bm#?29zIroP@G9^f zQrs9Gz^2+Dwg*CM*Hg#c7aM(L3=QiV3aH-r!^&>852UZIK4nms2Hy?$oXfIUQixmqCi$|)es<#6Is%Ka|Uq%NM zT;vGey@`t@`Y5}XHr&DE5eb`L#;d}pkP%a#+wNxdPMWdP!!l%!b-mNv>|jsEp<{tH zgatxQ{eTb~yzbn@yxEvc6F&}BR#0%itvtQAx7Tg?STQ7C*(C;id5cd4W-q3)aKYGk z@dK^`)%Ri!_r16EZnJlCLBBUG>-hQdm_6<~&M(tHKy;VzfofVw6znt}jMKJ#9i)@W zz7Vl*m8Zys$83~`;duuiHH`09OA-^sqd zJ_P8~DFq#7hx*{m`yHmrV4TuuGtgW2UA^8StR*gXCT*!FYX7QxRk(U zKN=qC2Um!w{6S_^kQtnyq{sA6`jgIqGGa)?*h6 z(G;}njrrErt0^tgWeUOo{W9nMGhwEn-s^^9%2fjj)0%U+!}O-aPxs}@387$l`FQy_ zk4;#yfLBPYwb_)eqHjG)woZSUv%Qrnb;*2tb3YXHDQ|Le(q3BRKHfib>xS3-eld8d zE+{Zi;!f0rbglk}*X(kQ0&Cmmua|;3M9p2Nj!_2Z{K&|N(ZsWxupzIkcDV6dBG`pm zy_Z7=F#5rV8WrRSaTO+GIb)4t24W2}IK9&$!8O$m&%2+>={HWnkGtR@KO>uR=CVPH zyCY{|PO7hHh1q%vb$EPnZ6PTb5!(F4K^*m`Jbb0rS{zlA9n@SmwfPQNJL8pu5Vx_m zgAhM^EHqDTwrSqyJPtylJ@f`PAKm2;{W8%5U{(V%mXB*H%puN|f9;v@2)Z~m>Te^X zGWZuyI+C{9iPR388o1su347Ecf>5cXJ$4fn5>7#qGxA)H`epLyj0cJi19S(U7Z(>} z7nx7grrra2r!7!Y@=i=~Y|aL5PX`1B1!YT0N_z7vhW+E<3!BZ>Z{;Q4E~>uO#VL(d z->@0tr@uX+XkNmao=ejmJfU;?^y|9xh?#w5)$B6LZ30q|OkDV99{YEjp!!5N(@ z!^hx9^A!PL{>xgkn;A)F`L6MuCoQ~Ie7zxMp9?dIEyE=Ke3R)AQFbth33!mhNOpUl zv43;AE8H4B3c}Y0Zp72(XDJ-@dk;SA=NBE_21Z(CDm7<7tZY5R8cT>J0*`^-LW#gm zWv=0S-;H0{2Vlbq&PVHu1UkUfN1SbImo_y?g3>CIImsOk5_naxOYV+ZKln(pBwse* zP*$~Dl%ELQC!k*Mg@Q`rC6lV#yqUUw|SP%r;_6vAy0}!%dti!~+TL1$xpB zm<^l*eFXuib0R;hNvc>sS9?CU`_>8|;==Pr6bq5Xom8wqN~p z-NHZ`8|JSa{c$^0=3$(q^}kygHZ!w<6MF1XNqPGCxst+31vTeY4 z>)T0QO73>3Kb#27JY&7gM@W9Y7{ASb?t3-JTTNojnW&G{I-Lky#>IUXMWjP zP_n`r5LFwqOl7F<)0YCTydIJ4VNdA{2G7p9EclcytPE_%Jt^k0Qx!u(!Q=i}e2|Q^@z5oCK diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg index a8eb7a26d..570c58026 100644 --- a/app/assets/images/sprite.svg +++ b/app/assets/images/sprite.svg @@ -27,19 +27,21 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="1" - inkscape:cx="56.280535" - inkscape:cy="164.32411" + inkscape:zoom="4" + inkscape:cx="220.09965" + inkscape:cy="184.12173" inkscape:document-units="px" - inkscape:current-layer="layer2" + inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="1280" inkscape:window-height="756" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" - showguides="false" - inkscape:guide-bbox="true"> + showguides="true" + inkscape:guide-bbox="true" + inkscape:object-paths="true" + inkscape:object-nodes="true"> + + + + + + @@ -118,122 +144,26 @@ inkscape:groupmode="layer" id="layer1" transform="translate(0,-852.36218)"> - - - - - - - - - - - - + + + + + diff --git a/app/assets/javascripts/index/map_ui.js b/app/assets/javascripts/index/map_ui.js index 6d98f6642..51f00f325 100644 --- a/app/assets/javascripts/index/map_ui.js +++ b/app/assets/javascripts/index/map_ui.js @@ -7,10 +7,11 @@ OSM.MapUI = L.Control.extend({ }, _initLayout: function(map) { - var className = 'leaflet-control-map-ui', + var className = 'control-layers', container = this._container = L.DomUtil.create('div', className); - var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container); + var link = this._layersLink = L.DomUtil.create('a', 'control-button', container); + link.innerHTML = ""; link.href = '#'; link.title = 'Layers'; diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js index 43717f2c1..24f18f7ab 100644 --- a/app/assets/javascripts/leaflet.note.js +++ b/app/assets/javascripts/leaflet.note.js @@ -5,11 +5,11 @@ L.Control.Note = L.Control.extend({ }, onAdd: function (map) { - var className = 'leaflet-control-locate', - classNames = className + ' leaflet-control-zoom leaflet-bar leaflet-control', - container = L.DomUtil.create('div', classNames); + var className = 'control-note', + container = L.DomUtil.create('div', className); - var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container); + var link = L.DomUtil.create('a', 'control-button', container); + link.innerHTML = ""; link.href = '#'; link.title = this.options.title; diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 83cc035f9..7449fb6d7 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -8,11 +8,11 @@ L.Control.Share = L.Control.extend({ }, onAdd: function (map) { - var className = 'leaflet-control-locate', - classNames = className + ' leaflet-control-zoom leaflet-bar leaflet-control', - container = L.DomUtil.create('div', classNames); + var className = 'control-share', + container = L.DomUtil.create('div', className); - var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container); + var link = L.DomUtil.create('a', 'control-button', container); + link.innerHTML = ""; link.href = '#'; link.title = this.options.title; diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 80cb000c5..ba25591d3 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -141,6 +141,36 @@ h6:first-child { margin-right: $lineheight/4; } +/* Rules for icons */ + +.icon { + display:inline-block; + vertical-align:top; + width:20px; + height:20px; + background:transparent image-url("sprite.png") no-repeat 0 0; + text-indent:-9999px; + overflow:hidden; + } + +.icon-pre-text { + margin-right: 5px; +} + +.icon.search { background-position: 0 0; } +.icon.donate { background-position: -20px 0; } +.icon.zoomin { background-position: -40px 0; } +.icon.zoomout { background-position: -60px 0; } +.icon.geolocate { background-position: -80px 0; } +.icon.layers { background-position: -100px 0; } +.icon.key { background-position: -120px 0; } +.icon.share { background-position: -140px 0; } +.icon.clipboard { background-position: -160px 0; } +.icon.link { background-position: -180px 0; } +.icon.close { background-position: -200px 0; } +.icon.check { background-position: -220px 0; } +.icon.note { background-position: -240px 0; } + /* Rules for links */ a { @@ -389,7 +419,7 @@ table { /* Rules for donation request box */ -.donate { +a.donate { display: block; width: 163px; padding: $lineheight/4; @@ -406,11 +436,6 @@ table { background: #9ed485; text-decoration: none; } - span { - margin: 0; - padding-left: 18px; - background: image-url("sprite.png") 0 -29px no-repeat; - } } /* Rules for Creative Commons logo button */ @@ -518,8 +543,35 @@ table { } /* Rules for Leaflet maps */ -.leaflet-control-layers-expanded { - padding: 10px !important; + +.leaflet-control a { + display: block; + height: 40px; + width: 40px; + background-color: white; + background-color: rgba(255,255,255,.8); + border-radius: 4px; + margin-bottom: 10px; +} + +.leaflet-control a:hover { + background-color: white; +} + +.leaflet-control a .icon { + margin: 10px; +} + +.leaflet-map-ui-layers { + box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4); + background: #f8f8f9; + -webkit-border-radius: 8px; + border-radius: 8px; + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + width: 36px; + height: 36px; } .leaflet-control-layers-separator { @@ -1882,11 +1934,11 @@ a.button { /* Rules for the notes interface */ -.note { +.leaflet-popup-content .note { padding-top: $lineheight/2; } -.note { +.leaflet-popup-content .note { h2 { margin-bottom: $lineheight/2; } diff --git a/app/assets/stylesheets/map-ui.css.scss b/app/assets/stylesheets/map-ui.css.scss index f9db83517..e69de29bb 100644 --- a/app/assets/stylesheets/map-ui.css.scss +++ b/app/assets/stylesheets/map-ui.css.scss @@ -1,25 +0,0 @@ -.leaflet-control-zoom { - margin-bottom: 10px; -} - -.leaflet-map-ui-layers { - box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4); - background: #f8f8f9; - -webkit-border-radius: 8px; - border-radius: 8px; - background-position: 50% 50%; - background-repeat: no-repeat; - display: block; - background-image: image-url("images/layers.png"); - width: 36px; - height: 36px; -} - -.leaflet-map-ui { - position: absolute; - display: none; - right: 0; - width: 200px; - height: 100%; - background: white; -} diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index 65723d97f..0ba203fde 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -81,6 +81,7 @@
diff --git a/vendor/assets/leaflet/leaflet.locate.js b/vendor/assets/leaflet/leaflet.locate.js index 89b4e8ce4..be5c7fc01 100644 --- a/vendor/assets/leaflet/leaflet.locate.js +++ b/vendor/assets/leaflet/leaflet.locate.js @@ -32,9 +32,8 @@ L.Control.Locate = L.Control.extend({ }, onAdd: function (map) { - var className = 'leaflet-control-locate', - classNames = className + ' leaflet-control-zoom leaflet-bar leaflet-control', - container = L.DomUtil.create('div', classNames); + var className = 'control-locate', + container = L.DomUtil.create('div', className); var self = this; this._layer = new L.LayerGroup(); @@ -49,7 +48,8 @@ L.Control.Locate = L.Control.extend({ 'watch': true // if you overwrite this, visualization cannot be updated }); - var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container); + var link = L.DomUtil.create('a', 'control-button', container); + link.innerHTML = ""; link.href = '#'; link.title = this.options.title; @@ -74,7 +74,7 @@ L.Control.Locate = L.Control.extend({ } self._active = true; if (!self._event) { - self._container.className = classNames + " requesting"; + self._container.className = className + " requesting"; } else { visualizeLocation(); } @@ -137,7 +137,7 @@ L.Control.Locate = L.Control.extend({ if (!self._container) return; - self._container.className = classNames + " active"; + self._container.className = className + " active"; }; var resetVariables = function() { @@ -151,7 +151,7 @@ L.Control.Locate = L.Control.extend({ _log('stopLocate'); map.stopLocate(); - self._container.className = classNames; + self._container.className = className; resetVariables(); self._layer.clearLayers(); -- 2.43.2