diff --git a/components/Events/EventsCard.vue b/components/Events/EventsCard.vue index d82e8c15a1..32ee250487 100644 --- a/components/Events/EventsCard.vue +++ b/components/Events/EventsCard.vue @@ -11,8 +11,23 @@ :vertical-layout="verticalLayout" :alt-text="altText" > -
- +
+

+ {{ description.substring(0, MAX_DESCRIPTION_LENGTH_CH).trim() }}... + show more +

+

+ {{ description }} + show less +

@@ -46,19 +61,20 @@ interface Props { types?: string[]; title: string; image: string; + description?: string; altText?: string; institution?: string; location?: string; date?: string; time?: string | null; - to: string; + to?: string; ctaLabel?: string; segment?: CtaClickedEventProp | undefined; verticalLayout?: boolean; regions?: string[]; } -withDefaults(defineProps(), { +const props = withDefaults(defineProps(), { types: () => [], altText: "Event image", institution: "", @@ -68,8 +84,19 @@ withDefaults(defineProps(), { segment: undefined, time: undefined, verticalLayout: false, + description: undefined, + to: "", regions: () => [], }); + +const MAX_DESCRIPTION_LENGTH_CH = 240; +const tooLongDescription = + props.description && props.description.length > MAX_DESCRIPTION_LENGTH_CH; + +const showMore = ref(false); +function toggleDescriptionLength() { + showMore.value = !showMore.value; +}