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

Use the latest Bootstrap

Browse Source
This commit is contained in:
Tim Schaub
2015-06-30 21:56:28 -06:00
parent 3f214f6ac4
commit d1f19b8e0d
4 changed files with 90 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/examples/example.html
+9 -11
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css">
{{{ extraHead }}} {{{ extraHead }}}
@@ -15,13 +15,11 @@
</head> </head>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top"> <header class="navbar" role="navigation">
<div class="navbar-inner"> <div class="container" id="navbar-inner-container">
<div class="container" id="navbar-inner-container"> <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
<a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
</div>
</div> </div>
</div> </header>
<div class="container-fluid"> <div class="container-fluid">
@@ -52,8 +50,8 @@
&lt;head&gt; &lt;head&gt;
&lt;title&gt;{{ title }}&lt;/title&gt; &lt;title&gt;{{ title }}&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt; &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css" type="text/css"&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css" type="text/css"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"&gt;&lt;/script&gt;
{{ extraHead }} {{ extraHead }}
@@ -77,8 +75,8 @@
</div> </div>
</div> </div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="./resources/common.js"></script> <script src="./resources/common.js"></script>
<script src="./resources/prism/prism.min.js"></script> <script src="./resources/prism/prism.min.js"></script>
{{{ js.tag }}} {{{ js.tag }}}
examples/geolocation-orientation.html
+1 -1
View File
@@ -10,7 +10,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css">
<title>Mobile Geolocation Tracking with Orientation</title> <title>Mobile Geolocation Tracking with Orientation</title>
examples/index.html
+34 -29
View File
@@ -4,24 +4,33 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css">
<style> <style>
body {
padding-top: 70px;
}
.navbar-form {
margin-top: 12px;
}
input.search-query {
color: #333;
}
.example { .example {
padding: 10px;
background-color: #F5F5F5;
height: 140px; height: 140px;
padding: 3px; margin: 10px 0;
background-color: #eee;
border-radius: 3px;
margin-bottom: 10px;
overflow: auto; overflow: auto;
} }
.example p.description {
font-size: smaller;
margin: 5px 0;
}
.example:hover { .example:hover {
background-color: #ddd; background-color: #ddd;
} }
.navbar-search.pull-left {
padding: 5px;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -174,35 +183,31 @@
</head> </head>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top"> <header class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <div class="container">
<div class="container"> <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
<a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a> <form class="navbar-form navbar-left" role="search">
<form class="navbar-search pull-left"> <input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
<input name="q" type="text" id="keywords" class="search-query" placeholder="Search"> <span id="count"></span>
<span id="count"></span> </form>
</form>
</div>
</div> </div>
</div> </header>
<div class="container-fluid"> <div class="container-fluid">
<div id="examples"></div> <div id="examples"></div>
<div style="display: none;"> <div style="display: none;">
<div id="template"> <div id="template" class="row">
<div class="span4 example" jugl:repeat="example examples"> <div class="col-md-4 col-sm-4" jugl:repeat="example examples">
<a jugl:attributes="href example.link" class="mainlink"> <div class="example">
<strong><span jugl:replace="example.title">title</span></strong><br> <a jugl:attributes="href example.link" class="mainlink">
<small jugl:content="'(' + example.example + ')'"></small> <strong><span jugl:replace="example.title">title</span></strong><br>
</a> <small jugl:content="'(' + example.example + ')'"></small>
<p><div jugl:content="example.shortdesc"></div></p> </a>
<p><small jugl:content="'tags: ' + example.tags"></small></p> <p class="description" jugl:content="example.shortdesc"></p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
examples/resources/layout.css
+46 -17
View File
@@ -1,15 +1,59 @@
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700); @import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
body { body {
padding-top: 60px; font-family: 'Quattrocento Sans', sans-serif;
font-size: 16px;
} }
.navbar {
background-color: #1F6B75;
color: white;
border: 0;
border-radius: 0;
}
.navbar-brand {
color: white;
font-weight: bold;
font-size: 160%;
padding: 8px 0;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #aae1e9;
}
.navbar-brand img {
height: 35px;
vertical-align: middle;
margin-right: 5px;
display: inline-block;
}
ul.inline,
ol.inline {
margin-left: 0;
padding-left: 0;
list-style: none;
}
ul.inline>li,
ol.inline>li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.map { .map {
height: 400px; height: 400px;
width: 100%; width: 100%;
background: url(map-background.jpg) repeat; background: url(map-background.jpg) repeat;
margin-bottom: 10px;
} }
.ol-attribution { .ol-attribution.ol-logo-only,
.ol-attribution.ol-uncollapsible {
max-width: calc(100% - 3em); max-width: calc(100% - 3em);
height: 1.5em;
}
.ol-attribution ul {
font-size: 1rem;
} }
.ol-control button, .ol-attribution, .ol-scale-line-inner { .ol-control button, .ol-attribution, .ol-scale-line-inner {
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif; font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
@@ -21,18 +65,3 @@ body {
#api-links ul { #api-links ul {
display: inline; display: inline;
} }
body, h1, h2, h3, h4, p, li, td, th {
font-family: Quattrocento Sans;
}
.navbar-inverse .navbar-inner {
background: #1F6B75;
}
.navbar-inverse .brand {
color: white;
padding: 5px;
}
.brand img {
width: 35px;
height: 35px;
}