From d4ed70b6bbec8e051d7c633d2b1259204c66e3c7 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Wed, 31 Mar 2021 21:14:21 +0200 Subject: [PATCH 1/6] Add searchsuggestions component --- src/components/SearchSuggestions.vue | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/components/SearchSuggestions.vue diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue new file mode 100644 index 00000000..64e58aa4 --- /dev/null +++ b/src/components/SearchSuggestions.vue @@ -0,0 +1,13 @@ + + + + + From 9016032d48e458d50a830489365d39878c65cd23 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Thu, 1 Apr 2021 00:09:39 +0200 Subject: [PATCH 2/6] Add non-interactive suggestions --- src/App.vue | 74 ++------------------- src/components/Navigation.vue | 99 ++++++++++++++++++++++++++++ src/components/SearchSuggestions.vue | 31 ++++++++- 3 files changed, 132 insertions(+), 72 deletions(-) create mode 100644 src/components/Navigation.vue diff --git a/src/App.vue b/src/App.vue index 73f6c072..0fca9e1d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,53 +3,7 @@ class="uk-container uk-container-expand uk-light uk-height-viewport" style="background: #0b0e0f" > - -
- -
- +
@@ -70,30 +24,10 @@ diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue new file mode 100644 index 00000000..e9d2399f --- /dev/null +++ b/src/components/Navigation.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue index 64e58aa4..652965ee 100644 --- a/src/components/SearchSuggestions.vue +++ b/src/components/SearchSuggestions.vue @@ -1,5 +1,13 @@ - + From f922dd74eb74c16c4e9bf54de5ea96b5a6c0d118 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Tue, 6 Apr 2021 12:10:17 +0200 Subject: [PATCH 3/6] Make suggestions interactive --- src/components/Navigation.vue | 30 +++++------- src/components/SearchSuggestions.vue | 68 ++++++++++++++++++++++++++-- 2 files changed, 75 insertions(+), 23 deletions(-) diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue index e9d2399f..461c0ae9 100644 --- a/src/components/Navigation.vue +++ b/src/components/Navigation.vue @@ -6,11 +6,7 @@ >
iped
@@ -19,7 +15,7 @@ type="text" placeholder="Search" v-model="searchText" - @keypress="onChange($event)" + @keydown="onKeyDown" @focus="onInputFocus" @blur="onInputBlur" /> @@ -44,20 +40,20 @@ type="text" placeholder="Search" v-model="searchText" - @keypress="onChange($event)" + @keydown="onKeyDown" @focus="onInputFocus" @blur="onInputBlur" />
@@ -26,6 +77,13 @@ export default { max-width: 640px; width: 100%; box-sizing: border-box; + padding: 5px 0; +} +.suggestion { + padding: 4px 15px; +} +.suggestion.selected { + background-color: #393d3d; } @media screen and (max-width: 959px) { .suggestions-container { From 6528ce7bf8bc4a3cf4379b4ee1f5a4b0b17a6082 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Wed, 7 Apr 2021 11:22:55 +0200 Subject: [PATCH 4/6] make suggestion clickable, fix event listener issue --- src/components/Navigation.vue | 8 +++--- src/components/SearchSuggestions.vue | 38 ++++++++++++++++------------ 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue index 461c0ae9..d8d1a9d9 100644 --- a/src/components/Navigation.vue +++ b/src/components/Navigation.vue @@ -15,7 +15,7 @@ type="text" placeholder="Search" v-model="searchText" - @keydown="onKeyDown" + @keyup="onKeyUp" @focus="onInputFocus" @blur="onInputBlur" /> @@ -40,7 +40,7 @@ type="text" placeholder="Search" v-model="searchText" - @keydown="onKeyDown" + @keyup="onKeyUp" @focus="onInputFocus" @blur="onInputBlur" /> @@ -49,6 +49,7 @@ v-show="searchText && suggestionsVisible" :searchText="searchText" @searchchange="onSearchTextChange" + ref="searchSuggestions" /> @@ -66,7 +67,7 @@ export default { }; }, methods: { - onKeyDown(e) { + onKeyUp(e) { if (e.key === "Enter") { this.$router.push({ name: "SearchResults", @@ -76,6 +77,7 @@ export default { } else if (e.key === "ArrowUp" || e.key === "ArrowDown") { e.preventDefault(); } + this.$refs.searchSuggestions.onKeyUp(e); }, onInputFocus() { this.suggestionsVisible = true; diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue index ddfa2c73..b4ebf9f5 100644 --- a/src/components/SearchSuggestions.vue +++ b/src/components/SearchSuggestions.vue @@ -5,6 +5,8 @@ v-for="(suggestion, i) in searchSuggestions" :key="i" :class="{ selected: selected === i }" + @mouseover="onMouseOver(i)" + @mousedown.stop="onClick(i)" class="uk-margin-remove suggestion" > {{ suggestion }} @@ -30,16 +32,16 @@ export default { onKeyUp(e) { if (e.key === "ArrowUp") { if (this.selected <= 0) { - this.selected = this.searchSuggestions.length - 1; + this.setSelected(this.searchSuggestions.length - 1); } else { - this.selected -= 1; + this.setSelected(this.selected - 1); } e.preventDefault(); } else if (e.key === "ArrowDown") { if (this.selected >= this.searchSuggestions.length - 1) { - this.selected = 0; + this.setSelected(0); } else { - this.selected += 1; + this.setSelected(this.selected + 1); } e.preventDefault(); } else { @@ -51,20 +53,24 @@ export default { Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText) ); this.searchSuggestions.unshift(this.searchText); - } - }, - watch: { - selected(newValue, oldValue) { - if (newValue !== oldValue && this.searchSuggestions[this.selected]) { - this.$emit("searchchange", this.searchSuggestions[this.selected]); + this.setSelected(0); + }, + onMouseOver(i) { + if (i !== this.selected) { + this.selected = i; } + }, + onClick(i) { + this.setSelected(i); + this.$router.push({ + name: "SearchResults", + query: { search_query: this.searchText } + }); + }, + setSelected(val) { + this.selected = val; + this.$emit("searchchange", this.searchSuggestions[this.selected]); } - }, - mounted() { - window.addEventListener("keyup", this.onKeyUp); - }, - beforeUnmount() { - window.removeEventListener("keyup", this.onKeyUp); } }; From 56464aeca0f9b6fe78aba5c9404ca3de656912a1 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Wed, 7 Apr 2021 11:27:17 +0200 Subject: [PATCH 5/6] Make desktop search box bigger --- src/components/Navigation.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue index d8d1a9d9..242c5f63 100644 --- a/src/components/Navigation.vue +++ b/src/components/Navigation.vue @@ -11,7 +11,7 @@
Date: Wed, 7 Apr 2021 16:51:49 +0530 Subject: [PATCH 6/6] Fix race condition. It takes time for the emit function to actually fire. --- src/components/SearchSuggestions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue index b4ebf9f5..3de42746 100644 --- a/src/components/SearchSuggestions.vue +++ b/src/components/SearchSuggestions.vue @@ -64,7 +64,7 @@ export default { this.setSelected(i); this.$router.push({ name: "SearchResults", - query: { search_query: this.searchText } + query: { search_query: this.searchSuggestions[i] } }); }, setSelected(val) {