serv/surwiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply new style to search

Browse source
This commit is contained in:
Magnus Hoff 2018-06-17 21:16:44 +02:00
parent e4629d8edb
commit 31ace5d4c2
2 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
assets/style.css
View file

@ -329,13 +329,13 @@ article ul.search-results {
display: block; display: block;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid #ccc; padding: 8px 16px;
padding: 8px; background: white;
color: black;
} }
.search-result a:hover, .search-result a:focus { .search-result a:hover, .search-result a:focus {
background: #0074D9; background: var(--theme-main);
border-color: #0074D9; color: var(--theme-text);
color: white;
} }
.search { .search {
@ -354,7 +354,6 @@ input[type="search"] {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
transition: max-width 200ms;
padding: 0 16px; padding: 0 16px;
margin: 0; margin: 0;
@ -367,23 +366,16 @@ input[type="search"] {
line-height: 32px; line-height: 32px;
height: 34px; height: 34px;
border-radius: 2px;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.search input:focus, .search.focus input {
max-width: 300px;
border-color: #999;
}
.search .live-results { .search .live-results {
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 266px; /* 300px - padding - border */ max-width: 300px;
background: white;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
@ -393,6 +385,16 @@ input[type="search"] {
max-height: 0px; max-height: 0px;
} }
.search-widget-container {
background: white;
border-radius: 2px;
overflow: hidden;
width: 100%;
max-width: 300px;
display: inline-block;
}
.live-results.show { .live-results.show {
max-height: 500px; max-height: 500px;
} }
@ -400,13 +402,8 @@ input[type="search"] {
.live-results .search-result { .live-results .search-result {
margin: 0; margin: 0;
} }
.live-results a {
border-top: none;
}
.live-results .search-result.error { .live-results .search-result.error {
border: 1px solid #ccc;
border-top: none;
padding: 8px; padding: 8px;
color: #888; color: #888;
} }
@ -414,16 +411,24 @@ input[type="search"] {
@media (min-width: 630px) { @media (min-width: 630px) {
.search { .search {
text-align: right; text-align: right;
height: 38px;
position: relative;
} }
.search input { .search-widget-container {
max-width: 125px; position: absolute;
right: 0;
width: 300px;
box-shadow: 0 0 0 rgba(0,0,0,0.2);
transition: all 0.2s ease-in-out;
}
.focus .search-widget-container {
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
} }
.search .live-results { .search .live-results {
position: absolute; width: 100%;
right: 8px;
margin: 0 16px;
max-height: 0px; max-height: 0px;
} }

8
templates/search_input.html
View file

@ -1,8 +1,10 @@
<div class="search-container"> <div class="search-container">
<form class="search keyboard-focus-control" action=_search method=GET> <form class="search keyboard-focus-control" action=_search method=GET>
<input data-focusindex="0" type=search name=q placeholder=search autocomplete=off> <div class="search-widget-container">
<ul class="live-results search-results"> <input data-focusindex="0" type=search name=q placeholder=search autocomplete=off>
</ul> <ul class="live-results search-results">
</ul>
</div>
</form> </form>
<ul id="search-result-prototype" class="prototype"><li class="search-result"><a tabindex="0" class="link" href=""><span class="title"></span> &ndash; <span class="snippet"></span></a></li></ul> <ul id="search-result-prototype" class="prototype"><li class="search-result"><a tabindex="0" class="link" href=""><span class="title"></span> &ndash; <span class="snippet"></span></a></li></ul>
<script src="_assets/search-{{search_js_checksum()}}.js" defer></script> <script src="_assets/search-{{search_js_checksum()}}.js" defer></script>