From: Saman Bemel-Benrud Date: Mon, 10 Jun 2013 23:14:34 +0000 (-0700) Subject: starting to cleanup+style map controls. X-Git-Tag: live~4838^2~50 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/b9a19ab23a8dc63bc7c7f867e2ece6924319f0f2 starting to cleanup+style map controls. --- diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png index 528d4201c..baac9b835 100644 Binary files a/app/assets/images/sprite.png and b/app/assets/images/sprite.png differ 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();