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

93
examples/example-list.html
View File

@@ -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,11 +88,20 @@
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;
@@ -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>