Added actor alphanetic and gender filters.

assets/components/actors/actors.vue

@@ -1,43 +1,188 @@
 <template>
     <div class="actors">
-        <Actor
+        <nav class="filter">
-            v-for="actor in actors"
+            <ul class="genders nolist">
-            :key="`actor-${actor.id}`"
+                <li class="gender">
-            :actor="actor"
+                    <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) {

assets/css/_inputs.scss

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

assets/css/style.scss

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

assets/img/question2.svg

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

assets/img/question4.svg

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

assets/img/question5.svg

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

assets/img/question6.svg

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

assets/js/actors/actions.js

@@ -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) {
+            query Actors(
-                actors(first:$limit, orderBy: NAME_ASC) {
+                $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));

assets/js/router.js

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