Skip to content

Commit 1663f17

Browse files
MrSunshyneMrSunshyne
committed
speaker cards into its own component
add scroll animations
1 parent 03bbf35 commit 1663f17

File tree

4 files changed

+111
-77
lines changed

4 files changed

+111
-77
lines changed

‎packages/frontendmu-nuxt/components/cards/EventCard.vue

Lines changed: 14 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div :class="[
3-
event?.album ? 'col-span-1' : 'md:col-span-1 col-span-2',
3+
event?.album ? 'col-span-2 md:col-span-1' : 'md:col-span-1 col-span-2',
44
isNextMeetup ? 'border-green-600 dark:border-green-500' : 'border-verse-50 dark:border-white/10 ',
55
'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',
66
]">
@@ -11,7 +11,8 @@
1111
<CardAlbum :currentAlbum="currentAlbum" :source="photoAlbumSource" />
1212
</div>
1313

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

1617
<NuxtLink class="absolute inset-0 z-10" :href="`/meetup/${event.id}`">
1718
<span class="sr-only">View details for {{ event?.title }}</span>
@@ -28,7 +29,7 @@
2829

2930
<!-- Title -->
3031
<h3
31-
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-verse-100 group-hover[.in-card]:text-verse-500">
32+
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500">
3233
<div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
3334
{{ event?.title }}
3435
</div>
@@ -62,35 +63,18 @@
6263
</template>
6364

6465
<div class="flex justify-between items-end">
65-
<div class="flex">
66-
<template v-for="speaker in allSpeakersForEvent(event)">
67-
<div
68-
class="group-hover/event:-ml-1 transition-all duration-200 -ml-4 flex first:ml-0 group-hover/event:first:ml-0">
69-
<Avatar size="base">
70-
<AvatarImage :src="`https://github.com/${speaker?.github_account}.png`"
71-
:alt="speaker?.github_account" />
72-
<AvatarFallback>CN</AvatarFallback>
73-
</Avatar>
66+
<SpeakerList :event="event" />
67+
68+
<template v-if="event.Attendees">
69+
<div class="flex items-center border-gray-100 bg-white/70 dark:bg-verse-950/60 rounded-full px-2"
70+
title="Attendees">
71+
<Icon name="carbon:group" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
72+
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
73+
{{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
7474
</div>
75-
</template>
76-
</div>
77-
78-
79-
<div class="flex gap-4 border-gray-100 bg-white/70 rounded-full px-2">
80-
<template v-if="event.Attendees">
81-
<div class="flex items-center" title="Attendees">
82-
<Icon name="carbon:group" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
83-
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
84-
{{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
85-
</div>
86-
</div>
87-
</template>
88-
</div>
75+
</div>
76+
</template>
8977
</div>
90-
91-
92-
93-
9478
</div>
9579

9680
</div>
@@ -100,51 +84,12 @@
10084
<script setup lang="ts">
10185
import { defineProps } from 'vue';
10286
import { format } from 'date-fns';
103-
// import IconLocation from '~icons/carbon/location';
104-
// import IconCalendar from '~icons/carbon/calendar';
105-
// import IconGroup from '~icons/solar/users-group-rounded-bold';
10687
import photosResponse from '../../../frontendmu-astro/src/data/photos-raw.json';
10788
import CardAlbum from './CardAlbum.vue';
108-
// import { vTransitionName } from '@utils/helpers';
10989
11090
const appConfig = useAppConfig();
11191
const photoAlbumSource = appConfig.photoAlbumSource
112-
interface Meetup {
113-
id: string;
114-
accepting_rsvp: boolean;
115-
title: string;
116-
Date: string;
117-
Attendees: number;
118-
Venue: string;
119-
description: string;
120-
Location: string;
121-
Time: string;
122-
images?: [];
123-
gallery?: [];
124-
album?: string;
125-
sessions: Session[];
126-
}
12792
128-
interface Session {
129-
id: number;
130-
Events_id: Event;
131-
Session_id?: SessionDetail;
132-
}
133-
134-
interface SessionDetail {
135-
title: string;
136-
speakers: Speaker;
137-
}
138-
139-
interface Speaker {
140-
name: string;
141-
id: string;
142-
github_account: string;
143-
}
144-
145-
interface Speaker {
146-
147-
}
14893
14994
interface Props {
15095
event: Meetup;

‎packages/frontendmu-nuxt/components/speaker/List.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
3+
interface Props {
4+
event: Meetup;
5+
}
6+
7+
const { event } = defineProps<Props>();
8+
9+
function allSpeakersForEvent(event: Meetup) {
10+
return event.sessions.map((session) => session.Session_id?.speakers);
11+
}
12+
13+
function getInitialsFromName(name: string) {
14+
return name
15+
.split(' ')
16+
.map((n) => n[0])
17+
.join('');
18+
}
19+
20+
</script>
21+
22+
<template>
23+
<div class="flex">
24+
<template v-for="speaker in allSpeakersForEvent(event)">
25+
<div
26+
class="group-hover/event:-ml-1 transition-all duration-200 -ml-4 flex first:ml-0 group-hover/event:first:ml-0">
27+
<Avatar size="base">
28+
<AvatarImage :src="`https://github.com/${speaker?.github_account}.png`"
29+
:alt="speaker?.github_account" />
30+
<AvatarFallback>{{ getInitialsFromName(speaker.name) }}</AvatarFallback>
31+
</Avatar>
32+
</div>
33+
</template>
34+
</div>
35+
</template>

‎packages/frontendmu-nuxt/pages/meetups.vue

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
<script setup lang="ts">
2-
import ContentBlock from '~/components/misc/ContentBlock.vue';
3-
import EventCard from '~/components/cards/EventCard.vue';
4-
52
// group response by year and sort by reverse date
63
74
const { allMeetups, meetupsGroupedByYear, nextMeetup } = useMeetups()
@@ -12,7 +9,7 @@ const nextMeetupId = nextMeetup.value.id;
129

1310
<template>
1411
<div>
15-
<ContentBlock>
12+
<MiscContentBlock>
1613
<div class="past-events-container pb-4 md:pb-16">
1714
<div class="flex flex-col gap-2">
1815
<BaseHeading :level="1">All meetups</BaseHeading>
@@ -32,12 +29,42 @@ const nextMeetupId = nextMeetup.value.id;
3229
{{ year }}
3330
</div>
3431
<div class="grid grid-cols-2 gap-8 relative z-10">
35-
<EventCard v-for="event in meetupsGroupedByYear[year]" :key="event.id" :event="event"
36-
:isNextMeetup="event.id === nextMeetupId" />
32+
<CardsEventCard v-for="event in meetupsGroupedByYear[year]" :key="event.id" :event="event"
33+
:isNextMeetup="event.id === nextMeetupId" class="card-entrance" />
3734
</div>
3835
</div>
3936
</template>
4037
</div>
41-
</ContentBlock>
38+
</MiscContentBlock>
4239
</div>
4340
</template>
41+
42+
<style scoped>
43+
@keyframes list-item-scroll-effect {
44+
0% {
45+
opacity: 0;
46+
transform: scale(0.95);
47+
}
48+
49+
20%,
50+
80% {
51+
opacity: 1;
52+
transform: scale(1);
53+
}
54+
55+
100% {
56+
opacity: 0;
57+
transform: scale(0.95);
58+
}
59+
}
60+
61+
.card-entrance {
62+
view-timeline-name: --list-item-timeline;
63+
animation-timeline: --list-item-timeline;
64+
animation-range-start: entry 20%;
65+
animation-range-end: cover 95%;
66+
animation-fill-mode: both;
67+
animation-name: list-item-scroll-effect;
68+
transform-origin: center center;
69+
}
70+
</style>

‎packages/frontendmu-nuxt/utils/types.ts

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export type DirectusEvent = {
7979
export interface Session {
8080
id: number
8181
Events_id: EventsId
82-
Session_id: SessionId
82+
Session_id: SessionDetail
8383
}
8484

8585
export interface EventsId {
@@ -224,4 +224,31 @@ export type RSVPResponse = {
224224
export type MeetupPhotos = string[]
225225
export interface MeetupAlbums {
226226
[key: string]: MeetupPhotos;
227+
}
228+
229+
export interface Meetup {
230+
id: string;
231+
accepting_rsvp: boolean;
232+
title: string;
233+
Date: string;
234+
Attendees: number;
235+
Venue: string;
236+
description: string;
237+
Location: string;
238+
Time: string;
239+
images?: [];
240+
gallery?: [];
241+
album?: string;
242+
sessions: Session[];
243+
}
244+
245+
export interface SessionDetail {
246+
title: string;
247+
speakers: Speaker;
248+
}
249+
250+
export interface Speaker {
251+
name: string;
252+
id: string;
253+
github_account: string;
227254
}

0 commit comments

Comments
 (0)