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

Update bootstrap, cleanup css, make pages more responsive

Browse Source
This commit is contained in:
jeanpierre
2020-07-22 22:57:44 +02:00
committed by Andreas Hocevar
parent 4eab8ecd40
commit 9616dee9f7
23 changed files with 337 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/button-title.html
+3 -3
View File
@@ -6,8 +6,8 @@ docs: >
This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
tags: "custom, tooltip"
resources:
- https://code.jquery.com/jquery-2.2.3.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
---
<div id="map" class="map"></div>
examples/index.html
+33 -43
View File
@@ -4,38 +4,21 @@
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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;
}
img.header-logo {
padding-left: 18px;
}
input.search-query {
color: #333;
}
@media (max-width: 480px) {
input.search-query {
width: 110px;
}
#count {
display: none;
}
}
@media (max-width: 374px) {
input.search-query {
display: none;
}
}
.example {
display: block;
padding: 10px;
background-color: #F5F5F5;
padding: 0.65rem;
height: 140px;
margin: 10px 0;
margin: 0.65rem 0;
overflow: auto;
}
.example p.description {
@@ -43,7 +26,7 @@
margin: 5px 0;
}
.example:hover {
background-color: #ddd;
background-color: #F5F5F5;
}
::-webkit-scrollbar {
@@ -77,33 +60,38 @@
</head>
<body>
<header class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="display-table pull-left">
<a class="navbar-brand" href="./"><img class="header-logo" src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
<form class="navbar-form" role="search">
<input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autocomplete="off" autofocus>
<span id="count"></span>
</form>
</div>
<!-- menu items that get hidden below 768px width -->
<nav class='collapse navbar-collapse navbar-responsive-collapse'>
<ul class="nav navbar-nav pull-right">
<li><a href="../doc">Docs</a></li>
<li><a class="active" href="index.html">Examples</a></li>
<li><a href="../apidoc">API</a></li>
<li><a href="https://github.com/openlayers/openlayers">Code</a></li>
</ul>
</nav>
</div>
<header class="navbar navbar-expand-md navbar-dark mb-3 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<form class="form-inline" role="search">
<div class="input-group">
<input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
<div class="input-group-append">
<span class="input-group-text text-white bg-transparent" id="count"></span>
</div>
</div>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="../doc">Docs</a></li>
<li class="nav-item active"><a class="nav-link" href="index.html">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc">API</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/openlayers/openlayers">Code</a></li>
</ul>
</nav>
</header>
<div class="container-fluid">
<div id="examples"></div>
<div style="display: none;">
<div id="template" class="row">
<div class="col-md-4 col-sm-4" jugl:repeat="example examples">
<a jugl:attributes="href example.link" class="example">
<div id="template" class="row mt-3">
<div class="col-md-4 col-sm-6" jugl:repeat="example examples">
<a jugl:attributes="href example.link" class="example bg-light border rounded">
<span class="mainlink">
<strong><span jugl:replace="example.title">title</span></strong><br>
<small jugl:content="'(' + example.example + ')'"></small>
@@ -114,5 +102,7 @@
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
examples/index.js
+1 -1
View File
@@ -10,7 +10,7 @@
clone: true,
parent: target,
});
document.getElementById('count').innerHTML = '(' + examples.length + ')';
document.getElementById('count').innerHTML = ' ' + examples.length + ' ';
}
let timerId;
examples/overlay.css
+2 -2
View File
@@ -13,6 +13,6 @@
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-content {
min-width: 180px;
.popover-body {
min-width: 276px;
}
examples/overlay.html
+4 -4
View File
@@ -3,12 +3,12 @@ layout: example.html
title: Overlay
shortdesc: Demonstrates overlays.
docs: >
<p>The popups are created using <a href="http://getbootstrap.com/javascript/#popovers">Popovers</a> from Bootstrap.</p>
<p>The popups are created using <a href="https://getbootstrap.com/docs/4.5/components/popovers/">Popovers</a> from Bootstrap.</p>
tags: "overlay, popup, bootstrap, popover"
resources:
- https://code.jquery.com/jquery-2.2.3.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
---
<div id="map" class="map"></div>
<div style="display: none;">
examples/overlay.js
+2 -1
View File
@@ -48,9 +48,10 @@ map.on('click', function (evt) {
const coordinate = evt.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('destroy');
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
container: element,
placement: 'top',
animation: false,
html: true,
examples/resources/layout.css
+17
View File
@@ -35,6 +35,23 @@ body {
.display-table {
display: table;
}
a {
color: #03899c;
text-decoration:none
}
a:hover, a:focus, footer a:hover, footer a:focus {
color: #ff7a00;
text-decoration:none
}
.btn-link {
font-weight: 400;
color: #03899c;
text-decoration: none;
}
.btn-link:hover {
color: #ff7a00;
text-decoration: none;
}
.version-form, .navbar-form {
display: table-cell;
vertical-align: middle;
examples/templates/example.html
+28 -27
View File
@@ -62,8 +62,8 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
@@ -76,21 +76,20 @@
</head>
<body>
<header class="navbar" role="navigation">
<div class="container">
<div class="display-table pull-left" id="navbar-logo-container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
</div>
<!-- menu items that get hidden below 768px width -->
<nav class='collapse navbar-collapse navbar-responsive-collapse'>
<ul class="nav navbar-nav pull-right">
<li><a href="../doc">Docs</a></li>
<li><a class="active" href="index.html">Examples</a></li>
<li><a href="../apidoc">API</a></li>
<li><a href="https://github.com/openlayers/openlayers">Code</a></li>
</ul>
</nav>
</div>
<header class="navbar navbar-expand-sm navbar-dark mb-3" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<ul class="nav navbar-nav ml-auto" >
<li class="nav-item"><a class="nav-link" href="../doc">Docs</a></li>
<li class="nav-item active"><a class="nav-link" href="index.html">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc">API</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/openlayers/openlayers">Code</a></li>
</ul>
</nav>
</header>
<div class="container-fluid">
@@ -107,14 +106,14 @@
</div>
<div class="row-fluid">
<a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
<a href="" class="codepen-button float-right"><i class="fa fa-codepen fa-lg"></i> Edit</a>
<div class="span12">
<h4 id="title">
{{ title }}
</h4>
<p class="tags">
{{#each tags}}
<a href="./index.html?q={{.}}" class="label label-primary">{{.}}</a>
<a href="./index.html?q={{.}}" class="badge badge-info">{{.}}</a>
{{/each}}
</p>
{{{ contents }}}
@@ -133,17 +132,17 @@
<div class="row-fluid">
<div class="source-controls">
<a class="copy-button" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard"></i> Copy</a>
<button class="copy-button btn btn-link" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
</div>
<pre><legend>main.js</legend><code id="example-js-source" class="language-js">import 'ol/ol.css';
<pre><legend>main.js</legend><hr /><code id="example-js-source" class="language-js">import 'ol/ol.css';
{{ js.source }}</code></pre>
</div>
<div class="row-fluid">
<div class="source-controls">
<a class="copy-button" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard"></i> Copy</a>
<button class="copy-button btn btn-link" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
</div>
<pre><legend>index.html</legend><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
<pre><legend>index.html</legend><hr /><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;{{ title }}&lt;/title&gt;
@@ -168,20 +167,22 @@
{{#if worker.source}}
<div class="row-fluid">
<div class="source-controls">
<a class="copy-button" id="copy-worker-button" data-clipboard-target="#example-worker-source"><i class="fa fa-clipboard"></i> Copy</a>
<button class="copy-button btn btn-link" id="copy-worker-button" data-clipboard-target="#example-worker-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
</div>
<pre><legend>worker.js</legend><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
<pre><legend>worker.js</legend><hr /><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
</div>
{{/if}}
<div class="row-fluid">
<div class="source-controls">
<a class="copy-button" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard"></i> Copy</a>
<button class="copy-button btn btn-link" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
</div>
<pre><legend>package.json</legend><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
<pre><legend>package.json</legend><hr /><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="./resources/common.js"></script>
<script src="./resources/prism/prism.min.js"></script>
{{{ js.tag }}}