forked from DebaucheryLibrarian/traxxx
Added actor alphanetic and gender filters.
This commit is contained in:
parent
cde290fbd7
commit
4eb57b4a91
|
|
@ -1,43 +1,188 @@
|
|||
<template>
|
||||
<div class="actors">
|
||||
<Actor
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
:actor="actor"
|
||||
/>
|
||||
<nav class="filter">
|
||||
<ul class="genders nolist">
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'female', letter } }"
|
||||
:class="{ selected: gender === 'female' }"
|
||||
class="gender-link female"
|
||||
><Gender gender="female" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'male', letter } }"
|
||||
:class="{ selected: gender === 'male' }"
|
||||
class="gender-link male"
|
||||
><Gender gender="male" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'trans', letter } }"
|
||||
:class="{ selected: gender === 'trans' }"
|
||||
class="gender-link transsexual"
|
||||
><Gender gender="transsexual" /></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="letters nolist">
|
||||
<li
|
||||
v-for="letterX in letters"
|
||||
:key="letterX"
|
||||
class="letter"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender, letter: letterX } }"
|
||||
:class="{ selected: letterX === letter }"
|
||||
class="letter-link"
|
||||
@click="setLetter(letterX)"
|
||||
>{{ letterX || 'All' }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="tiles">
|
||||
<Actor
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
:actor="actor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actor from '../tile/actor.vue';
|
||||
import Gender from './gender.vue';
|
||||
|
||||
async function fetchActors() {
|
||||
this.actors = await this.$store.dispatch('fetchActors', {
|
||||
limit: 1000,
|
||||
letter: this.letter.replace('all', ''),
|
||||
genders: [this.gender.replace('trans', 'transsexual').replace('other', null)],
|
||||
});
|
||||
}
|
||||
|
||||
async function setLetter(letter) {
|
||||
this.letter = letter;
|
||||
|
||||
await this.fetchActors();
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
this.pageTitle = 'Actors';
|
||||
this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
|
||||
|
||||
await this.fetchActors();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Gender,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actors: [],
|
||||
pageTitle: null,
|
||||
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
|
||||
letter: this.$route.params.letter,
|
||||
gender: this.$route.params.gender || 'female',
|
||||
};
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchActors,
|
||||
setLetter,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'theme';
|
||||
|
||||
.gender-link.selected .gender .icon {
|
||||
fill: $text-contrast;
|
||||
filter: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.actors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, .5fr));
|
||||
grid-gap: 0 .5rem;
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
.genders {
|
||||
padding: 0 .5rem 0 0;
|
||||
border-right: solid 1px $shadow-hint;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.letter,
|
||||
.gender {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.letter-link,
|
||||
.gender-link {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: .25rem .5rem .25rem 0;
|
||||
color: $shadow;
|
||||
background: $background;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $primary;
|
||||
color: $text-contrast;
|
||||
|
||||
.icon {
|
||||
fill: $text-contrast;
|
||||
}
|
||||
|
||||
&.male {
|
||||
background: $male;
|
||||
}
|
||||
|
||||
&.female {
|
||||
background: $female;
|
||||
}
|
||||
|
||||
&.transsexual {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: $female;
|
||||
border: solid .25rem $male;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.select {
|
||||
color: $shadow-strong;
|
||||
background: $background;
|
||||
padding: .5rem;
|
||||
font-size: 1rem;
|
||||
border: solid 1px $shadow-weak;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'theme';
|
||||
@import 'inputs';
|
||||
@import 'states';
|
||||
@import 'tooltip';
|
||||
|
||||
|
|
|
|||
|
|
@ -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>question2</title>
|
||||
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8s-3.582-8-8-8zM9 13h-2v-2h2v2zM12 8l-3 2h-2v-1l3-2v-1h-5v-2h6c0.552 0 1 0.448 1 1v3z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 323 B |
|
|
@ -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>question4</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 13c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM9.649 7.877c-0.611 0.384-0.899 0.596-0.899 0.876v0.5c0 0.414-0.336 0.75-0.75 0.75s-0.75-0.336-0.75-0.75v-0.5c0-0.525 0.203-0.998 0.602-1.404 0.295-0.3 0.653-0.525 0.999-0.742 0.712-0.447 1.024-0.687 1.024-1.107 0-0.457-0.264-0.762-0.485-0.938-0.355-0.282-0.849-0.437-1.39-0.437-0.821 0-1.559 0.548-1.796 1.333-0.12 0.397-0.538 0.621-0.934 0.502s-0.621-0.538-0.502-0.934c0.205-0.68 0.631-1.291 1.2-1.721 0.589-0.445 1.292-0.68 2.031-0.68 0.878 0 1.703 0.271 2.322 0.762 0.679 0.539 1.053 1.289 1.053 2.113 0 1.293-0.998 1.92-1.726 2.377z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 844 B |
|
|
@ -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>question5</title>
|
||||
<path d="M6 13h3v3h-3zM12.5 1c0.828 0 1.5 0.672 1.5 1.5v4.5l-5 3v2h-3v-3l5-3v-2h-8v-3h9.5z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 263 B |
|
|
@ -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>question6</title>
|
||||
<path d="M8 13c-0.552 0-1-0.448-1-1v-1.027c0-1.41 1.124-2.477 2.212-3.509 0.879-0.834 1.788-1.697 1.788-2.464 0-1.493-1.082-3-3.5-3-1.787 0-3.283 1.337-3.479 3.11-0.061 0.549-0.555 0.945-1.104 0.884s-0.945-0.555-0.884-1.104c0.148-1.338 0.782-2.572 1.785-3.477 1.011-0.911 2.319-1.413 3.681-1.413 1.475 0 2.834 0.463 3.828 1.305 1.078 0.913 1.672 2.225 1.672 3.695 0 1.626-1.281 2.842-2.411 3.915-0.745 0.707-1.589 1.508-1.589 2.058l0 1.027c0 0.552-0.448 1-1 1z"></path>
|
||||
<path d="M9 15c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
|
|
@ -171,14 +171,34 @@ function initActorActions(store, _router) {
|
|||
return curateActor(actor);
|
||||
}
|
||||
|
||||
async function fetchActors({ _commit }, { actorSlug, limit = 100 }) {
|
||||
async function fetchActors({ _commit }, {
|
||||
actorSlug,
|
||||
limit = 100,
|
||||
letter,
|
||||
genders,
|
||||
}) {
|
||||
if (actorSlug) {
|
||||
return fetchActorBySlug(actorSlug);
|
||||
}
|
||||
|
||||
const { actors } = await graphql(`
|
||||
query Actors($limit:Int) {
|
||||
actors(first:$limit, orderBy: NAME_ASC) {
|
||||
query Actors(
|
||||
$limit: Int,
|
||||
$letter: String! = "",
|
||||
$genders: [String!] = ["female"],
|
||||
) {
|
||||
actors(
|
||||
first:$limit,
|
||||
orderBy: NAME_ASC,
|
||||
filter: {
|
||||
name: {
|
||||
startsWith: $letter
|
||||
},
|
||||
gender: {
|
||||
in: $genders
|
||||
},
|
||||
},
|
||||
) {
|
||||
id
|
||||
name
|
||||
slug
|
||||
|
|
@ -199,6 +219,8 @@ function initActorActions(store, _router) {
|
|||
}
|
||||
`, {
|
||||
limit,
|
||||
letter,
|
||||
genders,
|
||||
});
|
||||
|
||||
return actors.map(actor => curateActor(actor));
|
||||
|
|
|
|||
|
|
@ -53,6 +53,17 @@ const routes = [
|
|||
{
|
||||
path: '/actors',
|
||||
component: Actors,
|
||||
redirect: {
|
||||
name: 'actors',
|
||||
params: {
|
||||
gender: 'female',
|
||||
letter: 'all',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/actors/:gender/:letter',
|
||||
component: Actors,
|
||||
name: 'actors',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue