Added gender indicator to actor tiles. Fixed PornHub scraper fetching default avatars.

This commit is contained in:
ThePendulum 2020-01-25 01:26:13 +01:00
parent 4d53b84587
commit bceded3ebd
5 changed files with 141 additions and 87 deletions

View File

@ -8,11 +8,10 @@
<div class="actor-header"> <div class="actor-header">
<h2 class="header-name"> <h2 class="header-name">
{{ actor.name }} {{ actor.name }}
<span <Gender
v-if="actor.gender" :gender="actor.gender"
class="header-gender" class="header-gender"
:class="{ [actor.gender]: true }" />
><Icon :icon="actor.gender" /></span>
</h2> </h2>
<li <li
@ -33,7 +32,7 @@
<div class="actor-inner"> <div class="actor-inner">
<div <div
class="profile" class="profile"
:class="{ expanded }" :class="{ expanded, 'with-avatar': !!actor.avatar }"
> >
<a <a
v-if="actor.avatar" v-if="actor.avatar"
@ -247,6 +246,7 @@
import Photos from './photos.vue'; import Photos from './photos.vue';
import FilterBar from '../header/filter-bar.vue'; import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue'; import Releases from '../releases/releases.vue';
import Gender from './gender.vue';
import Social from './social.vue'; import Social from './social.vue';
async function fetchActor() { async function fetchActor() {
@ -270,6 +270,7 @@ export default {
FilterBar, FilterBar,
Photos, Photos,
Releases, Releases,
Gender,
Social, Social,
}, },
data() { data() {
@ -325,6 +326,13 @@ export default {
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
} }
.header-gender {
.icon {
width: 1.25rem;
height: 1.25rem;
}
}
.actor-inner { .actor-inner {
height: 100%; height: 100%;
display: flex; display: flex;
@ -342,6 +350,10 @@ export default {
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
&.with-avatar {
height: 18rem; /* profile overlaps avatar in chrome */
}
.avatar-link { .avatar-link {
font-size: 0; font-size: 0;
padding: 0 0 1rem 1rem; padding: 0 0 1rem 1rem;
@ -421,36 +433,6 @@ export default {
margin: 0; margin: 0;
} }
.bio-gender {
display: inline-block;
font-weight: bold;
text-transform: capitalize;
font-weight: normal;
.icon {
width: 1.25rem;
height: 1.25rem;
}
}
.header-gender,
.bio-gender {
&.female .icon {
fill: $female;
}
&.male .icon {
fill: $male;
}
&.transsexual .icon {
fill: $text-contrast;
filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male);
}
}
.birthdate { .birthdate {
display: block; display: block;
} }

View File

@ -0,0 +1,38 @@
<template>
<span
v-if="gender"
class="gender"
:class="{ [gender]: true }"
><Icon :icon="gender" /></span>
</template>
<script>
export default {
props: {
gender: {
type: String,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.gender {
&.female .icon {
fill: $female;
}
&.male .icon {
fill: $male;
}
&.transsexual .icon {
fill: $text-contrast;
filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male);
}
}
</style>

View File

@ -5,6 +5,8 @@
> >
<a <a
:href="`/actor/${actor.slug}`" :href="`/actor/${actor.slug}`"
target="_blank"
rel="noopener noreferrer"
class="link" class="link"
> >
<span <span
@ -12,6 +14,7 @@
class="name" class="name"
>{{ actor.name }}</span> >{{ actor.name }}</span>
<div class="avatar-container">
<img <img
v-if="actor.avatar" v-if="actor.avatar"
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`" :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
@ -29,11 +32,11 @@
<span <span
class="details" class="details"
> >
<span> <span class="age">
<span <span
v-if="actor.age" v-if="actor.age"
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`" v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
class="age" class="age-now"
>{{ actor.age }}</span> >{{ actor.age }}</span>
<span <span
@ -42,6 +45,9 @@
class="age-then" class="age-then"
>{{ actor.ageThen }}</span> >{{ actor.ageThen }}</span>
</span> </span>
<Gender :gender="actor.gender" />
<span <span
v-if="actor.origin" v-if="actor.origin"
v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`" v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
@ -53,13 +59,24 @@
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`" :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
> >
</span> </span>
<span
v-else
class="country"
/>
</span> </span>
</div>
</a> </a>
</div> </div>
</template> </template>
<script> <script>
import Gender from '../actors/gender.vue';
export default { export default {
components: {
Gender,
},
props: { props: {
actor: { actor: {
type: Object, type: Object,
@ -77,33 +94,26 @@ export default {
background: $background; background: $background;
display: inline-block; display: inline-block;
margin: 0 .5rem .5rem 0; margin: 0 .5rem .5rem 0;
position: relative;
box-shadow: 0 0 3px $shadow-weak; box-shadow: 0 0 3px $shadow-weak;
} }
.link { .link {
color: $link; color: $text;
text-decoration: none; text-decoration: none;
text-align: center;
&:hover { &:hover {
color: $primary; color: $primary;
} }
} }
.name { .avatar-container {
display: block; position: relative;
padding: .5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
} }
.avatar { .avatar {
color: $shadow-weak; color: $shadow-weak;
background: $shadow-hint; background: $shadow-hint;
height: 12rem; height: 13rem;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -125,7 +135,6 @@ export default {
height: 1.75rem; height: 1.75rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: .5rem; padding: .5rem;
position: absolute; position: absolute;
@ -134,7 +143,31 @@ export default {
font-weight: bold; font-weight: bold;
} }
.age,
.country,
.gender {
flex: 1;
}
.gender {
text-align: center;
}
.country {
text-align: right;
}
.age-then { .age-then {
color: $highlight; color: $highlight;
} }
.name {
display: block;
padding: .5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
font-weight: bold;
}
</style> </style>

View File

@ -173,6 +173,7 @@ function initActorActions(store, _router) {
slug slug
age age
birthdate birthdate
gender
avatar: actorsAvatarByActorId { avatar: actorsAvatarByActorId {
media { media {
thumbnail thumbnail

View File

@ -45,7 +45,7 @@ async function scrapeProfile(html, _url, actorName) {
if (bio.Piercings) profile.hasPiercings = bio.Piercings === 'Yes'; if (bio.Piercings) profile.hasPiercings = bio.Piercings === 'Yes';
if (bio.Tattoos) profile.hasTattoos = bio.Tattoos === 'Yes'; if (bio.Tattoos) profile.hasTattoos = bio.Tattoos === 'Yes';
if (avatarEl) profile.avatar = avatarEl.src; if (avatarEl && !/default\//.test(avatarEl.src)) profile.avatar = avatarEl.src;
profile.social = Array.from(document.querySelectorAll('.socialList a'), el => el.href).filter(link => link !== 'https://www.twitter.com/'); // PH links to Twitter itself for some reason profile.social = Array.from(document.querySelectorAll('.socialList a'), el => el.href).filter(link => link !== 'https://www.twitter.com/'); // PH links to Twitter itself for some reason
return profile; return profile;