wip search

This commit is contained in:
Filipe Medeiros 2021-10-12 18:55:15 +01:00
parent ad08b45041
commit 5e38153b36
2 changed files with 48 additions and 3 deletions

View File

@ -3,8 +3,13 @@
<Menu style="flexShrink: 0" />
<main
class="uk-container uk-container-expand"
style="height: 100vh; overflow: scroll; flex: 1;"
:style="{ background: backgroundColor, colour: foregroundColor, marginTop: isMobile ? '70px' : 0 }"
style="overflow-y: scroll; overflow-x: hidden; flex: 1;"
:style="{
background: backgroundColor,
colour: foregroundColor,
marginTop: isMobile ? '70px' : 0,
height: isMobile ? 'calc(100vh - 70px)' : '100vh',
}"
:class="{ 'uk-light': darkMode }"
>
<router-view v-slot="{ Component }">

View File

@ -18,8 +18,14 @@
class="uk-search-input"
style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
:style="{ backgroundColor: secondaryBackgroundColor }"
type="search"
v-model="searchText"
type="text"
role="search"
:title="$t('actions.search')"
:placeholder="$t('actions.search')"
@keyup="onKeyUp"
@focus="onInputFocus"
@blur="onInputBlur"
/>
<font-awesome-icon
icon="search"
@ -28,6 +34,12 @@
/>
</div>
</form>
<SearchSuggestions
v-show="searchText && suggestionsVisible"
ref="searchSuggestions"
:search-text="searchText"
@searchchange="onSearchTextChange"
/>
<div
v-if="!isMobile"
@ -54,11 +66,13 @@
<script>
import VideoItem from "@/components/VideoItem.vue";
import SearchSuggestions from "@/components/SearchSuggestions";
import { useIsMobile } from "../store";
export default {
components: {
SearchSuggestions,
VideoItem,
},
props: {
@ -71,8 +85,11 @@ export default {
data() {
return {
videos: [],
searchText: "",
suggestionsVisible: false,
};
},
mounted() {
let region = this.getPreferenceString("region", "US");
@ -91,6 +108,29 @@ export default {
region: region || "US",
});
},
onKeyUp(e) {
if (e.key === "Enter") {
e.target.blur();
this.$router.push({
name: "SearchResults",
query: { search_query: this.searchText },
});
return;
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
e.preventDefault();
}
this.$refs.searchSuggestions.onKeyUp(e);
},
onInputFocus() {
this.suggestionsVisible = true;
},
onInputBlur() {
this.suggestionsVisible = false;
},
onSearchTextChange(searchText) {
this.searchText = searchText;
},
},
};
</script>