Added actor alphanetic and gender filters.

This commit is contained in:
ThePendulum 2020-02-09 05:30:10 +01:00
parent cde290fbd7
commit 4eb57b4a91
9 changed files with 217 additions and 9 deletions

View File

@ -1,43 +1,188 @@
<template>
<div class="actors">
<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) {

8
assets/css/_inputs.scss Normal file
View File

@ -0,0 +1,8 @@
.select {
color: $shadow-strong;
background: $background;
padding: .5rem;
font-size: 1rem;
border: solid 1px $shadow-weak;
cursor: pointer;
}

View File

@ -1,4 +1,5 @@
@import 'theme';
@import 'inputs';
@import 'states';
@import 'tooltip';

5
assets/img/question2.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>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

5
assets/img/question4.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>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

5
assets/img/question5.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>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

6
assets/img/question6.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>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

View File

@ -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));

View File

@ -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',
},
{