diff options
| author | Mirek Kratochvil <exa.exa@gmail.com> | 2023-06-17 23:19:36 +0200 |
|---|---|---|
| committer | Mirek Kratochvil <exa.exa@gmail.com> | 2023-06-17 23:19:36 +0200 |
| commit | 3db784b04eadbce697265d7440fb52a4ed18a232 (patch) | |
| tree | d8a178bd84b39d98d686add877f9437ca8cd1c74 | |
| parent | 0ae3dc41ba8ceedf091dcb529f4a234e0ac6734e (diff) | |
| download | reploy-3db784b04eadbce697265d7440fb52a4ed18a232.tar.gz reploy-3db784b04eadbce697265d7440fb52a4ed18a232.tar.bz2 | |
actually render the search results as clickable
| -rw-r--r-- | assets/style.css | 19 | ||||
| -rw-r--r-- | templates/header.html | 4 | ||||
| -rw-r--r-- | templates/search.html | 9 | ||||
| -rw-r--r-- | templates/searchresults.html | 27 |
4 files changed, 50 insertions, 9 deletions
diff --git a/assets/style.css b/assets/style.css index f5a657e..a030cea 100644 --- a/assets/style.css +++ b/assets/style.css @@ -116,6 +116,22 @@ h6 { text-align: center; } +ul.search-results li { + margin-bottom: 1em; +} + +ul.search-results li a.search-result { + font-size: 120%; + display: block; +} + +ul.search-results li div.search-tag { + display: block; + font-size: 80%; + color: #555; + font-weight: bold; +} + input.search { width: 100%; } @@ -250,17 +266,18 @@ main { padding-left: 2rem; padding-right: 2rem; - font-size: 80%; color: #777; } .sidebar-header { font-weight: bold; + font-size: 80%; } .sidebar-values { padding-left: 1em; margin-bottom: 1em; + font-size: 80%; } /* main content */ diff --git a/templates/header.html b/templates/header.html index 65de004..a82b1b4 100644 --- a/templates/header.html +++ b/templates/header.html @@ -31,10 +31,10 @@ <a href="{{root}}search">Search</a> </div> {{?htags}} - <div class="sidebar-header"> + <div class="sidebox-header"> Page categories </div> - <div class="sidebar-values"> + <div class="sidebox-values"> <ul> {{#htags}} <li>{{#.}}<a href="{{href}}">{{^tag}}all{{/tag}}{{?tag}} » {{tag}}{{/tag}}{{/.}}</a></li> diff --git a/templates/search.html b/templates/search.html new file mode 100644 index 0000000..eae555c --- /dev/null +++ b/templates/search.html @@ -0,0 +1,9 @@ +<html> +{{> head.html}} +<body> +{{> header.html}} +{{> searchform.html}} +{{> searchresults.html}} +{{> footer.html}} +</body> +</html> diff --git a/templates/searchresults.html b/templates/searchresults.html index 38a4c9a..4afb6f7 100644 --- a/templates/searchresults.html +++ b/templates/searchresults.html @@ -6,13 +6,15 @@ </div> <div id="search_noquery"> - <p>Enter a few words to the box above to start the search.</p> + <p>Enter a few words into the box above to start the search.</p> + <p>You may use <code>*</code> for wildcard search, and prefixes <code>+</code> for required terms and <code>-</code> for unwanted terms.</p> + <p><strong>Example:</strong> <code>laboratory noteb* +red -code</code> will find information about <em>laboratory notebooks</em> that must also describe something <em>red</em>, but do not contain any mention of <em>code</em>.</p> </div> <div id="search_success" style="display: none"> <h1>Search results</h1> - <div id="search_results"> - </div> + <ul id="search_results" class="search-results"> + </ul> </div> <div id="search_fail" style="display: none"> @@ -74,9 +76,20 @@ break; } - const r=results[ri] - var out = document.createElement("p") - out.appendChild(document.createTextNode(window.search_metadata[r.ref].title)) + const r = results[ri] + const m = window.search_metadata[r.ref] + var out = document.createElement("li") + var a = document.createElement("a") + a.className = "search-result" + a.appendChild(document.createTextNode(m.title)) + a.href = r.ref + out.appendChild(a) + for(var ti=0; ti<m.tags.length; ++ti) { + t = document.createElement("div") + t.className = "search-tag" + t.appendChild(document.createTextNode(m.tags[ti].join(" » "))); + out.appendChild(t); + } el_results.appendChild(out) } @@ -98,6 +111,8 @@ window.history.pushState("", "", window.location.pathname + '?search_query='+encodeURIComponent(ev.target.value) ) + // This reinstalls the listener only _after_ the original event is done, + // preventing infinite events and CPU boils if a cat steps on the keyboard. el_query.addEventListener('input', handle_search_input) } |