From d81db05633b7a73889d57bef84fedbd288f39353 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Mart=C3=ADnez=20Portela?= Date: Mon, 17 Oct 2022 00:10:06 +0200 Subject: [PATCH] Show results on notes's search-box. --- scripts/generate.py | 4 +-- static/search-box.js | 27 +++++++++++++++++- static/style.css | 67 ++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 93 insertions(+), 5 deletions(-) diff --git a/scripts/generate.py b/scripts/generate.py index 688aabf..2013e4c 100644 --- a/scripts/generate.py +++ b/scripts/generate.py @@ -483,12 +483,12 @@ def as_document(html, title): {html} - + """ diff --git a/static/search-box.js b/static/search-box.js index 96c2177..e2ebd80 100644 --- a/static/search-box.js +++ b/static/search-box.js @@ -34,6 +34,15 @@ function _codigoparallevar_enable_search_box(selector, options) { element.onfocus = () => { resultsBoxBackdrop.classList.remove('hidden'); innerSearchBox.focus(); + + const wasKeyDown = document.onkeydown; + document.onkeydown = (ev) => { + if (ev.key === 'Escape') { + resultsBoxBackdrop.classList.add('hidden'); + document.onkeydown = wasKeyDown; + ev.stopPropagation(); + } + }; }; const DEBOUNCE_TIME = 500; // Milliseconds @@ -62,7 +71,20 @@ function _codigoparallevar_enable_search_box(selector, options) { return; } - console.log('=>', body); + resultsList.innerHTML = ''; + for (const note of body.results.notes) { + const resultCard = document.createElement('li'); + + const resultContents = document.createElement('a'); + resultContents.setAttribute('href', './' + note.id + '.node.html'); + + const resultTitle = document.createElement('h2'); + resultTitle.innerText = note.title; + + resultContents.appendChild(resultTitle); + resultCard.appendChild(resultContents); + resultsList.appendChild(resultCard); + } }); }; element.removeAttribute('disabled'); @@ -75,3 +97,6 @@ function _codigoparallevar_enable_search_box(selector, options) { }; } +// // TODO: Remove this when dev is done +// _codigoparallevar_enable_search_box('#searchbox', {placeholder: 'Search...'}) +// document.querySelector('#searchbox').focus() diff --git a/static/style.css b/static/style.css index bf7f170..aff1b07 100644 --- a/static/style.css +++ b/static/style.css @@ -19,6 +19,8 @@ body nav h1 { color: #000; display: inline-block; } + +/* Search box */ body nav input { background-color: transparent; color: #000; @@ -27,10 +29,56 @@ body nav input { } .results-box-container { z-index: 5; - position: absolute; + position: fixed; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.3); + top: 0; + left: 0; +} +.results-box-container.hidden { + display: none; +} +.results-box { + min-width: 50vw; + max-width: 90vw; + min-height: 20ex; + max-height: 90vh; + overflow: auto; + border-radius: 4px; + margin: 2rem auto; + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25); + background-color: #fff; +} + +.results-box-container .results-box input { + width: 90%; + margin: 0 auto; + padding-top: 2ex; + display: block; + background-color: transparent; + color: #000; + border: none; + border-bottom: 1px solid #444; +} + +/* Search box results */ +.results-box ul { + list-style: none; + padding: 0; +} +.results-box ul li { + padding: 0.25ex; + margin: 1ex; + border-radius: 4px; + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25); +} + +.results-box ul li h2 { + font-size: 125%; + padding: 1.25ex; + display: block; + margin: 0; } @font-face { @@ -239,7 +287,7 @@ tr.__table-separator { color: #fafafe; } a { - color: #94dcff; + color: #00fdf2; } h1,h2,h3,h4,h5,h6 { color: #f7da4a; @@ -264,6 +312,21 @@ tr.__table-separator { color: #ddd; border-bottom: 1px solid #888; } + .results-box-container .results-box input { + color: #ddd; + border-bottom: 1px solid #888; + } + .results-box { + box-shadow: none; + background-color: #262826; + } + .results-box ul li { + background-color: #303330; + box-shadow: none; + } + .results-box ul li h2 { + color: white; + } /* Code blocks */ pre {