traxxx/assets/components/actors/actor.vue

<template>
	<div
		v-if="actor"
		class="content actor"
	>
		<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="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/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.realName"
						class="bio-item"
					>
						<dfn class="bio-label"><Icon icon="vcard" />Real name</dfn>
						<span class="bio-value">{{ actor.realName }}</span>
					</li>

					<li
						v-if="actor.dateOfBirth"
						class="bio-item"
					>
						<dfn class="bio-label"><Icon icon="cake" />Date of birth</dfn>

						<span class="birthdate">{{ formatDate(actor.dateOfBirth, 'MMMM D, YYYY') }}<span
							v-if="!actor.dateOfDeath"
							class="age"
						>{{ actor.age }}</span></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.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/${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()}.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"
								v-tooltip="'Enhanced boobs'"
								icon="magic-wand2"
								class="enhanced"
							/>{{ actor.bust || '??' }}{{ actor.cup || '?' }}-{{ 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.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"
							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>

				<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.network.id}`"
							class="description"
						>
							{{ description.text }}
							<router-link :to="{ name: 'network', params: { networkSlug: description.network.slug } }">
								<img
									v-if="description.site"
									:src="`/img/logos/${description.network.slug}/thumbs/${description.site.slug}.png`"
									class="description-logo"
								>

								<img
									v-else
									:src="`/img/logos/${description.network.slug}/thumbs/network.png`"
									class="description-logo"
								>
							</router-link>
						</p>
					</div>
				</div>

				<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">
				<Photos
					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
					:actor="actor"
				/>

				<FilterBar :fetch-releases="fetchActor" />
				<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('fetchActorById', {
		actorId: Number(this.$route.params.actorId),
		range: this.$route.params.range,
	});
}

function sfw() {
	return this.$store.state.ui.sfw;
}

async function route() {
	await this.fetchActor();
}

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,
		};
	},
	computed: {
		sfw,
	},
	watch: {
		$route: route,
	},
	mounted,
	methods: {
		fetchActor,
	},
};
</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 {
        padding: 0 0 1rem 1rem;
        flex-shrink: 0;
    }

    .avatar {
        height: 100%;
        flex-shrink: 0;
		border: solid 3px var(--lighten-hint);
        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,
.bio-value {
	display: flex;
	align-items: center;
}

.bio-label {
    color: $highlight;
    margin: 0 1rem 0 0;
    flex-shrink: 0;
    font-style: normal;
    font-weight: 400;

    .icon {
        fill: $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 .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;
	justify-content: flex-end;
}

.figure .bio-label .icon {
	margin: -.5rem .5rem 0 0;
}

.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;
	transform: scaleX(-1);
}

.ethnicity,
.hair,
.eyes {
    text-transform: capitalize;
}

.scraped {
    color: $highlight-weak;
    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(--lighten-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;
}

.photos {
	background: var(--background-dim);
}

.releases {
	border-top: solid 1px var(--crease);
}

.releases {
    flex-grow: 1;
    padding: 1rem;
}

.profile-social {
    display: none;
}

.expand,
.collapse-header {
    display: none;
}

@media(max-width: $breakpoint4) {
    .descriptions-container {
        display: none;
    }
}

@media(max-width: $breakpoint3) {
    .profile .avatar-link {
        display: none;
    }

    .actor-content {
        flex-direction: column;
    }
}

@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 .descriptions-container {
        display: block;
        max-width: 100%;
        max-height: 30rem;
        margin: 0;
        padding: 0 1rem;
    }
	*/

    .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>