Add non-interactive suggestions
This commit is contained in:
Maurice Oegerli
parent
d4ed70b6bb
commit
9016032d48
74
src/App.vue
74
src/App.vue
|
|
@ -3,53 +3,7 @@
|
|||
class="uk-container uk-container-expand uk-light uk-height-viewport"
|
||||
style="background: #0b0e0f"
|
||||
>
|
||||
<nav
|
||||
class="uk-navbar-container uk-container-expand uk-light"
|
||||
style="background: #0b0e0f"
|
||||
uk-navbar
|
||||
>
|
||||
<div class="uk-navbar-left">
|
||||
<router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
|
||||
><img
|
||||
src="../public/img/icons/logo.svg"
|
||||
height="32"
|
||||
width="32"
|
||||
/>iped</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="uk-navbar-center uk-flex uk-visible@s">
|
||||
<input
|
||||
class="uk-input"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
v-model="searchText"
|
||||
@keypress="onChange($event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-navbar-right">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li>
|
||||
<router-link to="/preferences">Preferences</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/login">Login</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/feed">Feed</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="uk-container-expand uk-hidden@s">
|
||||
<input
|
||||
class="uk-input"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
v-model="searchText"
|
||||
@keypress="onChange($event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Navigation />
|
||||
<router-view />
|
||||
|
||||
<div style="text-align: center">
|
||||
|
|
@ -70,30 +24,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Constants from "@/Constants.js";
|
||||
import Navigation from "@/components/Navigation";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchText: "",
|
||||
searchSuggestions: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
if (e.key === "Enter") {
|
||||
this.$router.push({
|
||||
name: "SearchResults",
|
||||
query: { search_query: this.searchText }
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.fetchJson(
|
||||
Constants.BASE_URL +
|
||||
"/suggestions?query=" +
|
||||
encodeURI(this.searchText + e.key)
|
||||
);
|
||||
}
|
||||
components: {
|
||||
Navigation
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template
|
||||
><nav
|
||||
class="uk-navbar-container uk-container-expand uk-position-relative uk-light"
|
||||
style="background: #0b0e0f"
|
||||
uk-navbar
|
||||
>
|
||||
<div class="uk-navbar-left">
|
||||
<router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
|
||||
><img
|
||||
src="/img/icons/logo.svg"
|
||||
height="32"
|
||||
width="32"
|
||||
/>iped</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="uk-navbar-center uk-flex uk-visible@m">
|
||||
<input
|
||||
class="uk-input"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
v-model="searchText"
|
||||
@keypress="onChange($event)"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-navbar-right">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li>
|
||||
<router-link to="/preferences">Preferences</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/login">Login</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/feed">Feed</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="uk-container-expand uk-hidden@m">
|
||||
<input
|
||||
class="uk-input"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
v-model="searchText"
|
||||
@keypress="onChange($event)"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
/>
|
||||
</div>
|
||||
<SearchSuggestions
|
||||
v-if="searchText && suggestionsVisible && searchSuggestions.length > 0"
|
||||
:searchSuggestions="searchSuggestions"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchSuggestions from "@/components/SearchSuggestions";
|
||||
import Constants from "@/Constants.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchSuggestions
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchText: "",
|
||||
searchSuggestions: [],
|
||||
suggestionsVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async onChange(e) {
|
||||
if (e.key === "Enter") {
|
||||
this.$router.push({
|
||||
name: "SearchResults",
|
||||
query: { search_query: this.searchText }
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.searchSuggestions = await this.fetchJson(
|
||||
Constants.BASE_URL +
|
||||
"/suggestions?query=" +
|
||||
encodeURI(this.searchText + e.key)
|
||||
);
|
||||
},
|
||||
onInputFocus() {
|
||||
this.suggestionsVisible = true;
|
||||
},
|
||||
onInputBlur() {
|
||||
this.suggestionsVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
<template>
|
||||
<div class="uk-container-expand"></div>
|
||||
<div
|
||||
class="uk-position-absolute uk-panel uk-box-shadow-large uk-padding-small suggestions-container"
|
||||
>
|
||||
<ul class="uk-list uk-margin-remove uk-text-secondary">
|
||||
<li v-for="(suggestion, i) in searchSuggestions" :key="i">
|
||||
{{ suggestion }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -10,4 +18,23 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.suggestions-container {
|
||||
background-color: #242727;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 640px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media screen and (max-width: 959px) {
|
||||
.suggestions-container {
|
||||
max-width: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 639px) {
|
||||
.suggestions-container {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue