<template> <div v-if="actor" class="actor" > <a :href="`/actor/${actor.slug}`" class="link" > <span v-tooltip.top="actor.name" class="name" >{{ actor.name }}</span> <img v-if="actor.avatar" :src="`/media/${actor.avatar.thumbnail || actor.avatar}`" class="avatar" > <span v-else class="avatar" >No photo</span> </a> </div> </template> <script> export default { props: { actor: { type: Object, default: null, }, }, }; </script> <style lang="scss" scoped> @import 'theme'; .actor { width: 10rem; background: $background; display: inline-block; margin: 0 .5rem .5rem 0; box-shadow: 0 0 3px $shadow-weak; } .link { color: $link; text-decoration: none; text-align: center; &:hover { color: $primary; } } .name { display: block; padding: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; } .avatar { color: $shadow-weak; background: $shadow-hint; height: 12rem; width: 100%; display: flex; align-items: center; justify-content: center; object-fit: cover; object-position: 50% 0; } </style>