boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added rudimentary release search.

This commit is contained in:
ThePendulum 2020-02-26 01:15:50 +01:00
parent 756ab09ce6
commit 638a71f36c
20 changed files with 356 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
assets/components/header/header.vue
View File

@ -1,5 +1,6 @@
<template>
<header class="header">
<div>
<router-link
to="/home"
class="logo-link"
@ -56,15 +57,52 @@
</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;

7
assets/components/home/home.vue
View File

@ -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
View 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>

6
assets/components/tile/release.vue
View File

@ -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}`"

6
assets/img/cancel-circle.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cancel-circle</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
<path d="M10.5 4l-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

5
assets/img/cancel-circle2.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cancel-circle2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 10.5l-1.5 1.5-2.5-2.5-2.5 2.5-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5 2.5 2.5 2.5-2.5 1.5 1.5-2.5 2.5 2.5 2.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

6
assets/img/cancel-square.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cancel-square</title>
<path d="M13.996 2c0.001 0.001 0.003 0.002 0.004 0.004v11.993c-0.001 0.001-0.002 0.003-0.004 0.004h-11.993c-0.001-0.001-0.003-0.002-0.004-0.004v-11.993c0.001-0.001 0.002-0.003 0.004-0.004h11.993zM14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2v0z"></path>
<path d="M10.5 4l-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

5
assets/img/cancel-square2.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cancel-square2</title>
<path d="M14 0h-12c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12c1.1 0 2-0.9 2-2v-12c0-1.1-0.9-2-2-2zM12.457 11.043l-1.414 1.414-3.043-3.043-3.043 3.043-1.414-1.414 3.043-3.043-3.043-3.043 1.414-1.414 3.043 3.043 3.043-3.043 1.414 1.414-3.043 3.043 3.043 3.043z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 432 B

5
assets/img/checkmark.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>checkmark</title>
<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

5
assets/img/checkmark3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>checkmark3</title>
<path d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

5
assets/img/cross.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cross</title>
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

5
assets/img/cross2.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cross2</title>
<path d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

5
assets/img/cross3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cross3</title>
<path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 339 B

5
assets/img/minus-circle2.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>minus-circle2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM13 9h-10v-2h10v2z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

5
assets/img/plus-circle2.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>plus-circle2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM9 9v4h-2v-4h-4v-2h4v-4h2v4h4v2h-4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

2
assets/js/curate.js
View File

@ -23,9 +23,9 @@ function curateRelease(release) {
actors: [],
poster: release.poster && release.poster.media,
tags: release.tags ? release.tags.map(({ tag }) => tag) : [],
network: release.site.network,
};
if (release.site) curatedRelease.network = release.site.network;
if (release.photos) curatedRelease.photos = release.photos.map(({ media }) => media);
if (release.covers) curatedRelease.covers = release.covers.map(({ media }) => media);
if (release.trailer) curatedRelease.trailer = release.trailer.media;

58
assets/js/releases/actions.js
View File

@ -25,6 +25,63 @@ function initReleasesActions(store, _router) {
return releases.map(release => curateRelease(release));
}
async function searchReleases({ _commit }, { query, limit = 20 }) {
const res = await graphql(`
query SearchReleases(
$query: String!
$limit: Int = 20
) {
releases: searchReleases(
search: $query
first: $limit
) {
id
title
date
url
site {
id
slug
name
url
network {
id
slug
name
url
}
}
actors: releasesActors {
actor {
id
slug
name
}
}
tags: releasesTags {
tag {
id
name
slug
}
}
poster: releasesPosterByReleaseId {
media {
thumbnail
}
}
}
}
`, {
query,
limit,
});
if (!res) return [];
return res.releases.map(release => curateRelease(release));
}
async function fetchReleaseById({ _commit }, releaseId) {
// const release = await get(`/releases/${releaseId}`);
@ -42,6 +99,7 @@ function initReleasesActions(store, _router) {
return {
fetchReleases,
fetchReleaseById,
searchReleases,
};
}

6
assets/js/router.js
View File

@ -10,6 +10,7 @@ import Actor from '../components/actors/actor.vue';
import Actors from '../components/actors/actors.vue';
import Tag from '../components/tags/tag.vue';
import Tags from '../components/tags/tags.vue';
import Search from '../components/search/search.vue';
import NotFound from '../components/errors/404.vue';
Vue.use(VueRouter);
@ -69,6 +70,11 @@ const routes = [
component: Tags,
name: 'tags',
},
{
path: '/search',
component: Search,
name: 'search',
},
{
path: '*',
component: NotFound,

14
migrations/20200225223307_search.js Normal file
View File

@ -0,0 +1,14 @@
exports.up = knex => Promise.resolve()
.then(() => knex.raw(`
CREATE FUNCTION search_releases(search text) RETURNS SETOF releases AS $$
SELECT * FROM releases
WHERE
title ILIKE ('%' || search || '%') OR
url ILIKE ('%' || search || '%')
$$ LANGUAGE SQL STABLE;
`));
exports.down = knex => Promise.resolve()
.then(() => knex.raw(`
DROP FUNCTION IF EXISTS search_releases;
`));

5
public/img/cancel-circle2.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>cancel-circle2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 10.5l-1.5 1.5-2.5-2.5-2.5 2.5-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5 2.5 2.5 2.5-2.5 1.5 1.5-2.5 2.5 2.5 2.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B