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/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>