ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

say hi to the new examples index, which works on mobile devices as well, thanks to our web designer pair, Marc and Antoine

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11238 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2011-02-22 14:22:00 +00:00
parent b7babb5edf
commit f299a41340
1 changed files with 73 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/example-list.html
+73 -20
View File
@@ -14,14 +14,24 @@
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
html, body { html, body {
height: 100%;
overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 1.25em; 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{ .ex_container{
border-bottom: 1px solid #cccccc;
} }
.ex_container a { .ex_container a {
text-decoration: none; text-decoration: none;
@@ -57,20 +67,18 @@
display: none; display: none;
} }
#toc { #toc {
width: 30%; width: 100%;
height: 100%; height: 100%;
} }
#filter { #filter {
position: fixed;
text-align: center;
top: 0px; top: 0px;
height: 50px; background: #9D9FA1;
padding: 10px 1em 10px 1em; width: 100%;
padding: 1.3em 0;
} }
#examples { #examples {
border-top: 1px solid #cccccc;
position: absolute;
width: 30%;
top: 70px;
bottom: 0px;
overflow: auto; overflow: auto;
list-style: none; list-style: none;
margin: 0; margin: 0;
@@ -80,11 +88,20 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-top: 4em;
} }
#examples ul li { #examples ul li {
display: block; display: inline;
margin: 0; float: left;
width: 350px;
margin: 10px 0 0 10px;
padding: 0; padding: 0;
border: 1px solid #ddd;
border-radius: 3px;
}
#examples .mainlink {
height: 8em;
overflow: hidden;
} }
#exwin { #exwin {
position: absolute; position: absolute;
@@ -96,6 +113,26 @@
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
margin: 0; 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> </style>
<script type="text/javascript" src="Jugl.js"></script> <script type="text/javascript" src="Jugl.js"></script>
<script type="text/javascript" src="example-list.js"></script> <script type="text/javascript" src="example-list.js"></script>
@@ -133,7 +170,7 @@
for(var i=0; i<words.length; ++i) { for(var i=0; i<words.length; ++i) {
var word = words[i].toLowerCase() var word = words[i].toLowerCase()
var dict = info.index[word]; var dict = info.index[word];
if(dict) { var updateScores = function() {
for(exIndex in dict) { for(exIndex in dict) {
var count = dict[exIndex]; var count = dict[exIndex];
if(scores[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 = []; examples = [];
for(var j in scores) { for(var j in scores) {
@@ -201,10 +250,10 @@
} }
} }
window.onload = function() { window.onload = function() {
//document.getElementById('keywords').focus();
template = new jugl.Template("template"); template = new jugl.Template("template");
target = document.getElementById("examples"); target = document.getElementById("examples");
listExamples(info.examples); listExamples(info.examples);
document.getElementById("exwin").src = "../examples/example.html";
document.getElementById("keywords").onkeyup = inputChange document.getElementById("keywords").onkeyup = inputChange
parseQuery(); parseQuery();
}; };
@@ -213,20 +262,24 @@
<body> <body>
<div id="toc"> <div id="toc">
<div id="filter"> <div id="filter">
<div id="logo">
<img src="http://www.openlayers.org/images/OpenLayers.trac.png"
/>
OpenLayers
</div>
<p> <p>
<label for="keywords">Filter by keywords</label><br /> <input autofocus placeholder="filter by keywords..." type="text" id="keywords" />
<input type="text" id="keywords" /> <span id="count"></span>
<span id="count"></span><br />
<a href="javascript:void showAll();">show all</a> <a href="javascript:void showAll();">show all</a>
</p> </p>
</div> </div>
<div id="examples"></div> <div id="examples"></div>
</div> </div>
<iframe id="exwin" name="exwin" frameborder="0"></iframe>
<div style="display: none;"> <div style="display: none;">
<ul id="template"> <ul id="template">
<li class="ex_container" jugl:repeat="example examples"> <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"> <h5 class="ex_title">
<span jugl:replace="example.title">title</span><br /> <span jugl:replace="example.title">title</span><br />
<span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span> <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>