From ba08d2d5152a4c55459d7f8e481687ae7210fc5b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 16 Jun 2020 12:03:09 +0200
Subject: [PATCH] Improve popovers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Account/ActorCard.vue       | 16 ++++++++---
 .../components/Account/PopoverActorCard.vue   |  2 +-
 js/src/views/Admin/AdminProfile.vue           | 27 +++++++++----------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue
index 3de646074..5c143932a 100644
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="clickable">
+  <div :class="{ clickable: popover }">
     <div class="media" style="align-items: top;">
       <div class="media-left">
         <figure class="image is-32x32" v-if="actor.avatar">
@@ -13,7 +13,7 @@
           {{ actor.name || `@${usernameWithDomain(actor)}` }}
         </p>
         <p class="has-text-grey" v-if="actor.name">@{{ usernameWithDomain(actor) }}</p>
-        <p v-if="full">{{ actor.summary }}</p>
+        <p v-if="full" class="summary" :class="{ limit: limit }">{{ actor.summary }}</p>
       </div>
     </div>
   </div>
@@ -28,7 +28,9 @@ export default class ActorCard extends Vue {
 
   @Prop({ required: false, type: Boolean, default: false }) full!: boolean;
 
-  @Prop({ required: false, type: Boolean, default: true }) popover!: boolean;
+  @Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
+
+  @Prop({ required: false, type: Boolean, default: true }) limit!: boolean;
 
   usernameWithDomain = usernameWithDomain;
 }
@@ -37,6 +39,14 @@ export default class ActorCard extends Vue {
 .clickable {
   cursor: pointer;
 }
+
+.summary.limit {
+  max-width: 25rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
 </style>
 
 <style lang="scss">
diff --git a/js/src/components/Account/PopoverActorCard.vue b/js/src/components/Account/PopoverActorCard.vue
index 8c67fdc69..0af626c95 100644
--- a/js/src/components/Account/PopoverActorCard.vue
+++ b/js/src/components/Account/PopoverActorCard.vue
@@ -2,7 +2,7 @@
   <v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable">
     <slot></slot>
     <template slot="popover" class="popover">
-      <actor-card :full="true" :actor="actor" :popover="false" />
+      <actor-card :full="true" :actor="actor" :popover="true" />
     </template>
   </v-popover>
 </template>
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 97ff1b3fd..ae418b913 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -24,20 +24,9 @@
         </li>
       </ul>
     </nav>
-    <article class="media">
-      <figure class="media-left" v-if="person.avatar">
-        <p class="image is-48x48">
-          <img :src="person.avatar.url" alt="" />
-        </p>
-      </figure>
-      <div class="media-content">
-        <div class="content">
-          <strong v-if="person.name">{{ person.name }}</strong>
-          <small>@{{ usernameWithDomain(person) }}</small>
-          <p v-html="person.summary" />
-        </div>
-      </div>
-    </article>
+    <div class="actor-card">
+      <actor-card :actor="person" :full="true" :popover="false" :limit="false" />
+    </div>
     <table v-if="metadata.length > 0" class="table is-fullwidth">
       <tbody>
         <tr v-for="{ key, value, link } in metadata" :key="key">
@@ -146,6 +135,7 @@ import { IPerson } from "../../types/actor";
 import { usernameWithDomain } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
 import { IEvent } from "../../types/event.model";
+import ActorCard from "../../components/Account/ActorCard.vue";
 
 const EVENTS_PER_PAGE = 10;
 
@@ -165,6 +155,9 @@ const EVENTS_PER_PAGE = 10;
       },
     },
   },
+  components: {
+    ActorCard,
+  },
 })
 export default class AdminProfile extends Vue {
   @Prop({ required: true }) id!: String;
@@ -315,4 +308,10 @@ table,
 section {
   margin: 2rem 0;
 }
+
+.actor-card {
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 10px;
+}
 </style>