Merge branch 'improve-popovers' into 'master'

Improve popovers

See merge request framasoft/mobilizon!475
This commit is contained in:
Thomas Citharel 2020-06-16 12:27:25 +02:00
commit 679c645f9a
3 changed files with 27 additions and 18 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="clickable"> <div :class="{ clickable: popover }">
<div class="media" style="align-items: top;"> <div class="media" style="align-items: top;">
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32" v-if="actor.avatar"> <figure class="image is-32x32" v-if="actor.avatar">
@ -13,7 +13,7 @@
{{ actor.name || `@${usernameWithDomain(actor)}` }} {{ actor.name || `@${usernameWithDomain(actor)}` }}
</p> </p>
<p class="has-text-grey" v-if="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> </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: 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; usernameWithDomain = usernameWithDomain;
} }
@ -37,6 +39,14 @@ export default class ActorCard extends Vue {
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }
.summary.limit {
max-width: 25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style> </style>
<style lang="scss"> <style lang="scss">

View File

@ -2,7 +2,7 @@
<v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable"> <v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable">
<slot></slot> <slot></slot>
<template slot="popover" class="popover"> <template slot="popover" class="popover">
<actor-card :full="true" :actor="actor" :popover="false" /> <actor-card :full="true" :actor="actor" :popover="true" />
</template> </template>
</v-popover> </v-popover>
</template> </template>

View File

@ -24,20 +24,9 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<article class="media"> <div class="actor-card">
<figure class="media-left" v-if="person.avatar"> <actor-card :actor="person" :full="true" :popover="false" :limit="false" />
<p class="image is-48x48"> </div>
<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>
<table v-if="metadata.length > 0" class="table is-fullwidth"> <table v-if="metadata.length > 0" class="table is-fullwidth">
<tbody> <tbody>
<tr v-for="{ key, value, link } in metadata" :key="key"> <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 { usernameWithDomain } from "../../types/actor/actor.model";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { IEvent } from "../../types/event.model"; import { IEvent } from "../../types/event.model";
import ActorCard from "../../components/Account/ActorCard.vue";
const EVENTS_PER_PAGE = 10; const EVENTS_PER_PAGE = 10;
@ -165,6 +155,9 @@ const EVENTS_PER_PAGE = 10;
}, },
}, },
}, },
components: {
ActorCard,
},
}) })
export default class AdminProfile extends Vue { export default class AdminProfile extends Vue {
@Prop({ required: true }) id!: String; @Prop({ required: true }) id!: String;
@ -315,4 +308,10 @@ table,
section { section {
margin: 2rem 0; margin: 2rem 0;
} }
.actor-card {
background: #fff;
padding: 1.5rem;
border-radius: 10px;
}
</style> </style>