Improved actor filter layout behavior.

assets/components/actors/actors.vue

@@ -23,6 +23,13 @@
                         class="gender-link transsexual"
                     ><Gender gender="transsexual" /></router-link>
                 </li>
+                <li class="gender">
+                    <router-link
+                        :to="{ name: 'actors', params: { gender: 'other', letter } }"
+                        :class="{ selected: gender === 'other' }"
+                        class="gender-link other"
+                    ><Icon icon="question5" /></router-link>
+                </li>
             </ul>
 
             <ul class="letters nolist">
@@ -56,10 +63,12 @@ import Actor from '../tile/actor.vue';
 import Gender from './gender.vue';
 
 async function fetchActors() {
+    const gender = this.gender.replace('trans', 'transsexual');
+
     this.actors = await this.$store.dispatch('fetchActors', {
         limit: 1000,
         letter: this.letter.replace('all', ''),
-        genders: [this.gender.replace('trans', 'transsexual').replace('other', null)],
+        genders: [gender === 'other' ? null : gender],
     });
 }
 
@@ -131,6 +140,7 @@ export default {
 }
 
 .genders {
+    display: flex;
     flex-shrink: 0;
     padding: 0 .5rem 0 0;
     border-right: solid 1px $shadow-hint;
@@ -190,5 +200,9 @@ export default {
     .tiles {
         grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
     }
+
+    .genders {
+        flex-direction: column;
+    }
 }
 </style>

assets/js/actors/actions.js

@@ -181,6 +181,7 @@ function initActorActions(store, _router) {
         if (actorSlug) {
             return fetchActorBySlug(actorSlug);
         }
+        console.log(genders);
 
         const { actors } = await graphql(`
             query Actors(
@@ -230,7 +231,8 @@ function initActorActions(store, _router) {
         `, {
             limit,
             letter,
-            genders,
+            genders: genders.filter(Boolean),
+            genderNull: genders.some(gender => gender === null),
         });
 
         return actors.map(actor => curateActor(actor));