Added new tag filter stub.

This commit is contained in:
ThePendulum 2020-05-25 04:39:58 +02:00
parent b180572d5f
commit fe69ec4175
10 changed files with 90 additions and 126 deletions

View File

@ -303,8 +303,8 @@ import Gender from './gender.vue';
import Social from './social.vue'; import Social from './social.vue';
async function fetchActor() { async function fetchActor() {
this.actor = await this.$store.dispatch('fetchActorBySlug', { this.actor = await this.$store.dispatch('fetchActorById', {
actorSlug: this.$route.params.actorSlug, actorId: Number(this.$route.params.actorId),
range: this.$route.params.range, range: this.$route.params.range,
}); });
} }

View File

@ -1,72 +1,41 @@
<template> <template>
<div :class="{ compact }"> <v-popover class="filters">
<ul class="filters"> <div class="applied">Anal</div>
<li class="filter">
<label
class="toggle"
:class="{ active: !localFilter.includes('lesbian') }"
>
<input
v-model="localFilter"
value="lesbian"
type="checkbox"
class="check"
@change="$emit('set-filter', localFilter)"
>lesbian
</label>
</li>
<li class="filter"> <div slot="popover">
<label <ul class="tags nolist">
class="toggle" <li
:class="{ active: !localFilter.includes('gay') }" v-for="tag in tags"
:key="`tag-${tag}`"
class="tag"
> >
<input <Icon
v-model="localFilter" icon="checkmark"
value="gay" class="include"
type="checkbox" />
class="check"
@change="$emit('set-filter', localFilter)"
>gay
</label>
</li>
<li class="filter"> <Icon
<label icon="cross"
class="toggle" class="exclude"
:class="{ active: !localFilter.includes('transsexual') }" />
>
<input
v-model="localFilter"
value="transsexual"
type="checkbox"
class="check"
@change="$emit('set-filter', localFilter)"
>trans
</label>
</li>
</ul>
<ul class="filters"> <router-link
<li class="filter"> :to="{ name: 'tag', params: { tagSlug: tag } }"
<label class="name"
class="toggle" >{{ tag }}</router-link>
:class="{ active: !localFilter.includes('anal') }" </li>
> </ul>
<input </div>
v-model="localFilter" </v-popover>
value="anal"
type="checkbox"
class="check"
@change="$emit('set-filter', localFilter)"
>anal
</label>
</li>
</ul>
</div>
</template> </template>
<script> <script>
const tags = [
'anal',
'double-penetration',
'gangbang',
];
export default { export default {
props: { props: {
filter: { filter: {
@ -81,6 +50,7 @@ export default {
data() { data() {
return { return {
localFilter: this.filter, localFilter: this.filter,
tags,
}; };
}, },
}; };
@ -89,54 +59,55 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'theme'; @import 'theme';
.filters { .applied {
display: inline-block; padding: .5rem 1rem;
list-style: none; font-size: 1rem;
padding: .5rem;
margin: 0;
&:not(:last-child) {
border-right: solid 1px var(--shadow-hint);
}
} }
.filter { .tags {
display: inline-block; padding: .5rem 0;
} }
.compact { .tag {
.filters { display: flex;
padding: 0; align-items: center;
border: none; padding: 0 .5rem;
}
.filter { .icon:hover,
margin: 0 0 1.5rem 0; .name:hover {
} background: var(--darken-hint);
} }
.toggle { .icon {
color: var(--shadow); width: 1rem;
box-sizing: border-box; height: 1rem;
padding: .5rem; padding: .5rem;
margin: 0 .25rem; fill: var(--darken-weak);
border: solid 1px transparent;
font-size: .9rem;
font-weight: bold;
cursor: pointer;
.check { &:hover {
display: none; cursor: pointer;
} }
}
&:hover { .include:hover,
color: var(--shadow); .include.active {
} fill: var(--success);
}
&.active { .exclude:hover,
background: var(--background); .exclude.active {
color: var(--primary); fill: var(--alert);
box-shadow: 0 0 2px var(--shadow-weak); }
}
.name {
padding: .5rem;
color: var(--text);
text-decoration: none;
}
&:hover {
background: var(--darken-hint);
cursor: pointer;
}
} }
</style> </style>

View File

@ -3,8 +3,6 @@
v-if="tag" v-if="tag"
class="content" class="content"
> >
<FilterBar :fetch-releases="fetchReleases" />
<div <div
class="tag" class="tag"
:class="{ nomedia: !hasMedia }" :class="{ nomedia: !hasMedia }"
@ -42,6 +40,7 @@
</div> </div>
</div> </div>
<div class="content-inner"> <div class="content-inner">
<Photos <Photos
v-if="hasMedia" v-if="hasMedia"
@ -49,6 +48,7 @@
class="compact" class="compact"
/> />
<FilterBar :fetch-releases="fetchReleases" />
<Releases :releases="tag.releases" /> <Releases :releases="tag.releases" />
</div> </div>
</div> </div>
@ -153,6 +153,7 @@ export default {
.content-inner { .content-inner {
padding: 0; padding: 0;
overflow-y: auto;
} }
.header { .header {

View File

@ -4,7 +4,7 @@
class="actor" class="actor"
> >
<router-link <router-link
:to="{ name: 'actor', params: { actorSlug: actor.slug } }" :to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
class="link" class="link"
> >
<span <span

View File

@ -123,10 +123,10 @@
:key="actor.id" :key="actor.id"
class="actor" class="actor"
> >
<a <router-link
:href="`/actor/${actor.slug}`" :to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
class="actor-link" class="actor-link"
>{{ actor.name }}</a> >{{ actor.name }}</router-link>
</li> </li>
</ul> </ul>
</span> </span>

View File

@ -61,6 +61,7 @@ $female: #f0a;
--alert: #f00; --alert: #f00;
--warn: #fa0; --warn: #fa0;
--success: #5c2;
} }
.light { .light {

View File

@ -7,7 +7,6 @@
background: #222; background: #222;
color: white; color: white;
border-radius: 16px; border-radius: 16px;
padding: 5px 10px 4px;
} }
.tooltip-arrow { .tooltip-arrow {
@ -86,7 +85,6 @@
.popover-inner { .popover-inner {
background: $color; background: $color;
color: black; color: black;
padding: .5rem;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1); box-shadow: 0 5px 30px rgba(black, .1);
} }

View File

@ -8,26 +8,19 @@ import { curateActor, curateRelease } from '../curate';
import getDateRange from '../get-date-range'; import getDateRange from '../get-date-range';
function initActorActions(store, _router) { function initActorActions(store, _router) {
async function fetchActorBySlug({ _commit }, { actorSlug, limit = 100, range = 'latest' }) { async function fetchActorById({ _commit }, { actorId, limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range); const { before, after, orderBy } = getDateRange(range);
const { actors: [actor] } = await graphql(` const { actor } = await graphql(`
query Actor( query Actor(
$actorSlug: String! $actorId: Int!
$limit:Int = 1000, $limit:Int = 1000,
$after:Date = "1900-01-01", $after:Date = "1900-01-01",
$before:Date = "2100-01-01", $before:Date = "2100-01-01",
$orderBy:[ReleasesActorsOrderBy!] $orderBy:[ReleasesActorsOrderBy!]
$exclude: [String!] $exclude: [String!]
) { ) {
actors(filter: { actor(id: $actorId) {
slug: {
equalTo: $actorSlug,
},
networkId: {
isNull: true,
},
}) {
id id
name name
slug slug
@ -177,7 +170,7 @@ function initActorActions(store, _router) {
} }
} }
`, { `, {
actorSlug, actorId,
limit, limit,
after, after,
before, before,
@ -280,7 +273,7 @@ function initActorActions(store, _router) {
} }
return { return {
fetchActorBySlug, fetchActorById,
fetchActors, fetchActors,
fetchActorReleases, fetchActorReleases,
}; };

View File

@ -60,7 +60,7 @@ const routes = [
name: 'movie', name: 'movie',
}, },
{ {
path: '/actor/:actorSlug', path: '/actor/:actorId/:actorSlug?',
name: 'actor', name: 'actor',
redirect: from => ({ redirect: from => ({
name: 'actorRange', name: 'actorRange',
@ -71,7 +71,7 @@ const routes = [
}), }),
}, },
{ {
path: '/actor/:actorSlug/:range', path: '/actor/:actorId/:actorSlug?/:range',
component: Actor, component: Actor,
name: 'actorRange', name: 'actorRange',
}, },

Binary file not shown.

After

Width:  |  Height:  |  Size: 600 KiB