mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-12 19:28:22 +00:00
wip search
This commit is contained in:
parent
ad08b45041
commit
5e38153b36
@ -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 }">
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user