traxxx-web/components/actors/bio.vue

741 lines
14 KiB
Vue

<template>
<div
class="profile"
:class="{ expanded, 'with-avatar': !!actor.avatar }"
>
<div
v-if="actor.avatar"
class="avatar-container"
>
<img
:src="getMediaPath(actor.avatar, 'thumbnail')"
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
class="avatar"
>
</div>
<ul class="bio nolist">
<li
v-if="actor.dateOfBirth"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="cake" />Date of birth</dfn>
<span class="birthdate">
<span class="birthdate-long">{{ formatDate(actor.dateOfBirth, 'MMMM d, yyyy') }}</span>
<span class="birthdate-short">{{ formatDate(actor.dateOfBirth, 'MMM d, yyyy') }}</span>
<span
v-if="!actor.dateOfDeath"
class="age"
>{{ actor.ageFromBirth }}</span>
</span>
</li>
<li
v-else-if="actor.age && !actor.dateOfDeath"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="cake" />Age</dfn>
<span
:title="'Exact date of birth or age unknown'"
class="birthdate"
>&gt; {{ actor.age }}</span>
</li>
<li
v-if="actor.dateOfDeath"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="tombstone" />Date of death</dfn>
<span class="birthdate">{{ formatDate(actor.dateOfDeath, 'MMMM d, yyyy') }}<span
v-if="actor.ageAtDeath"
class="age"
>{{ actor.ageAtDeath }}</span></span>
</li>
<li
v-if="actor.orientation"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="heart7" />Orientation</dfn>
<span class="orientation">{{ actor.orientation }}</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"
>{{ actor.origin.city }}</span><span
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
class="state"
>{{ 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/${actor.origin.country.alpha2.toLowerCase()}.svg`"
>
<span class="country-name">{{ actor.origin.country.alias || actor.origin.country.name }}</span>
<span class="country-alpha2">{{ actor.origin.country.alpha2 }}</span>
</span>
</span>
</li>
<li
v-if="actor.residence"
class="bio-item residence hideable"
>
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
<span>
<span
v-if="actor.residence.city"
class="city"
>{{ actor.residence.city }}</span><span
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
class="state"
>{{ 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()}.svg`"
>{{ 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 figure"
>
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
<span class="bio-value">
<Icon
v-if="actor.naturalBoobs === false"
:title="'Enhanced boobs'"
icon="magic-wand2"
class="enhanced"
/>{{ actor.bust || '??' }}{{ actor.cup || '?' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
</span>
</li>
<li
v-if="actor.penisLength || actor.penisGirth || actor.circumcised"
class="bio-item penis"
>
<dfn class="bio-label"><Icon icon="pencil-ruler" />Dick</dfn>
<span>
<Icon
v-if="actor.circumcised"
:title="'Circumcised'"
icon="page-break"
class="circumcised"
/>
<template v-if="actor.penisLengthMetric && actor.penisGirthMetric">
<span>{{ actor.penisLengthMetric }} * {{ actor.penisGirthMetric }} cm</span>
<span class="bio-segment">{{ actor.penisLengthImperial }}" * {{ actor.penisGirthImperial }}"</span>
</template>
<template v-else-if="actor.penisLengthMetric">
<span>{{ actor.penisLengthMetric }} cm</span>
<span class="bio-segment">{{ actor.penisLengthImperial }}"</span>
</template>
</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[0] }}' {{ actor.height.imperial[1] }}"</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.eyes"
class="bio-item eyes hideable"
>
<dfn class="bio-label"><Icon icon="eye" />Eyes</dfn>
<span>{{ actor.eyes }}</span>
</li>
<li
v-if="actor.hairColor"
class="bio-item hair hideable"
>
<dfn class="bio-label"><Icon icon="haircut" />Hair</dfn>
<span><span v-if="actor.hairLength">{{ actor.hairLength }}, </span>{{ actor.hairColor }}</span>
</li>
<li
v-if="actor.hasTattoos"
class="bio-item tattoos hideable"
>
<dfn class="bio-label"><Icon icon="lotus" />Tattoos</dfn>
<span
v-if="actor.tattoos"
:title="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"
:title="actor.piercings"
class="bio-value"
>{{ actor.piercings }}</span>
<span v-else>Yes</span>
</li>
<li class="bio-item updated hideable">Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm') }}, ID: {{ actor.id }}</li>
</ul>
<div class="descriptions-container">
<div
v-if="actor.descriptions && actor.descriptions.length > 0"
class="descriptions"
>
<p
v-for="description in actor.descriptions"
:key="`description-${description.entity.id}`"
class="description"
>
{{ description.text }}
<a :href="`/${description.entity.type}/${description.entity.slug}`">
<img
v-if="description.entity.type === 'network' || !description.entity.parent || description.entity.independent"
:src="`/img/logos/${description.entity.slug}/thumbs/network.png`"
class="description-logo"
>
<img
v-else
:src="`/img/logos/${description.entity.parent.slug}/thumbs/${description.entity.slug}.png`"
class="description-logo"
>
</a>
</p>
</div>
</div>
<div
v-if="showExpand"
class="expand-container"
>
<button
type="button"
class="expand"
@click="expanded = !expanded"
>
<Icon
v-show="expanded"
icon="arrow-up3"
/>
<Icon
v-show="!expanded"
icon="arrow-down3"
/>
</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { getMediaPath } from '#/utils/media-path.js';
import { formatDate } from '#/utils/format.js';
const expanded = ref(false);
const props = defineProps({
actor: {
type: Object,
default: null,
},
});
// if the profile is empty, the expand button overlaps the header
const showExpand = [
'age',
'bust',
'cup',
'eyes',
'hairColor',
'hasPiercings',
'hasTattoos',
'height',
'hip',
'naturalBoobs',
'origin',
'residence',
'waist',
'weight',
].some((attribute) => !!props.actor[attribute]);
</script>
<style>
.header-gender {
display: inline-flex;
align-items: center;
margin: 0 0 0 .5rem;
transform: translate(0, .125rem);
font-size: 0;
.icon {
width: 1.25rem;
height: 1.25rem;
}
}
</style>
<style scoped>
.profile {
background: var(--grey-dark-40);
color: var(--highlight-strong-30);
width: 100%;
max-height: 18rem;
display: flex;
flex-direction: row;
flex-shrink: 0;
position: relative;
&.with-avatar {
height: 18rem; /* profile overlaps avatar in chrome */
}
.avatar-container {
padding: 0 0 1rem 1rem;
flex-shrink: 0;
}
.avatar {
height: 100%;
flex-shrink: 0;
border: solid 3px var(--highlight-hint);
margin: 0 .5rem 0 0;
}
&.expanded {
padding-bottom: 1.5rem;
margin-bottom: .75rem;
}
}
.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 var(--highlight-weak-40);
}
}
.bio-label,
.bio-value {
display: flex;
align-items: center;
}
.bio-label {
color: var(--highlight-strong-20);
margin: 0 1rem 0 0;
flex-shrink: 0;
font-style: normal;
font-weight: 400;
.icon {
fill: var(--highlight);
margin: -.25rem .5rem 0 0;
}
}
.bio-value {
margin: 0 0 0 2rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.icon {
margin: -.25rem 0 0 0;
}
}
.flag {
height: 1rem;
margin: .25rem .5rem 0 0;
}
.bio-name {
display: inline-block;
padding: 0;
margin: 0;
}
.birthdate {
display: block;
}
.birthdate-short {
display: none;
}
.age {
font-weight: bold;
padding: 0 0 0 .5rem;
border-left: solid 1px var(--highlight-weak-20);
margin: 0 0 0 .5rem;
}
.country {
display: flex;
justify-content: flex-end;
}
.country-alpha2 {
display: none;
}
.figure .bio-label .icon {
margin: -.5rem .5rem 0 0;
}
.height-imperial,
.weight-imperial,
.penis-girth-imperial,
.penis-length-imperial,
.bio-segment {
padding: 0 0 0 .5rem;
border-left: solid 1px var(--highlight-weak);
margin: 0 0 0 .5rem;
}
.enhanced.icon,
.circumcised.icon {
fill: var(--primary);
padding: 0 .5rem;
}
.enhanced.icon {
transform: scaleX(-1);
}
.ethnicity,
.hair,
.eyes,
.orientation {
text-transform: capitalize;
}
.alias:not(:last-child)::after {
content: ',\00a0';
}
.updated {
color: var(--highlight-weak-20);
font-size: .8rem;
}
.descriptions-container {
max-width: 30rem;
max-height: 100%;
position: relative;
display: block;
flex-grow: 1;
box-sizing: border-box;
overflow: hidden;
&::after {
content: '';
width: 100%;
height: 1.5rem;
position: absolute;
bottom: 0;
background: linear-gradient(transparent, 25%, var(--profile) 75%);
pointer-events: none;
}
}
.descriptions {
height: 100%;
overflow: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.description {
margin: 0;
padding: 0 1rem;
border-left: solid 3px var(--highlight-hint);
line-height: 1.5;
font-size: .9rem;
}
.description-logo {
display: block;
width: 12rem;
max-height: 1.5rem;
margin: .5rem 0 1.5rem 0;
object-fit: contain;
object-position: 0 50%;
}
.actor-content {
display: flex;
flex-grow: 1;
flex-direction: column;
background: var(--background-soft);
}
.heading {
padding: 0;
margin: 0 0 1rem 0;
}
.profile-social {
display: none;
}
.expand-container {
width: 100%;
display: none;
justify-content: center;
position: absolute;
z-index: 1;
bottom: -.75rem;
}
.expand {
width: 4rem;
height: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
border: none;
border-radius: .5rem;
background: var(--grey-dark-50);
box-shadow: 0 0 3px var(--shadow);
.icon {
fill: var(--text-light);
}
&:hover {
cursor: pointer;
background: var(--primary);
}
}
.scroll {
background: var(--background-dim);
border-bottom: solid 1px var(--shadow-hint);
}
.stash.icon {
width: 1.5rem;
height: 1.5rem;
padding: 0 1rem;
fill: var(--highlight);
&.stashed {
fill: var(--primary);
}
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
@media(--big) {
.descriptions-container {
display: none;
}
}
@media(--compact) {
.profile {
.avatar-container {
display: none;
}
&.with-avatar {
height: auto;
max-height: 18rem;
}
}
.actor-content {
flex-direction: column;
}
}
@media(--small-15) {
.profile {
height: auto;
max-height: none;
flex-direction: column;
&.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;
}
.expanded .bio-value {
white-space: normal;
}
.expand-container {
display: flex;
}
.actor-stash {
margin: 0 .5rem 0 0;
}
}
@media(--small-30) {
.header-social {
display: none;
}
.expanded .profile-social {
display: block;
margin: 1rem 0 0 0;
}
.header-name {
flex-grow: 1;
font-size: 1.3rem;
padding: .5rem .5rem .5rem 1rem;
}
.stash.icon {
width: 1.25rem;
height: 1.25rem;
padding: 0 1rem 0 .25rem;
transform: translate(0, -.1rem);
}
}
@media(--small-60) {
.birthdate-long,
.age {
display: none;
}
.birthdate-short {
display: inline-block;
}
.country-name {
display: none;
}
.country-alpha2 {
display: inline-block;
}
}
</style>