637 lines
12 KiB
Vue
637 lines
12 KiB
Vue
<template>
|
|
<div
|
|
v-if="actor"
|
|
class="content actor"
|
|
>
|
|
<FilterBar :fetch-releases="fetchActor" />
|
|
|
|
<div class="actor-header">
|
|
<h2 class="header-name">
|
|
<span v-if="actor.network">{{ actor.name }} ({{ actor.network.name }})</span>
|
|
<span v-else="">{{ actor.name }}</span>
|
|
|
|
<Gender
|
|
:gender="actor.gender"
|
|
class="header-gender"
|
|
/>
|
|
</h2>
|
|
|
|
<li
|
|
v-if="actor.aliases.length"
|
|
class="bio-item"
|
|
>
|
|
<dfn class="bio-label">Also known as</dfn>
|
|
<span>{{ actor.aliases.join(', ') }}</span>
|
|
</li>
|
|
|
|
<Social
|
|
v-if="actor.social && actor.social.length > 0"
|
|
:actor="actor"
|
|
class="header-social"
|
|
/>
|
|
</div>
|
|
|
|
<div class="actor-inner">
|
|
<div
|
|
class="profile"
|
|
:class="{ expanded, 'with-avatar': !!actor.avatar }"
|
|
>
|
|
<a
|
|
v-if="actor.avatar"
|
|
:href="`/media/${actor.avatar.path}`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="avatar-link"
|
|
>
|
|
<img
|
|
:src="`/media/${actor.avatar.thumbnail}`"
|
|
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
|
|
class="avatar"
|
|
>
|
|
</a>
|
|
|
|
<span
|
|
v-show="expanded"
|
|
class="expand collapse-header noselect"
|
|
@click="expanded = false"
|
|
><Icon icon="arrow-up3" /></span>
|
|
|
|
<ul class="bio nolist">
|
|
<li
|
|
v-if="actor.birthdate"
|
|
class="bio-item"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="cake" />Birthdate</dfn>
|
|
|
|
<span
|
|
v-if="actor.birthdate"
|
|
class="birthdate"
|
|
>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ actor.age }}</span></span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.origin"
|
|
class="bio-item birth"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
|
|
|
|
<span>
|
|
<span
|
|
v-if="actor.origin.city"
|
|
class="city hideable"
|
|
>{{ actor.origin.city }}</span><span
|
|
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
|
|
class="state hideable"
|
|
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
|
|
|
|
<span
|
|
v-if="actor.origin.country"
|
|
class="country birthcountry"
|
|
>
|
|
<img
|
|
class="flag"
|
|
:src="`/img/flags/svg-simple/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
|
>{{ actor.origin.country.alias || actor.origin.country.name }}
|
|
</span>
|
|
</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.residence"
|
|
class="bio-item residence"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
|
|
|
|
<span>
|
|
<span
|
|
v-if="actor.residence.city"
|
|
class="city hideable"
|
|
>{{ actor.residence.city }}</span><span
|
|
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
|
|
class="state hideable"
|
|
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
|
|
|
|
<span
|
|
v-if="actor.residence.country"
|
|
class="country"
|
|
>
|
|
<img
|
|
class="flag"
|
|
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.png`"
|
|
>{{ actor.residence.country.alias || actor.residence.country.name }}
|
|
</span>
|
|
</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.ethnicity"
|
|
class="bio-item ethnicity hideable"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
|
|
<span>{{ actor.ethnicity }}</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.bust || actor.waist || actor.hip"
|
|
title="bust-waist-hip"
|
|
class="bio-item"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
|
|
<span>
|
|
<Icon
|
|
v-if="actor.naturalBoobs === false"
|
|
v-tooltip="'Boobs enhanced'"
|
|
icon="magic-wand"
|
|
class="enhanced"
|
|
/>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
|
</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.height"
|
|
class="bio-item height"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
|
|
<span>
|
|
<span class="height-metric">{{ actor.height.metric }} cm</span>
|
|
<span class="height-imperial">{{ actor.height.imperial }}</span>
|
|
</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.weight"
|
|
class="bio-item weight hideable"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
|
|
|
|
<span>
|
|
<span class="weight-metric">{{ actor.weight.metric }} kg</span>
|
|
<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
|
|
</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.hasTattoos"
|
|
class="bio-item tattoos hideable"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
|
|
|
|
<span
|
|
v-if="actor.tattoos"
|
|
v-tooltip="actor.tattoos"
|
|
class="bio-value"
|
|
>{{ actor.tattoos }}</span>
|
|
<span v-else>Yes</span>
|
|
</li>
|
|
|
|
<li
|
|
v-if="actor.hasPiercings"
|
|
class="bio-item piercings hideable"
|
|
>
|
|
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
|
|
|
|
<span
|
|
v-if="actor.piercings"
|
|
v-tooltip="actor.piercings"
|
|
class="bio-value"
|
|
>{{ actor.piercings }}</span>
|
|
<span v-else>Yes</span>
|
|
</li>
|
|
|
|
<li class="bio-item scraped hideable">Updated {{ formatDate(actor.updatedAt, 'YYYY-MM-DD HH:mm') }}, ID: {{ actor.id }}</li>
|
|
</ul>
|
|
|
|
<span
|
|
v-show="!expanded"
|
|
class="expand expand-header collapse-header noselect"
|
|
@click="expanded = true"
|
|
><Icon icon="arrow-down3" /></span>
|
|
|
|
<p
|
|
v-if="actor.description"
|
|
class="description"
|
|
>{{ actor.description }}</p>
|
|
|
|
<Social
|
|
v-if="actor.social && actor.social.length > 0"
|
|
:actor="actor"
|
|
class="profile-social"
|
|
/>
|
|
|
|
<span
|
|
v-show="expanded"
|
|
class="expand expand-header collapse-header noselect"
|
|
@click="expanded = false"
|
|
><Icon icon="arrow-up3" /></span>
|
|
</div>
|
|
|
|
<div class="actor-content">
|
|
<div
|
|
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
|
|
class="photos-container"
|
|
>
|
|
<Photos :actor="actor" />
|
|
|
|
<Photos
|
|
:actor="actor"
|
|
:class="{ expanded }"
|
|
class="compact"
|
|
/>
|
|
</div>
|
|
|
|
<Releases :releases="actor.releases" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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() {
|
|
this.actor = await this.$store.dispatch('fetchActorBySlug', {
|
|
actorSlug: this.$route.params.actorSlug,
|
|
range: this.$route.params.range,
|
|
});
|
|
}
|
|
|
|
async function route() {
|
|
await this.fetchActor();
|
|
}
|
|
|
|
function scrollPhotos(event) {
|
|
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
|
|
}
|
|
|
|
async function mounted() {
|
|
await this.fetchActor();
|
|
|
|
if (this.actor) {
|
|
this.pageTitle = this.actor.name;
|
|
}
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
FilterBar,
|
|
Photos,
|
|
Releases,
|
|
Gender,
|
|
Social,
|
|
},
|
|
data() {
|
|
return {
|
|
actor: null,
|
|
releases: null,
|
|
pageTitle: null,
|
|
expanded: false,
|
|
};
|
|
},
|
|
watch: {
|
|
$route: route,
|
|
},
|
|
mounted,
|
|
methods: {
|
|
fetchActor,
|
|
scrollPhotos,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-gender .icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
|
|
.actor-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: $highlight-extreme;
|
|
background: $profile;
|
|
padding: .75rem 1rem;
|
|
}
|
|
|
|
.header-name {
|
|
padding: 0;
|
|
margin: 0;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-gender {
|
|
display: inline-block;
|
|
margin: 0 0 0 .5rem;
|
|
transform: translate(0, .1rem);
|
|
}
|
|
|
|
.header-social {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
|
|
.actor-inner {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.profile {
|
|
background: $profile;
|
|
color: $highlight-extreme;
|
|
width: 100%;
|
|
max-height: 18rem;
|
|
display: flex;
|
|
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;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar {
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
margin: 0 .5rem 0 0;
|
|
}
|
|
}
|
|
|
|
.bio {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bio-header {
|
|
width: calc(50% - 2rem);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 .5rem .5rem 0;
|
|
margin: 0 0 0 1rem;
|
|
}
|
|
|
|
.bio-item {
|
|
width: calc(50% - 4rem);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: .25rem 0 ;
|
|
margin: 0 0 .25rem 1rem;
|
|
line-height: 1.75;
|
|
text-align: right;
|
|
font-size: .9rem;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
|
|
&:not(:last-of-type) {
|
|
border-bottom: solid 1px $highlight-hint;
|
|
}
|
|
}
|
|
|
|
.bio-label {
|
|
color: $highlight;
|
|
margin: 0 1rem 0 0;
|
|
flex-shrink: 0;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
|
|
.icon {
|
|
fill: $highlight;
|
|
margin: 0 .5rem 0 0;
|
|
}
|
|
}
|
|
|
|
.bio-value {
|
|
margin: 0 0 0 2rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.flag {
|
|
height: 1rem;
|
|
margin: .25rem .25rem 0 0;
|
|
}
|
|
|
|
.bio-name {
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.birthdate {
|
|
display: block;
|
|
}
|
|
|
|
.age {
|
|
font-weight: bold;
|
|
padding: 0 0 0 .5rem;
|
|
border-left: solid 1px $highlight-weak;
|
|
margin: 0 0 0 .5rem;
|
|
}
|
|
|
|
.country {
|
|
display: flex;
|
|
}
|
|
|
|
.height-imperial,
|
|
.weight-imperial {
|
|
padding: 0 0 0 .5rem;
|
|
border-left: solid 1px $highlight-weak;
|
|
margin: 0 0 0 .5rem;
|
|
}
|
|
|
|
.enhanced.icon {
|
|
fill: $primary;
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
.ethnicity {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.scraped {
|
|
color: $highlight-weak;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.description {
|
|
max-width: 30rem;
|
|
max-height: 12rem;
|
|
position: relative;
|
|
display: block;
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
margin: 0 2rem 0 0;
|
|
line-height: 1.5;
|
|
text-overflow: ellipsis;
|
|
font-size: .9rem;
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.actor-content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.heading {
|
|
padding: 0;
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.photos-container {
|
|
min-width: 15rem;
|
|
box-sizing: border-box;
|
|
border-right: solid 1px $shadow-hint;
|
|
padding: 1rem 1.5rem 1rem 1rem;
|
|
margin: 0 .5rem 0 0;
|
|
}
|
|
|
|
.photos.compact {
|
|
display: none;
|
|
}
|
|
|
|
.releases {
|
|
flex-grow: 1;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.profile-social {
|
|
display: none;
|
|
}
|
|
|
|
.expand,
|
|
.collapse-header {
|
|
display: none;
|
|
}
|
|
|
|
@media(max-width: $breakpoint4) {
|
|
.description {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint3) {
|
|
.profile .avatar-link {
|
|
display: none;
|
|
}
|
|
|
|
.actor-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.photos-container {
|
|
border: none;
|
|
border-bottom: solid 1px $shadow-hint;
|
|
margin: 0 0 .5rem 0;
|
|
}
|
|
|
|
.photos {
|
|
display: none;
|
|
}
|
|
|
|
.photos.compact {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint) {
|
|
.profile {
|
|
height: auto;
|
|
max-height: none;
|
|
flex-direction: column;
|
|
padding: 0 0 .5rem 0;
|
|
|
|
&.with-avatar {
|
|
height: auto;
|
|
max-height: none;
|
|
}
|
|
|
|
&:not(.expanded) .hideable {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.bio {
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.bio-item {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.expand,
|
|
.expand-header {
|
|
display: flex;
|
|
}
|
|
|
|
.expanded .description {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: none;
|
|
margin: 0;
|
|
padding: 0 1rem;
|
|
overflow: bisible;
|
|
}
|
|
|
|
.expanded {
|
|
.collapse-header {
|
|
display: block;
|
|
}
|
|
|
|
.bio-value {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint0) {
|
|
.header-social {
|
|
display: none;
|
|
}
|
|
|
|
.expanded .profile-social {
|
|
display: block;
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
|
|
.header-name {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
</style>
|