[OpenLayers-Commits] r11404 - sandbox/camptocamp/mobile/openlayers/examples

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Thu Feb 24 06:22:50 EST 2011


Author: fredj
Date: 2011-02-24 03:22:49 -0800 (Thu, 24 Feb 2011)
New Revision: 11404

Added:
   sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css
Modified:
   sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html
Log:
move css into style.mobile-jq.css, coding style

Modified: sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html
===================================================================
--- sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html	2011-02-24 11:21:46 UTC (rev 11403)
+++ sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html	2011-02-24 11:22:49 UTC (rev 11404)
@@ -10,106 +10,57 @@
         <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
         <link rel="stylesheet" href="style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
         <script src="../build/OpenLayers.js"></script>
         <script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
         <script src="mobile.js"></script>
         <script src="mobile-jq.js"></script>
-        <style>
-            html {
-                height: 100%;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-            }
-            .ui-content {
-                padding: 0;
-            }
-            .ui-footer {
-                text-align: center;
-                padding: 5px 0;
-            }
-            #map {
-                width: 100%;
-                height: 100%;
-            }
-            .olControlAttribution {
-                font-size: 10px;
-                bottom: 5px;
-                right: 5px;
-            }
-            #navigation {
-                position: absolute;
-                bottom: 50px;
-                left: 10px;
-                z-index: 1000;
-            }
-            #navigation .ui-btn-icon-notext {
-                display: block;
-                padding: 7px 6px 7px 8px;
-            }
-            #title, #tags, #shortdesc {
-                display: none;
-            }
-            .ui-icon-check {
-                opacity: 0.3;
-            }
-            .checked .ui-icon-check {
-                opacity: 1;
-            }
-            .ui-icon-locate {
-                background-image: url(img/locate.png);
-            }
-        </style>
     </head>
     <body>
         <h1 id="title">OpenLayers with jQuery Mobile</h1>
         <div id="tags">
-            mobile, jquery
+          mobile, jquery
         </div>
         <p id="shortdesc">
-            Using jQuery Mobile to display an OpenLayers map.
+          Using jQuery Mobile to display an OpenLayers map.
         </p>
 
         <div data-role="page" id="mappage">
-            <div data-role="content">
-                <div id="map"></div>
-            </div>
+          <div data-role="content">
+            <div id="map"></div>
+          </div>
 
-            <div data-role="footer">
-              <a href="#searchpage" data-icon="search" data-role="button">Search</a>
-              <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
-              <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
-            </div>
-            <div id="navigation" data-role="controlgroup" data-type="vertical">
-                <a href="#" data-role="button" data-icon="plus"
-                            id="plus"
-                            data-iconpos="notext"></a>
-                <a href="#" data-role="button" data-icon="minus"
-                            id="minus"
-                            data-iconpos="notext"></a>
-            </div>
+          <div data-role="footer">
+            <a href="#searchpage" data-icon="search" data-role="button">Search</a>
+            <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
+            <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
+          </div>
+          <div id="navigation" data-role="controlgroup" data-type="vertical">
+            <a href="#" data-role="button" data-icon="plus" id="plus"
+               data-iconpos="notext"></a>
+            <a href="#" data-role="button" data-icon="minus" id="minus"
+               data-iconpos="notext"></a>
+          </div>
         </div>
+
         <div data-role="page" id="searchpage">
-            <div data-role="header">
-                 <h1>Search</h1>
-            </div>
-                    <div data-role="fieldcontain">
-                        <input type="search" name="query" id="query"
-                            value="" placeholder="Search for places"
-                            autocomplete="off"/>
-                    </div>
-            <ul data-role="listview" data-inset="true" id="search_results"> 
-            </ul> 
+          <div data-role="header">
+            <h1>Search</h1>
+          </div>
+          <div data-role="fieldcontain">
+            <input type="search" name="query" id="query"
+                   value="" placeholder="Search for places"
+                   autocomplete="off"/>
+          </div>
+          <ul data-role="listview" data-inset="true" id="search_results"></ul> 
         </div>
         <div data-role="page" id="layerspage">
-            <div data-role="header">
-                <h1>Layers</h1>
-            </div>
-            <div data-role="content">
-                <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist"> 
-            </div>
+          <div data-role="header">
+            <h1>Layers</h1>
+          </div>
+          <div data-role="content">
+            <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist"> 
+          </div>
         </div>
     </body>
 </html>

Added: sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css
===================================================================
--- sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css	                        (rev 0)
+++ sandbox/camptocamp/mobile/openlayers/examples/style.mobile-jq.css	2011-02-24 11:22:49 UTC (rev 11404)
@@ -0,0 +1,46 @@
+html {
+    height: 100%;
+}
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+.ui-content {
+    padding: 0;
+}
+.ui-footer {
+    text-align: center;
+    padding: 5px 0;
+}
+#map {
+    width: 100%;
+    height: 100%;
+}
+.olControlAttribution {
+    font-size: 10px;
+    bottom: 5px;
+    right: 5px;
+}
+#navigation {
+    position: absolute;
+    bottom: 50px;
+    left: 10px;
+    z-index: 1000;
+}
+#navigation .ui-btn-icon-notext {
+    display: block;
+    padding: 7px 6px 7px 8px;
+}
+#title, #tags, #shortdesc {
+    display: none;
+}
+.ui-icon-check {
+    opacity: 0.3;
+}
+.checked .ui-icon-check {
+    opacity: 1;
+}
+.ui-icon-locate {
+    background-image: url(img/locate.png);
+}



More information about the Commits mailing list