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>