Added rudimentary release search.
This commit is contained in:
@@ -1,70 +1,108 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<router-link
|
||||
to="/home"
|
||||
class="logo-link"
|
||||
><h1 class="logo"><Icon icon="logo" /></h1></router-link>
|
||||
<div>
|
||||
<router-link
|
||||
to="/home"
|
||||
class="logo-link"
|
||||
><h1 class="logo"><Icon icon="logo" /></h1></router-link>
|
||||
|
||||
<nav class="nav">
|
||||
<ul class="nolist">
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/actors"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
<nav class="nav">
|
||||
<ul class="nolist">
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/actors"
|
||||
>
|
||||
<Icon icon="stars" /><span class="nav-label">Actors</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>
|
||||
<Icon icon="stars" /><span class="nav-label">Actors</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/networks"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/networks"
|
||||
>
|
||||
<Icon icon="earth2" /><span class="nav-label">Networks</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>
|
||||
<Icon icon="earth2" /><span class="nav-label">Networks</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/tags"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/tags"
|
||||
>
|
||||
<Icon icon="price-tags" /><span class="nav-label">Tags</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>
|
||||
<Icon icon="price-tags" /><span class="nav-label">Tags</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="search"
|
||||
@submit.prevent="search"
|
||||
>
|
||||
<input
|
||||
v-model="query"
|
||||
type="search"
|
||||
class="search-input"
|
||||
placeholder="Search..."
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="search-button"
|
||||
><Icon
|
||||
icon="search"
|
||||
/></button>
|
||||
</form>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
async function search() {
|
||||
this.$router.push({ name: 'search', query: { q: this.query } });
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query ? this.$route.query.q : null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $background;
|
||||
color: $primary;
|
||||
border-bottom: solid 1px $shadow-hint;
|
||||
@@ -128,6 +166,70 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
height: 100%;
|
||||
max-width: 20rem;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 1rem 0 0;
|
||||
border-left: solid 1px $shadow-hint;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 .5rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: $shadow;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
padding: .5rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
color: $text;
|
||||
background: url('/img/cancel-circle2.svg');
|
||||
opacity: .25;
|
||||
|
||||
&:hover {
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
color: $shadow-weak;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
margin: .3rem 0 0 0;
|
||||
|
||||
.icon {
|
||||
fill: $shadow-weak;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: $shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint0) {
|
||||
.nav-label {
|
||||
display: none;
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
<FilterBar :fetch-releases="fetchReleases" />
|
||||
|
||||
<div class="content-inner">
|
||||
<Releases
|
||||
:releases="releases"
|
||||
referer="home"
|
||||
/>
|
||||
<Releases :releases="releases" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -16,7 +13,7 @@ import FilterBar from '../header/filter-bar.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
|
||||
async function fetchReleases() {
|
||||
this.releases = await this.$store.dispatch('fetchReleases', { limit: 250 });
|
||||
this.releases = await this.$store.dispatch('fetchReleases', { limit: 20 });
|
||||
this.$store.commit('setCache', {
|
||||
target: 'home',
|
||||
releases: this.releases,
|
||||
|
||||
57
assets/components/search/search.vue
Normal file
57
assets/components/search/search.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="content-inner">
|
||||
<span
|
||||
v-if="!loading"
|
||||
class="summary"
|
||||
>Found {{ releases.length }} results for '{{ query }}'</span>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="summary"
|
||||
>Searching...</span>
|
||||
|
||||
<Releases :releases="releases" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Releases from '../releases/releases.vue';
|
||||
|
||||
async function mounted() {
|
||||
const results = await this.$store.dispatch('searchReleases', {
|
||||
query: this.query,
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
|
||||
if (results) {
|
||||
this.releases = results;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Releases,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
releases: [],
|
||||
query: this.$route.query.query || this.$route.query.q,
|
||||
};
|
||||
},
|
||||
mounted,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.summary {
|
||||
display: block;
|
||||
margin: 0 0 1rem 0;
|
||||
color: $shadow;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
<span class="poster">
|
||||
<span class="details">
|
||||
<router-link
|
||||
v-if="release.site.independent"
|
||||
v-if="release.site && release.site.independent"
|
||||
:to="`/network/${release.network.slug}`"
|
||||
class="site site-link"
|
||||
><img
|
||||
@@ -16,7 +16,7 @@
|
||||
>{{ release.network.name }}</router-link>
|
||||
|
||||
<span
|
||||
v-else
|
||||
v-else-if="release.network"
|
||||
class="site"
|
||||
>
|
||||
<router-link
|
||||
@@ -37,6 +37,8 @@
|
||||
>{{ release.site.name }}</router-link>
|
||||
</span>
|
||||
|
||||
<span v-else />
|
||||
|
||||
<a
|
||||
v-if="release.date"
|
||||
v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
|
||||
|
||||
Reference in New Issue
Block a user