Improved actor filter layout behavior.

This commit is contained in:
ThePendulum 2020-02-23 05:23:07 +01:00
parent 95ed67b1fe
commit 968eb07472
2 changed files with 18 additions and 2 deletions

View File

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

View File

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