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> </p>
<div <div
v-if="full" 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" v-html="actor.summary"
/> />
</div> </div>
@ -95,3 +99,8 @@ export default class ActorCard extends Vue {
displayName = displayName; displayName = displayName;
} }
</script> </script>
<style scoped>
.only-first-child ::v-deep :not(:first-child) {
display: none;
}
</style>

View File

@ -14,8 +14,8 @@
}, },
]" ]"
/> />
<div class="actor-card"> <div>
<p v-if="group.suspended"> <p v-if="group.suspended" class="mx-auto max-w-sm block mb-2">
<actor-card <actor-card
:actor="group" :actor="group"
:full="true" :full="true"
@ -24,6 +24,7 @@
/> />
</p> </p>
<router-link <router-link
class="mx-auto max-w-sm block mb-2"
v-else v-else
:to="{ :to="{
name: RouteName.GROUP, name: RouteName.GROUP,
@ -572,16 +573,3 @@ export default class AdminGroupProfile extends Vue {
} }
} }
</script> </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" :actor="event.organizerActor"
:inline="true" :inline="true"
> >
<i18n path="By {username}" dir="auto"> <i18n
<span dir="ltr" slot="username" path="By {username}"
>@{{ usernameWithDomain(event.organizerActor) }}</span dir="auto"
> class="block truncate max-w-xs md:max-w-sm"
>
<span dir="ltr" slot="username">{{
displayName(event.organizerActor)
}}</span>
</i18n> </i18n>
</popover-actor-card> </popover-actor-card>
</div> </div>
@ -36,9 +40,23 @@
:actor="event.attributedTo" :actor="event.attributedTo"
:inline="true" :inline="true"
> >
<i18n path="By {group}" dir="auto"> <i18n
<span dir="ltr" slot="group" path="By {group}"
>@{{ usernameWithDomain(event.attributedTo) }}</span 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> </i18n>
</popover-actor-card> </popover-actor-card>
@ -474,7 +492,13 @@ import {
} from "../../graphql/event"; } from "../../graphql/event";
import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "../../graphql/actor"; import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "../../graphql/actor";
import { EventModel, IEvent } from "../../types/event.model"; 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 { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint";
import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue";
import MultiCard from "../../components/Event/MultiCard.vue"; import MultiCard from "../../components/Event/MultiCard.vue";
@ -659,6 +683,8 @@ export default class Event extends EventMixin {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
RouteName = RouteName; RouteName = RouteName;
observer!: IntersectionObserver; observer!: IntersectionObserver;

View File

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