Improve design of search
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Peter Stuifzand 2020-11-01 18:44:50 +01:00
parent 120989b73c
commit ea5f0dbe26
2 changed files with 19 additions and 12 deletions

View File

@ -250,7 +250,6 @@ mark {
} }
#autocomplete { #autocomplete {
z-index: 1; z-index: 1;
right: 0;
width: 640px; width: 640px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -441,3 +440,16 @@ input.input-line, input.input-line:active {
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
.searchbar {
position: relative;
display: flex;
justify-content: center;
.field > .control {
width: 100%;
}
.search.input {
width: 400px;
}
}

View File

@ -40,17 +40,12 @@
</div> </div>
</nav> </nav>
<div class="level"> <div class="searchbar">
<div class="level-left"></div> <div class="field">
<div class="level-right"> <p class="control">
<div class="level-item"> <input class="search input" id="search-input" type="text" placeholder="Find a page">
<div class="field"> </p>
<p class="control"> <div id="autocomplete" class="hide keyboard-list" tabindex="0"></div>
<input class="search input" id="search-input" type="text" placeholder="Find a page">
</p>
<div id="autocomplete" class="hide keyboard-list" tabindex="0"></div>
</div>
</div>
</div> </div>
</div> </div>