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

Merge pull request #3860 from tschaub/update-bootstrap

Browse Source 
Update example layout.
This commit is contained in:
Tim Schaub
2015-07-01 08:01:32 -06:00
parent 3f918f4e8d d1f19b8e0d
commit ccaca9fc52
4 changed files with 90 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
config/examples/example.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<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="./resources/layout.css" type="text/css">
{{{ extraHead }}}
@@ -15,13 +15,11 @@
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container" id="navbar-inner-container">
<a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
</div>
<header class="navbar" role="navigation">
<div class="container" id="navbar-inner-container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
</div>
</div>
</header>
<div class="container-fluid">
@@ -52,8 +50,8 @@
&lt;head&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;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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;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.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;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"&gt;&lt;/script&gt;
{{ extraHead }}
@@ -77,8 +75,8 @@
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.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/prism/prism.min.js"></script>
{{{ js.tag }}}

2
examples/geolocation-orientation.html
View File

@@ -10,7 +10,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<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="./resources/layout.css" type="text/css">
<title>Mobile Geolocation Tracking with Orientation</title>

63
examples/index.html
View File

@@ -4,24 +4,33 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<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="./resources/layout.css" type="text/css">
<style>
body {
padding-top: 70px;
}
.navbar-form {
margin-top: 12px;
}
input.search-query {
color: #333;
}
.example {
padding: 10px;
background-color: #F5F5F5;
height: 140px;
padding: 3px;
background-color: #eee;
border-radius: 3px;
margin-bottom: 10px;
margin: 10px 0;
overflow: auto;
}
.example p.description {
font-size: smaller;
margin: 5px 0;
}
.example:hover {
background-color: #ddd;
}
.navbar-search.pull-left {
padding: 5px;
}
::-webkit-scrollbar {
width: 8px;
@@ -174,35 +183,31 @@
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
<form class="navbar-search pull-left">
<input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
<span id="count"></span>
</form>
</div>
<header class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
<form class="navbar-form navbar-left" role="search">
<input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
<span id="count"></span>
</form>
</div>
</div>
</header>
<div class="container-fluid">
<div id="examples"></div>
<div style="display: none;">
<div id="template">
<div class="span4 example" jugl:repeat="example examples">
<a jugl:attributes="href example.link" class="mainlink">
<strong><span jugl:replace="example.title">title</span></strong><br>
<small jugl:content="'(' + example.example + ')'"></small>
</a>
<p><div jugl:content="example.shortdesc"></div></p>
<p><small jugl:content="'tags: ' + example.tags"></small></p>
<div id="template" class="row">
<div class="col-md-4 col-sm-4" jugl:repeat="example examples">
<div class="example">
<a jugl:attributes="href example.link" class="mainlink">
<strong><span jugl:replace="example.title">title</span></strong><br>
<small jugl:content="'(' + example.example + ')'"></small>
</a>
<p class="description" jugl:content="example.shortdesc"></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

63
examples/resources/layout.css
View File

@@ -1,15 +1,59 @@
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
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 {
height: 400px;
width: 100%;
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);
height: 1.5em;
}
.ol-attribution ul {
font-size: 1rem;
}
.ol-control button, .ol-attribution, .ol-scale-line-inner {
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
@@ -21,18 +65,3 @@ body {
#api-links ul {
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;
}