traxxx/assets/components/users/actor-preview.vue

87 lines
1.3 KiB
Vue
Raw Normal View History

<template>
<router-link
:to="`/actor/${actor.id}/${actor.slug}`"
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>
</router-link>
</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,
},
},
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%;
2021-03-20 01:34:49 +00:00
border-right: solid 1px var(--shadow-hint);
}
.avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}
.avatar-fallback {
2021-03-20 01:34:49 +00:00
fill: var(--shadow-weak);
}
.name {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 .5rem;
2021-03-19 20:57:04 +00:00
font-size: .8rem;
font-weight: bold;
}
</style>