diff --git a/build/light.cfg b/build/light.cfg index f2f7a649a4..b5d7392963 100644 --- a/build/light.cfg +++ b/build/light.cfg @@ -13,7 +13,7 @@ OpenLayers/Layer/WMS.js OpenLayers/Layer/Google/v3.js OpenLayers/Popup/FramedCloud.js OpenLayers/Control/Navigation.js -OpenLayers/Control/ZoomPanel.js +OpenLayers/Control/Zoom.js OpenLayers/Control/Attribution.js OpenLayers/Control/SelectFeature.js OpenLayers/Control/Panel.js diff --git a/build/mobile.cfg b/build/mobile.cfg index 7bba251270..bfe4543412 100644 --- a/build/mobile.cfg +++ b/build/mobile.cfg @@ -11,7 +11,7 @@ OpenLayers/Layer/Bing.js OpenLayers/Layer/WMS.js OpenLayers/Control/TouchNavigation.js OpenLayers/Control/Geolocate.js -OpenLayers/Control/ZoomPanel.js +OpenLayers/Control/Zoom.js OpenLayers/Control/Attribution.js OpenLayers/Control/SelectFeature.js OpenLayers/Control/DrawFeature.js diff --git a/examples/mobile.html b/examples/mobile.html index 708eb8b68b..671f522b0a 100644 --- a/examples/mobile.html +++ b/examples/mobile.html @@ -35,36 +35,6 @@ padding : 2px 4px; border-radius : 5px 0 0 0; } - div.olControlZoomPanel .olControlZoomInItemInactive, - div.olControlZoomPanel .olControlZoomOutItemInactive { - background: rgba(0,0,0,0.2); - position: absolute; - } - div.olControlZoomPanel .olControlZoomInItemInactive { - border-radius: 5px 5px 0 0; - } - div.olControlZoomPanel .olControlZoomOutItemInactive { - border-radius: 0 0 5px 5px ; - top: 37px; - } - div.olControlZoomPanel .olControlZoomOutItemInactive:after , - div.olControlZoomPanel .olControlZoomInItemInactive:after{ - font-weight: bold; - content : '+'; - font-size : 36px; - padding: 7px; - z-index: 2000; - color : #fff; - line-height: 1em; - } - div.olControlZoomPanel .olControlZoomOutItemInactive:after{ - content: '–'; - line-height: 0.9em; - padding: 0 8px; - } - div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { - display: none; - } #title, #tags, #shortdesc { display: none; } diff --git a/examples/mobile.js b/examples/mobile.js index 094647a69e..9bbcb9125a 100644 --- a/examples/mobile.js +++ b/examples/mobile.js @@ -26,7 +26,7 @@ var init = function () { enableKinetic: true } }), - new OpenLayers.Control.ZoomPanel() + new OpenLayers.Control.Zoom() ], layers: [ new OpenLayers.Layer.OSM("OpenStreetMap", null, { diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 58dee4586b..946c10b7eb 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -1,31 +1,33 @@ -div.olControlZoomPanel { - height: 108px; - width: 36px; +div.olControlZoom { position: absolute; - top: 20px; - left: 20px; + top: 8px; + left: 8px; } -div.olControlZoomPanel div { - width: 36px; - height: 36px; - background-image: url(img/mobile-zoombar.png); - left: 0; +div.olControlZoom a { + display: block; + margin: 1px; + padding: 0; + color: white; + font-size: 26px; + font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; + font-weight: bold; + text-decoration: none; + text-align: center; + height: 32px; + width:32px; + line-height: 24px; + background: #666666; /* fallback for IE - IE6 requires background shorthand*/ + background: rgba(0, 0, 0, 0.3); + filter: alpha(opacity=60); } -div.olControlZoomPanel .olControlZoomInItemInactive { - top: 0; - background-position: 0 0; +div.olControlZoom a:hover { + background: #444444; /* fallback for IE */ + background: rgba(0, 0, 0, 0.5); + filter: alpha(opacity=80); } -div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { - top: 36px; - background-position: 0 -36px; +a.olControlZoomIn { + border-radius: 4px 4px 0 0; } -div.olControlZoomPanel .olControlZoomOutItemInactive { - top: 72px; - background-position: 0 -72px; -} -.olTileImage { - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; +a.olControlZoomOut { + border-radius: 0 0 4px 4px; }