[OpenLayers-Commits] r11238 - trunk/openlayers/examples

[commits-20090109 at openlayers.org]

Author: erilem
Date: 2011-02-22 06:22:00 -0800 (Tue, 22 Feb 2011)
New Revision: 11238

Modified:
   trunk/openlayers/examples/example-list.html
Log:
say hi to the new examples index, which works on mobile devices as well, thanks to our web designer pair, Marc and Antoine

Modified: trunk/openlayers/examples/example-list.html
===================================================================
--- trunk/openlayers/examples/example-list.html	2011-02-22 14:11:57 UTC (rev 11237)
+++ trunk/openlayers/examples/example-list.html	2011-02-22 14:22:00 UTC (rev 11238)
@@ -14,14 +14,24 @@
         <link rel="stylesheet" href="style.css" type="text/css" />
         <style type="text/css">
             html, body {
-                height: 100%;
-                overflow: hidden;
                 margin: 0;
                 padding: 0;
                 line-height: 1.25em;
             }
+            #logo {
+                text-shadow: 2px 2px 3px gray;
+                color: white;
+                vertical-align: middle;
+                position: absolute;
+                top: 5px;
+                left: 5px;
+                font-size: 34px;
+                font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
+            }
+            #logo img {
+                vertical-align: middle;
+            }
             .ex_container{
-                border-bottom: 1px solid #cccccc;
             }
             .ex_container a {
                 text-decoration: none;
@@ -57,20 +67,18 @@
                 display: none;
             }
             #toc {
-                width: 30%;
+                width: 100%;
                 height: 100%;
             }
             #filter {
+                position: fixed;
+                text-align: center;
                 top: 0px;
-                height: 50px;
-                padding: 10px 1em 10px 1em;
+                background: #9D9FA1;
+                width: 100%;
+                padding: 1.3em 0;
             }
             #examples {
-                border-top: 1px solid #cccccc;
-                position: absolute;
-                width: 30%;
-                top: 70px;
-                bottom: 0px;
                 overflow: auto;
                 list-style: none;
                 margin: 0;
@@ -80,12 +88,21 @@
                 list-style: none;
                 margin: 0;
                 padding: 0;
+                margin-top: 4em;
             }
             #examples ul li {
-                display: block;
-                margin: 0;
+                display: inline;
+                float: left;
+                width: 350px;
+                margin: 10px 0 0 10px;
                 padding: 0;
+                border: 1px solid #ddd;
+                border-radius: 3px;
             }
+            #examples .mainlink {
+                height: 8em;
+                overflow: hidden;
+            }
             #exwin {
                 position: absolute;
                 top: 0;
@@ -96,6 +113,26 @@
                 border-left: 1px solid #cccccc;
                 margin: 0;
             }
+            @media only screen and (max-width: 600px) {
+                #examples ul {
+                    margin-top: 100px;
+                }
+                #filter {
+                    padding-top: 50px;
+                }
+                #examples ul li {
+                    margin-left: 0;
+                    border-radius: 0;
+                    border-width: 1px 0;
+                    width: 100%;
+                }
+                #examples .mainlink {
+                    height: auto;
+                }
+                #examples .ex_tags, #examples .ex_filename {
+                    display: none;
+                }
+            }
         </style>
         <script type="text/javascript" src="Jugl.js"></script>
         <script type="text/javascript" src="example-list.js"></script>
@@ -133,7 +170,7 @@
                     for(var i=0; i<words.length; ++i) {
                         var word = words[i].toLowerCase()
                         var dict = info.index[word];
-                        if(dict) {
+                        var updateScores = function() {
                             for(exIndex in dict) {
                                 var count = dict[exIndex];
                                 if(scores[exIndex]) {
@@ -148,6 +185,18 @@
                                 }
                             }
                         }
+                        if(dict) {
+                            updateScores();
+                        } else {
+                            var r;
+                            for (idx in info.index) {
+                               r = new RegExp(word);
+                               if (r.test(idx)) {
+                                    dict = info.index[idx];
+                                    updateScores();
+                               }
+                            }
+                        }
                     }
                     examples = [];
                     for(var j in scores) {
@@ -201,10 +250,10 @@
                 }
             }
             window.onload = function() {
+                //document.getElementById('keywords').focus();
                 template = new jugl.Template("template");
                 target = document.getElementById("examples");
                 listExamples(info.examples);
-                document.getElementById("exwin").src = "../examples/example.html";
                 document.getElementById("keywords").onkeyup = inputChange
                 parseQuery();
             };
@@ -213,20 +262,24 @@
     <body>
         <div id="toc">
             <div id="filter">
+                <div id="logo">
+                <img src="http://www.openlayers.org/images/OpenLayers.trac.png"
+                 />
+                 OpenLayers
+             </div>
                 <p>
-                    <label for="keywords">Filter by keywords</label><br />
-                    <input type="text" id="keywords" />
-                    <span id="count"></span><br />
+                    <input autofocus placeholder="filter by keywords..." type="text" id="keywords" />
+                    <span id="count"></span>
                     <a href="javascript:void showAll();">show all</a>
                 </p>
             </div>
             <div id="examples"></div>
         </div>
-        <iframe id="exwin" name="exwin" frameborder="0"></iframe>        
         <div style="display: none;">
             <ul id="template">
                 <li class="ex_container" jugl:repeat="example examples">
-                    <a jugl:attributes="href example.link" target="exwin">
+                <a jugl:attributes="href example.link" class="mainlink"
+                    target="_blank">
                         <h5 class="ex_title">
                             <span jugl:replace="example.title">title</span><br />
                             <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>