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;
}
+
+
+
+