Improved actor scraping and display.
This commit is contained in:
@@ -44,7 +44,7 @@
|
||||
class="avatar-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${actor.avatar.thumbnail}`"
|
||||
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
|
||||
class="avatar"
|
||||
>
|
||||
@@ -153,7 +153,7 @@
|
||||
<Icon
|
||||
v-if="actor.naturalBoobs === false"
|
||||
v-tooltip="'Enhanced boobs'"
|
||||
icon="star"
|
||||
icon="magic-wand2"
|
||||
class="enhanced"
|
||||
/>{{ actor.bust || '??' }}{{ actor.cup || '?' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
||||
</span>
|
||||
@@ -271,6 +271,10 @@ async function fetchActor() {
|
||||
});
|
||||
}
|
||||
|
||||
function sfw() {
|
||||
return this.$store.state.ui.sfw;
|
||||
}
|
||||
|
||||
async function route() {
|
||||
await this.fetchActor();
|
||||
}
|
||||
@@ -303,6 +307,9 @@ export default {
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sfw,
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
@@ -495,6 +502,7 @@ export default {
|
||||
.enhanced.icon {
|
||||
fill: $primary;
|
||||
padding: 0 .5rem;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.ethnicity {
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
class="avatar-link photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${actor.avatar.thumbnail}`"
|
||||
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
|
||||
class="avatar photo"
|
||||
>
|
||||
@@ -26,7 +26,7 @@
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${photo.thumbnail}`"
|
||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:title="photo.copyright && `© ${photo.copyright}`"
|
||||
class="photo"
|
||||
>
|
||||
@@ -35,6 +35,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function sfw() {
|
||||
return this.$store.state.ui.sfw;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
actor: {
|
||||
@@ -42,6 +46,9 @@ export default {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sfw,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user