From 23b0971c2fe6645e71d062001de376a214b0e119 Mon Sep 17 00:00:00 2001
From: Antoine Abt <antoine@abt.im>
Date: Tue, 6 Mar 2012 21:23:52 +0100
Subject: [PATCH] update mobile example to use Zoom control. update build
 config file

---
 build/light.cfg           |  2 +-
 build/mobile.cfg          |  2 +-
 examples/mobile.html      | 30 ----------------------
 examples/mobile.js        |  2 +-
 examples/style.mobile.css | 52 ++++++++++++++++++++-------------------
 5 files changed, 30 insertions(+), 58 deletions(-)

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;
 }