diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue index 7d48b4fc6..58ff7dfc0 100644 --- a/js/src/components/Account/ActorCard.vue +++ b/js/src/components/Account/ActorCard.vue @@ -1,33 +1,38 @@ <template> <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"> - <img - class="rounded-lg" - :src="actor.avatar.url" - alt="" - width="48" - height="48" + <div> + <figure class="w-12 h-12" v-if="actor.avatar"> + <img + class="rounded-lg" + :src="actor.avatar.url" + alt="" + 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> - <b-icon - v-else - size="is-large" - icon="account-circle" - class="ltr:-mr-0.5 rtl:-ml-0.5" - /> - <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900"> - {{ displayName(actor) }} - </h5> - <p class="text-gray-500 truncate" v-if="actor.name"> - <span dir="ltr">@{{ usernameWithDomain(actor) }}</span> - </p> - <div - v-if="full" - :class="{ 'line-clamp-3': limit }" - v-html="actor.summary" - /> + </div> + <div :class="{ 'text-center': !inline }"> + <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900"> + {{ displayName(actor) }} + </h5> + <p class="text-gray-500 truncate" v-if="actor.name"> + <span dir="ltr">@{{ usernameWithDomain(actor) }}</span> + </p> + <div + v-if="full" + :class="{ 'line-clamp-3': limit }" + v-html="actor.summary" + /> + </div> </div> <!-- <div 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 }) inline!: boolean; + @Prop({ required: false, type: Boolean, default: false }) popover!: boolean; @Prop({ required: false, type: Boolean, default: true }) limit!: boolean; diff --git a/js/src/components/Event/EventMetadataSidebar.vue b/js/src/components/Event/EventMetadataSidebar.vue index 7964d99d0..ba977cf45 100644 --- a/js/src/components/Event/EventMetadataSidebar.vue +++ b/js/src/components/Event/EventMetadataSidebar.vue @@ -48,9 +48,10 @@ !event.attributedTo || !event.options.hideOrganizerWhenGroupEvent " :actor="event.attributedTo" + :inline="true" /> - <actor-card v-else :actor="event.organizerActor" /> </router-link> + <actor-card v-else :actor="event.organizerActor" :inline="true" /> <actor-card :actor="contact" v-for="contact in event.contacts"