boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Improved actor scraping and display.

Browse Source
This commit is contained in:
ThePendulum
2020-05-18 01:22:56 +02:00
parent af5543190a
commit 8733fdc657
28 changed files with 1033 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
assets/components/actors/actors.vue
View File

@@ -1,60 +1,60 @@
<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>
<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>
<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>
<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">
<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"
>{{ letterX || 'All' }}</router-link>
</li>
</ul>
</nav>
<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"
>{{ letterX || 'All' }}</router-link>
</li>
</ul>
</nav>
<div class="tiles">
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor"
/>
</div>
</div>
<div class="tiles">
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor"
/>
</div>
</div>
</template>
<script>
@@ -62,56 +62,56 @@ import Actor from '../tile/actor.vue';
import Gender from './gender.vue';
async function fetchActors() {
const curatedGender = this.gender.replace('trans', 'transsexual');
const curatedGender = this.gender.replace('trans', 'transsexual');
this.actors = await this.$store.dispatch('fetchActors', {
limit: 1000,
letter: this.letter.replace('all', ''),
gender: curatedGender === 'other' ? null : curatedGender,
});
this.actors = await this.$store.dispatch('fetchActors', {
limit: 1000,
letter: this.letter.replace('all', ''),
gender: curatedGender === 'other' ? null : curatedGender,
});
}
function letter() {
return this.$route.params.letter || 'all';
return this.$route.params.letter || 'all';
}
function gender() {
return this.$route.params.gender || 'female';
return this.$route.params.gender || 'female';
}
async function route() {
await this.fetchActors();
await this.fetchActors();
}
async function mounted() {
this.pageTitle = 'Actors';
this.pageTitle = 'Actors';
await this.fetchActors();
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())),
};
},
computed: {
letter,
gender,
},
watch: {
$route: route,
},
mounted,
methods: {
fetchActors,
},
components: {
Actor,
Gender,
},
data() {
return {
actors: [],
pageTitle: null,
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
};
},
computed: {
letter,
gender,
},
watch: {
$route: route,
},
mounted,
methods: {
fetchActors,
},
};
</script>
@@ -226,7 +226,7 @@ export default {
}
}
@media(max-width: $breakpoint) {
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}