92 lines
1.4 KiB
Vue
Executable File
92 lines
1.4 KiB
Vue
Executable File
<template>
|
|
<RouterLink
|
|
:to="`/actor/${actor.id}/${actor.slug}`"
|
|
:target="target"
|
|
class="actor nolink"
|
|
>
|
|
<div class="avatar">
|
|
<img
|
|
v-if="actor.avatar"
|
|
:src="getPath(actor.avatar, 'lazy')"
|
|
class="avatar-image"
|
|
>
|
|
|
|
<Icon
|
|
v-else-if="actor.gender"
|
|
:icon="actor.gender"
|
|
class="avatar-fallback"
|
|
/>
|
|
</div>
|
|
|
|
<span class="name">{{ actor.name }}</span>
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<script>
|
|
async function unstashActor(actorId, stashId) {
|
|
await this.$store.dispatch('unstashActor', { actorId, stashId });
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
actor: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
stash: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
target: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
methods: {
|
|
unstashActor,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.actor {
|
|
height: 2.5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: solid 1px var(--shadow-hint);
|
|
|
|
&:hover {
|
|
border: solid 1px var(--primary);
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 100%;
|
|
border-right: solid 1px var(--shadow-hint);
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 0;
|
|
}
|
|
|
|
.avatar-fallback {
|
|
fill: var(--shadow-weak);
|
|
}
|
|
|
|
.name {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0 .5rem;
|
|
font-size: .8rem;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|