Make header and menu navigation consistent with web site

This commit is contained in:
Andreas Hocevar
2020-07-26 17:15:49 +02:00
parent 5b84b2470c
commit f70374e453
4 changed files with 74 additions and 28 deletions

View File

@@ -14,15 +14,15 @@
color: #fff;
font-size: 160%;
font-weight: bold;
padding 8px 0;
padding: 8px 0;
}
body {
padding-top: 50px;
padding-top: 55px;
}
.nameContainer .anchor {
padding-top: 50px;
margin-top: -50px;
padding-top: 70px;
margin-top: -70px;
width: 0px;
height: 0px;
}
@@ -70,7 +70,6 @@ li {
border-radius: 4px;
}
.navigation {
margin-top:15px;
background-color: #2a2a2a;
}
@media (max-width:768px) {
@@ -84,7 +83,6 @@ li {
.navigation .applicationName {
margin: 0;
margin-top: 15px;
padding: 10px 15px;
font: bold 1.25em Helvetica;
color: #fff;
@@ -411,13 +409,6 @@ span.type-signature.static {
margin-right: 5px;
color: gray;
}
.main .readme p {
/*
margin-top: 15px;
line-height: 1.2;
font-size: 0.9em;
*/
}
.main .readme h1 {
font-size: 1.7em;
}

View File

@@ -79,17 +79,35 @@ var version = obj.packageInfo.version;
</head>
<body>
<div class="container-fluid">
<header class="navbar navbar-expand-sm navbar-dark mb-3 fixed-top" role="navigation">
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png"> 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>
<nav class="collapse navbar-collapse" id="olmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="../doc">Docs</a></li>
<li class="nav-item"><a class="nav-link" href="../examples">Examples</a></li>
<li class="nav-item active"><a class="nav-link" href="index.html" class="">API</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/openlayers/openlayers">Code</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/en/latest/doc/">Docs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="../workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="../download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
</div>
</li>
</ul>
</nav>
</header>

View File

@@ -5,6 +5,7 @@
<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/4.5.0/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">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<style>
@@ -60,7 +61,7 @@
</head>
<body>
<header class="navbar navbar-expand-md navbar-dark mb-3 fixed-top" role="navigation">
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 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">
@@ -78,10 +79,28 @@
</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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
<a class="dropdown-item" href="../doc/">Docs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="../workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="../download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
</div>
</li>
</ul>
</nav>
</header>

View File

@@ -76,7 +76,7 @@
</head>
<body>
<header class="navbar navbar-expand-sm navbar-dark mb-3" role="navigation">
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" 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>
@@ -84,10 +84,28 @@
<!-- 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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
<a class="dropdown-item" href="../doc/">Docs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="../workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="../download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
</div>
</li>
</ul>
</nav>
</header>