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

Put a search box in the layout

Browse source
This commit is contained in:
Magnus Hoff 2017-10-25 10:52:04 +02:00
parent 9336fbf3cd
commit 313fc16add
3 changed files with 37 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
assets/style.css
View file

@ -74,7 +74,7 @@ article>hr {
margin-right: auto; margin-right: auto;
} }
header, article>* { header, article>*, .search {
box-sizing: border-box; box-sizing: border-box;
max-width: 616px; max-width: 616px;
width: 100%; width: 100%;
@ -274,10 +274,6 @@ h1>input {
} }
@media (min-width: 630px) { @media (min-width: 630px) {
header {
margin-top: 60px;
}
.editor-controls { .editor-controls {
position: fixed; position: fixed;
left: auto; left: auto;
@ -300,3 +296,38 @@ article ul.search-results {
.snippet { .snippet {
white-space: pre-line; white-space: pre-line;
} }
.search {
text-align: center;
margin-top: 30px;
}
.search input {
font-size: 18px;
font: inherit;
font-size: 18px;
line-height: 32px;
border-radius: 18px;
padding: 0 16px;
border: 1px solid #ccc;
transition: max-width 200ms;
width: 100%;
max-width: 250px;
box-sizing: border-box;
}
.search input:focus {
max-width: 250px;
border-color: #999;
}
@media (min-width: 630px) {
.search {
text-align: right;
}
.search input {
max-width: 125px;
}
}

1
templates/layout.html
View file

@ -8,6 +8,7 @@
<link href="_assets/style-{{style_css_checksum}}.css" rel="stylesheet"> <link href="_assets/style-{{style_css_checksum}}.css" rel="stylesheet">
</head> </head>
<body> <body>
<form class=search action=_search method=GET><input type=search name=q placeholder=search autocomplete=off></form>
{{{body}}} {{{body}}}
</body> </body>
</html> </html>

2
templates/search.html
View file

@ -4,8 +4,6 @@
</header> </header>
<article> <article>
<form method="GET"><input autofocus name="q" autocomplete=off value="{{query}}"></form>
{{#hits?}} {{#hits?}}
<p>Search results for the query <b>{{query}}</b>:</p> <p>Search results for the query <b>{{query}}</b>:</p>