Added gender indicator to actor tiles. Fixed PornHub scraper fetching default avatars.
This commit is contained in:
parent
4d53b84587
commit
bceded3ebd
|
|
@ -8,11 +8,10 @@
|
|||
<div class="actor-header">
|
||||
<h2 class="header-name">
|
||||
{{ actor.name }}
|
||||
<span
|
||||
v-if="actor.gender"
|
||||
<Gender
|
||||
:gender="actor.gender"
|
||||
class="header-gender"
|
||||
:class="{ [actor.gender]: true }"
|
||||
><Icon :icon="actor.gender" /></span>
|
||||
/>
|
||||
</h2>
|
||||
|
||||
<li
|
||||
|
|
@ -33,7 +32,7 @@
|
|||
<div class="actor-inner">
|
||||
<div
|
||||
class="profile"
|
||||
:class="{ expanded }"
|
||||
:class="{ expanded, 'with-avatar': !!actor.avatar }"
|
||||
>
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
|
|
@ -247,6 +246,7 @@
|
|||
import Photos from './photos.vue';
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
import Gender from './gender.vue';
|
||||
import Social from './social.vue';
|
||||
|
||||
async function fetchActor() {
|
||||
|
|
@ -270,6 +270,7 @@ export default {
|
|||
FilterBar,
|
||||
Photos,
|
||||
Releases,
|
||||
Gender,
|
||||
Social,
|
||||
},
|
||||
data() {
|
||||
|
|
@ -325,6 +326,13 @@ export default {
|
|||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.header-gender {
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -342,6 +350,10 @@ export default {
|
|||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.with-avatar {
|
||||
height: 18rem; /* profile overlaps avatar in chrome */
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
font-size: 0;
|
||||
padding: 0 0 1rem 1rem;
|
||||
|
|
@ -421,36 +433,6 @@ export default {
|
|||
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 {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -5,6 +5,8 @@
|
|||
>
|
||||
<a
|
||||
:href="`/actor/${actor.slug}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link"
|
||||
>
|
||||
<span
|
||||
|
|
@ -12,6 +14,7 @@
|
|||
class="name"
|
||||
>{{ actor.name }}</span>
|
||||
|
||||
<div class="avatar-container">
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
|
||||
|
|
@ -29,11 +32,11 @@
|
|||
<span
|
||||
class="details"
|
||||
>
|
||||
<span>
|
||||
<span class="age">
|
||||
<span
|
||||
v-if="actor.age"
|
||||
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
|
||||
class="age"
|
||||
class="age-now"
|
||||
>{{ actor.age }}</span>
|
||||
|
||||
<span
|
||||
|
|
@ -42,6 +45,9 @@
|
|||
class="age-then"
|
||||
>{{ actor.ageThen }}</span>
|
||||
</span>
|
||||
|
||||
<Gender :gender="actor.gender" />
|
||||
|
||||
<span
|
||||
v-if="actor.origin"
|
||||
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`"
|
||||
>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="country"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Gender from '../actors/gender.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Gender,
|
||||
},
|
||||
props: {
|
||||
actor: {
|
||||
type: Object,
|
||||
|
|
@ -77,33 +94,26 @@ export default {
|
|||
background: $background;
|
||||
display: inline-block;
|
||||
margin: 0 .5rem .5rem 0;
|
||||
position: relative;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $link;
|
||||
color: $text;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
padding: .5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
color: $shadow-weak;
|
||||
background: $shadow-hint;
|
||||
height: 12rem;
|
||||
height: 13rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -125,7 +135,6 @@ export default {
|
|||
height: 1.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem;
|
||||
position: absolute;
|
||||
|
|
@ -134,7 +143,31 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.age,
|
||||
.country,
|
||||
.gender {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gender {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.country {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.age-then {
|
||||
color: $highlight;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
padding: .5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ function initActorActions(store, _router) {
|
|||
slug
|
||||
age
|
||||
birthdate
|
||||
gender
|
||||
avatar: actorsAvatarByActorId {
|
||||
media {
|
||||
thumbnail
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ async function scrapeProfile(html, _url, actorName) {
|
|||
if (bio.Piercings) profile.hasPiercings = bio.Piercings === '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
|
||||
|
||||
return profile;
|
||||
|
|
|
|||
Loading…
Reference in New Issue