diff --git a/webapp/package.json b/webapp/package.json index 71b28aa..e613c51 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -9,9 +9,11 @@ "start": "node __sapper__/build" }, "dependencies": { + "body-parser": "^1.19.0", "compression": "^1.7.1", "date-fns": "^2.16.1", "dompurify": "^2.2.2", + "form-data": "^3.0.0", "isomorphic-fetch": "^3.0.0", "jsdom": "^16.4.0", "lodash": "^4.17.20", diff --git a/webapp/src/components/Nav.svelte b/webapp/src/components/Nav.svelte index 513bb24..04099ab 100644 --- a/webapp/src/components/Nav.svelte +++ b/webapp/src/components/Nav.svelte @@ -6,11 +6,16 @@ const { page } = stores(); let search; + let isSearching; - let handleSearch = debounce(_handleSearch, 300, { + let __handleSearch = debounce(_handleSearch, 300, { trailing: true, leading: false, }); + let handleSearch = (e) => { + isSearching = true; + __handleSearch(e); + }; page.subscribe((page) => { setTimeout(() => { @@ -24,6 +29,7 @@ const url = `/search?q=${event.target.value}`; await prefetch(url); await goto(url); + isSearching = false; } @@ -57,6 +63,12 @@ flex-direction: row; justify-content: space-between; } + + /* @media (max-device-width: 480px) { + .navigation-container { + justify-content: space-evenly; + } + } */ .navigation-container > * { vertical-align: middle; } @@ -77,29 +89,61 @@ } .navigation-input { line-height: 2; - margin: 1em; vertical-align: middle; - width: 20rem; - max-width: 50vw; + width: 30rem; + max-width: 45vw; + font-size: 1.1rem; + padding: 0.25em 0.5em; + margin: 0.25em 0.5em; + border-radius: 5px; + border: solid 1px #aaa; + } + input:focus { + box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25); + } + + .is-searching { + padding-right: 0.5rem; + background-image: url(/svg-loaders/black/grid.svg); + background-size: 1.2em 1.2em; + background-position: right 0.5em center; + background-repeat: no-repeat; } + + + +