Improve popovers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-06-16 12:03:09 +02:00
parent 1862168849
commit ba08d2d515
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 27 additions and 18 deletions

View File

@ -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">

View File

@ -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>

View File

@ -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>