Fix embed of actor card

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-03-23 12:33:27 +01:00 committed by tykayn
parent 680463a5f9
commit 8d85c3ed8f
2 changed files with 35 additions and 27 deletions

View File

@ -1,33 +1,38 @@
<template> <template>
<div <div
class="w-80 bg-white rounded-lg shadow-md p-4 sm:p-8 flex items-center space-x-4 flex-col items-center pb-10" class="w-80 bg-white rounded-lg shadow-md flex space-x-4 items-center"
:class="{ 'flex-col p-4 sm:p-8 pb-10': !inline }"
> >
<figure class="w-12 h-12" v-if="actor.avatar"> <div>
<img <figure class="w-12 h-12" v-if="actor.avatar">
class="rounded-lg" <img
:src="actor.avatar.url" class="rounded-lg"
alt="" :src="actor.avatar.url"
width="48" alt=""
height="48" width="48"
height="48"
/>
</figure>
<b-icon
v-else
:size="inline ? 'is-medium' : 'is-large'"
icon="account-circle"
class="ltr:-mr-0.5 rtl:-ml-0.5"
/> />
</figure> </div>
<b-icon <div :class="{ 'text-center': !inline }">
v-else <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
size="is-large" {{ displayName(actor) }}
icon="account-circle" </h5>
class="ltr:-mr-0.5 rtl:-ml-0.5" <p class="text-gray-500 truncate" v-if="actor.name">
/> <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
<h5 class="text-xl font-medium violet-title tracking-tight text-gray-900"> </p>
{{ displayName(actor) }} <div
</h5> v-if="full"
<p class="text-gray-500 truncate" v-if="actor.name"> :class="{ 'line-clamp-3': limit }"
<span dir="ltr">@{{ usernameWithDomain(actor) }}</span> v-html="actor.summary"
</p> />
<div </div>
v-if="full"
:class="{ 'line-clamp-3': limit }"
v-html="actor.summary"
/>
</div> </div>
<!-- <div <!-- <div
class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4" class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
@ -77,6 +82,8 @@ export default class ActorCard extends Vue {
@Prop({ required: false, type: Boolean, default: false }) full!: boolean; @Prop({ required: false, type: Boolean, default: false }) full!: boolean;
@Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
@Prop({ required: false, type: Boolean, default: false }) popover!: boolean; @Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
@Prop({ required: false, type: Boolean, default: true }) limit!: boolean; @Prop({ required: false, type: Boolean, default: true }) limit!: boolean;

View File

@ -48,9 +48,10 @@
!event.attributedTo || !event.options.hideOrganizerWhenGroupEvent !event.attributedTo || !event.options.hideOrganizerWhenGroupEvent
" "
:actor="event.attributedTo" :actor="event.attributedTo"
:inline="true"
/> />
<actor-card v-else :actor="event.organizerActor" />
</router-link> </router-link>
<actor-card v-else :actor="event.organizerActor" :inline="true" />
<actor-card <actor-card
:actor="contact" :actor="contact"
v-for="contact in event.contacts" v-for="contact in event.contacts"