traxxx/assets/components/actors/actors.vue

266 lines
5.5 KiB
Vue
Raw Normal View History

<template>
2020-05-17 23:22:56 +00:00
<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"
replace
2020-05-17 23:22:56 +00:00
><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"
replace
2020-05-17 23:22:56 +00:00
><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"
replace
2020-05-17 23:22:56 +00:00
><Icon icon="question5" /></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"
replace
2020-05-17 23:22:56 +00:00
>{{ letterX || 'All' }}</router-link>
</li>
</ul>
</nav>
<Pagination
:items-total="totalCount"
:items-per-page="limit"
/>
<div
v-lazy-container="{ selector: '.lazy' }"
class="tiles"
>
2020-05-17 23:22:56 +00:00
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor"
/>
</div>
<Pagination
2020-05-25 00:02:28 +00:00
v-if="totalCount > 0"
:items-total="totalCount"
:items-per-page="limit"
class="pagination-top"
/>
2020-05-17 23:22:56 +00:00
</div>
</template>
<script>
import Actor from '../tile/actor.vue';
import Gender from './gender.vue';
import Pagination from '../pagination/pagination.vue';
async function fetchActors() {
2020-05-17 23:22:56 +00:00
const curatedGender = this.gender.replace('trans', 'transsexual');
2020-02-23 04:23:07 +00:00
const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
limit: this.limit,
pageNumber: Number(this.$route.params.pageNumber) || 1,
2020-05-17 23:22:56 +00:00
letter: this.letter.replace('all', ''),
gender: curatedGender === 'other' ? null : curatedGender,
});
this.actors = actors;
this.totalCount = totalCount;
}
function letter() {
2020-05-17 23:22:56 +00:00
return this.$route.params.letter || 'all';
}
function gender() {
2020-05-17 23:22:56 +00:00
return this.$route.params.gender || 'female';
}
async function route() {
2020-05-17 23:22:56 +00:00
await this.fetchActors();
}
async function mounted() {
2020-05-17 23:22:56 +00:00
this.pageTitle = 'Actors';
2020-05-17 23:22:56 +00:00
await this.fetchActors();
}
export default {
2020-05-17 23:22:56 +00:00
components: {
Actor,
Gender,
Pagination,
2020-05-17 23:22:56 +00:00
},
data() {
return {
actors: [],
pageTitle: null,
totalCount: 0,
limit: 30,
2020-05-17 23:22:56 +00:00
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
};
},
computed: {
letter,
gender,
},
watch: {
$route: route,
},
mounted,
methods: {
fetchActors,
},
};
</script>
<style lang="scss">
@import 'theme';
.gender-link {
&.selected .gender .icon {
fill: var(--text-light);
filter: none;
}
&:hover:not(.selected) {
.gender .icon {
fill: var(--text-light);
}
.male .icon {
filter: drop-shadow(0 0 1px var(--male));
}
.female .icon {
filter: drop-shadow(0 0 1px var(--female));
}
}
&:hover:not(.selected) .transsexual .icon {
fill: var(--female);
filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}
}
</style>
<style lang="scss" scoped>
@import 'theme';
.actors {
display: flex;
flex-direction: column;
}
.tiles {
display: grid;
2020-05-21 22:55:11 +00:00
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
grid-gap: 0 .5rem;
padding: 1rem;
flex-grow: 1;
}
.filter {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
margin: 1rem 0;
}
.genders {
2020-02-23 04:23:07 +00:00
display: flex;
flex-shrink: 0;
padding: 0 .5rem 0 0;
2020-03-23 00:43:49 +00:00
border-right: solid 1px var(--shadow-hint);
margin: 0 1rem 0 0;
}
.letter,
.gender {
display: inline-block;
}
.letter-link,
.gender-link {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: .25rem .5rem .25rem 0;
2020-03-23 00:43:49 +00:00
color: var(--shadow);
background: var(--background);
font-weight: bold;
text-decoration: none;
box-shadow: 0 0 3px var(--darken-weak);
.male,
.female,
.transsexual {
padding: .2rem 0 0 0;
}
.icon {
fill: var(--shadow);
}
&:hover {
color: var(--text);
cursor: pointer;
.icon {
fill: var(--text);
}
}
&.selected {
2020-03-23 00:43:49 +00:00
background: var(--primary);
color: var(--text-light);
&.other .icon {
fill: var(--text-light);
}
}
}
2020-05-17 23:22:56 +00:00
@media(max-width: $breakpoint0) {
.tiles {
2020-04-27 00:37:30 +00:00
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
2020-02-23 04:23:07 +00:00
.genders {
flex-direction: column;
}
}
</style>