Merge pull request #9487 from tschaub/examples-layout

Avoid header expanding over examples
This commit is contained in:
Tim Schaub
2019-05-03 08:28:27 -06:00
committed by GitHub
2 changed files with 19 additions and 3 deletions

View File

@@ -11,9 +11,25 @@
body { body {
padding-top: 70px; padding-top: 70px;
} }
img.header-logo {
padding-left: 18px;
}
input.search-query { input.search-query {
color: #333; color: #333;
} }
@media (max-width: 480px) {
input.search-query {
width: 110px;
}
#count {
display: none;
}
}
@media (max-width: 374px) {
input.search-query {
display: none;
}
}
.example { .example {
display: block; display: block;
padding: 10px; padding: 10px;
@@ -182,9 +198,9 @@
<body> <body>
<header class="navbar navbar-fixed-top" role="navigation"> <header class="navbar navbar-fixed-top" role="navigation">
<div class="container"> <div class="container-fluid">
<div class="display-table pull-left"> <div class="display-table pull-left">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a> <a class="navbar-brand" href="./"><img class="header-logo" src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
<form class="navbar-form" role="search"> <form class="navbar-form" role="search">
<input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus> <input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus>
<span id="count"></span> <span id="count"></span>

View File

@@ -78,7 +78,7 @@
<header class="navbar" role="navigation"> <header class="navbar" role="navigation">
<div class="container"> <div class="container">
<div class="display-table pull-left" id="navbar-logo-container"> <div class="display-table pull-left" id="navbar-logo-container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a> <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
</div> </div>
<!-- menu items that get hidden below 768px width --> <!-- menu items that get hidden below 768px width -->
<nav class='collapse navbar-collapse navbar-responsive-collapse'> <nav class='collapse navbar-collapse navbar-responsive-collapse'>