From 3ce8c142b8730c3191b483b8b30f070620e41698 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 22 Apr 2022 12:00:47 +0200
Subject: [PATCH] Improve actor cards integration

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Account/ActorCard.vue  | 11 ++++++-
 js/src/views/Admin/AdminGroupProfile.vue | 18 ++--------
 js/src/views/Event/Event.vue             | 42 +++++++++++++++++++-----
 js/tailwind.config.js                    |  3 ++
 4 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue
index 448ca385c..62eb1a70a 100644
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -31,7 +31,11 @@
       </p>
       <div
         v-if="full"
-        :class="{ 'line-clamp-3': limit }"
+        class="only-first-child"
+        :class="{
+          'line-clamp-3': limit,
+          'line-clamp-10': !limit,
+        }"
         v-html="actor.summary"
       />
     </div>
@@ -95,3 +99,8 @@ export default class ActorCard extends Vue {
   displayName = displayName;
 }
 </script>
+<style scoped>
+.only-first-child ::v-deep :not(:first-child) {
+  display: none;
+}
+</style>
diff --git a/js/src/views/Admin/AdminGroupProfile.vue b/js/src/views/Admin/AdminGroupProfile.vue
index a330a69f8..67c6d1b4a 100644
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -14,8 +14,8 @@
         },
       ]"
     />
-    <div class="actor-card">
-      <p v-if="group.suspended">
+    <div>
+      <p v-if="group.suspended" class="mx-auto max-w-sm block mb-2">
         <actor-card
           :actor="group"
           :full="true"
@@ -24,6 +24,7 @@
         />
       </p>
       <router-link
+        class="mx-auto max-w-sm block mb-2"
         v-else
         :to="{
           name: RouteName.GROUP,
@@ -572,16 +573,3 @@ export default class AdminGroupProfile extends Vue {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-table,
-section {
-  margin: 2rem 0;
-}
-
-.actor-card {
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 10px;
-}
-</style>
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index cbc5d5451..ad5cfc7da 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -24,10 +24,14 @@
                     :actor="event.organizerActor"
                     :inline="true"
                   >
-                    <i18n path="By {username}" dir="auto">
-                      <span dir="ltr" slot="username"
-                        >@{{ usernameWithDomain(event.organizerActor) }}</span
-                      >
+                    <i18n
+                      path="By {username}"
+                      dir="auto"
+                      class="block truncate max-w-xs md:max-w-sm"
+                    >
+                      <span dir="ltr" slot="username">{{
+                        displayName(event.organizerActor)
+                      }}</span>
                     </i18n>
                   </popover-actor-card>
                 </div>
@@ -36,9 +40,23 @@
                     :actor="event.attributedTo"
                     :inline="true"
                   >
-                    <i18n path="By {group}" dir="auto">
-                      <span dir="ltr" slot="group"
-                        >@{{ usernameWithDomain(event.attributedTo) }}</span
+                    <i18n
+                      path="By {group}"
+                      dir="auto"
+                      class="block truncate max-w-xs md:max-w-sm"
+                    >
+                      <router-link
+                        :to="{
+                          name: RouteName.GROUP,
+                          params: {
+                            preferredUsername: usernameWithDomain(
+                              event.attributedTo
+                            ),
+                          },
+                        }"
+                        dir="ltr"
+                        slot="group"
+                        >{{ displayName(event.attributedTo) }}</router-link
                       >
                     </i18n>
                   </popover-actor-card>
@@ -474,7 +492,13 @@ import {
 } from "../../graphql/event";
 import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "../../graphql/actor";
 import { EventModel, IEvent } from "../../types/event.model";
-import { IActor, IPerson, Person, usernameWithDomain } from "../../types/actor";
+import {
+  displayName,
+  IActor,
+  IPerson,
+  Person,
+  usernameWithDomain,
+} from "../../types/actor";
 import { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint";
 import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue";
 import MultiCard from "../../components/Event/MultiCard.vue";
@@ -659,6 +683,8 @@ export default class Event extends EventMixin {
 
   usernameWithDomain = usernameWithDomain;
 
+  displayName = displayName;
+
   RouteName = RouteName;
 
   observer!: IntersectionObserver;
diff --git a/js/tailwind.config.js b/js/tailwind.config.js
index 789383b10..75a55ff73 100644
--- a/js/tailwind.config.js
+++ b/js/tailwind.config.js
@@ -16,6 +16,9 @@ module.exports = {
         secondary: withOpacityValue("--color-secondary"),
         "violet-title": withOpacityValue("--color-violet-title"),
       },
+      lineClamp: {
+        10: "10",
+      },
     },
   },
   plugins: [require("@tailwindcss/line-clamp")],