traxxx-web/pages/actors/@actorId/+Page.vue

107 lines
2.0 KiB
Vue

<template>
<div class="actor">
<div class="actor-header">
<h2 class="header-name">
<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.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 class="bio-value">
<span
v-for="alias in actor.aliases"
:key="`alias-${alias.id}`"
class="alias"
>{{ alias.name }}</span>
</span>
</li>
<!--
<Social
v-if="actor.social && actor.social.length > 0"
:actor="actor"
class="header-social"
/>
<StashButton
:stashed-by="stashedBy"
class="actor-stash light"
@stash="(stash) => stashActor(stash)"
@unstash="(stash) => unstashActor(stash)"
/>
-->
</div>
<div class="content">
<Bio :actor="actor" />
<Scenes />
</div>
</div>
</template>
<script setup>
import { inject } from 'vue';
import Bio from '#/components/actors/bio.vue';
import Gender from '#/components/actors/gender.vue';
import Scenes from '#/components/scenes/scenes.vue';
const pageContext = inject('pageContext');
const { pageProps } = pageContext;
const { actor } = pageProps;
</script>
<style scoped>
.actor {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.actor-header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--highlight-strong-30);
background: var(--grey-dark-40);
}
.header-name {
padding: .5rem 1rem;
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, .125rem);
}
.header-social {
overflow: hidden;
white-space: nowrap;
margin: 0 1rem 0 0;
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}
</style>