Improve actor cards integration

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-22 12:00:47 +02:00
parent 95062df343
commit 3ce8c142b8
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
4 changed files with 50 additions and 24 deletions

View file

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

View file

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

View file

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

View file

@ -16,6 +16,9 @@ module.exports = {
secondary: withOpacityValue("--color-secondary"),
"violet-title": withOpacityValue("--color-violet-title"),
},
lineClamp: {
10: "10",
},
},
},
plugins: [require("@tailwindcss/line-clamp")],