From 9d3cd05e336daf14735847ccdb8817510c9a7b93 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 23 Mar 2022 12:33:27 +0100
Subject: [PATCH] Fix embed of actor card

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Account/ActorCard.vue       | 59 +++++++++++--------
 .../components/Event/EventMetadataSidebar.vue |  3 +-
 2 files changed, 35 insertions(+), 27 deletions(-)

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"