Improve actor cards integration
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
95062df343
commit
3ce8c142b8
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -16,6 +16,9 @@ module.exports = {
|
|||
secondary: withOpacityValue("--color-secondary"),
|
||||
"violet-title": withOpacityValue("--color-violet-title"),
|
||||
},
|
||||
lineClamp: {
|
||||
10: "10",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/line-clamp")],
|
||||
|
|
Loading…
Reference in a new issue