Skip to content

Fixed event card title overflow issue #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 20, 2024
Merged

Fixed event card title overflow issue #200

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 42 additions & 20 deletions packages/frontendmu-nuxt/components/cards/EventCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,40 +50,49 @@ function formatDate(date: Date, formatString: string) {
</script>

<template>
<div class="group group/event in-card bg-white dark:bg-verse-700/30 dark:backdrop-blur-sm border-2 rounded-xl overflow-hidden hover:border-verse-500 transition-all duration-300" :class="[
event?.album ? 'col-span-2 md:col-span-1' : 'md:col-span-1 col-span-2',
isNextMeetup ? 'border-green-600 dark:border-green-500' : 'border-verse-50 dark:border-white/10 ',
]"
<div
class="group group/event in-card bg-white dark:bg-verse-700/30 dark:backdrop-blur-sm border-2 rounded-xl overflow-hidden hover:border-verse-500 transition-all duration-300"
:class="[
event?.album ? 'col-span-2 md:col-span-1' : 'md:col-span-1 col-span-2',
isNextMeetup ? 'border-green-600 dark:border-green-500' : 'border-verse-50 dark:border-white/10 ',
]"
>
<div
class="relative flex overflow-clip h-full flex-col md:flex-row justify-between w-full transition-all duration-300 group-hover[.in-card]:shadow-lg group-hover[.in-card]:border-red-400"
>
<div class="absolute inset-0 z-0 ">
<CardAlbum :current-album="currentAlbum" :source="photoAlbumSource" />
<CardAlbum
:current-album="currentAlbum"
:source="photoAlbumSource"
/>
</div>

<div
class="inset-0 absolute z-0 bg-gradient-to-r from-white via-white dark:from-verse-900 dark:via-verse-900 to-transparent"
/>

<NuxtLink class="absolute inset-0 z-10" :href="`/meetup/${event.id}`">
<NuxtLink
class="absolute inset-0 z-10"
:href="`/meetup/${event.id}`"
>
<span class="sr-only">View details for {{ event?.title }}</span>
</NuxtLink>

<div class="relative z-5 flex flex-col p-4 w-full justify-between gap-4">
<template v-if="event.Date">
<div class="flex flex-col font-mono text-sm font-medium gap-2 w-full justify-between" :class="[
isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
]"
<div
class="flex flex-col font-mono text-sm font-medium gap-2 w-full justify-between"
:class="[
isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
]"
>
<!-- Title -->
<div class="flex items-center justify-between">
<h3
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500"
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500 w-[300px] max-w-full md:w-96 focus:outline-none"
:title="`Meetup ${event?.title}`"
>
<div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
{{ event?.title }}
</div>
{{ event?.title }}
</h3>

<template v-if="isNextMeetup">
Expand All @@ -96,14 +105,22 @@ function formatDate(date: Date, formatString: string) {
<div class="flex items-center gap-2">
<!-- Date -->
<div>
<Icon name="carbon:calendar" class="mr-2 h-4 w-4" />
<Icon
name="carbon:calendar"
class="mr-2 h-4 w-4"
/>
<span>{{ formatDate(new Date(event.Date), 'dd MMM yyyy') }}</span>
</div>

<div v-if="event.Venue"
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium leading-3 md:leading-5 "
<div
v-if="event.Venue"
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium leading-3 md:leading-5 "
>
<Icon name="carbon:location" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
<Icon
name="carbon:location"
class="mr-1.5 h-4 w-4 flex-shrink-0 truncate "
aria-hidden="true"
/>
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
{{ event.Venue }}
</div>
Expand All @@ -116,10 +133,15 @@ function formatDate(date: Date, formatString: string) {
<SpeakerList :event="event" />

<template v-if="event.Attendees">
<div class="flex items-center border-gray-100 bg-white/70 dark:bg-verse-950/60 rounded-full px-2"
title="Attendees"
<div
class="flex items-center border-gray-100 bg-white/70 dark:bg-verse-950/60 rounded-full px-2"
title="Attendees"
>
<Icon name="carbon:group" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
<Icon
name="carbon:group"
class="mr-1.5 h-4 w-4 flex-shrink-0 truncate "
aria-hidden="true"
/>
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
{{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
</div>
Expand Down
Loading