Skip to content

Commit b7ac4d6

Browse files
authored
Merge pull request #140 from Front-End-Coders-Mauritius/feat/nuxt-main-menu
ui improvements
2 parents c33a555 + 1663f17 commit b7ac4d6

File tree

24 files changed

+990
-509
lines changed

24 files changed

+990
-509
lines changed

packages/frontendmu-data/data/meetups-raw.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

packages/frontendmu-data/data/speakers-raw.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--background: 0 0% 100%;
7+
--foreground: 222.2 84% 4.9%;
8+
9+
--muted: 210 40% 96.1%;
10+
--muted-foreground: 215.4 16.3% 46.9%;
11+
12+
--popover: 0 0% 100%;
13+
--popover-foreground: 222.2 84% 4.9%;
14+
15+
--card: 0 0% 100%;
16+
--card-foreground: 222.2 84% 4.9%;
17+
18+
--border: 214.3 31.8% 91.4%;
19+
--input: 214.3 31.8% 91.4%;
20+
21+
--primary: 222.2 47.4% 11.2%;
22+
--primary-foreground: 210 40% 98%;
23+
24+
--secondary: 210 40% 96.1%;
25+
--secondary-foreground: 222.2 47.4% 11.2%;
26+
27+
--accent: 210 40% 96.1%;
28+
--accent-foreground: 222.2 47.4% 11.2%;
29+
30+
--destructive: 0 84.2% 60.2%;
31+
--destructive-foreground: 210 40% 98%;
32+
33+
--ring: 222.2 84% 4.9%;
34+
35+
--radius: 0.5rem;
36+
}
37+
38+
html.dark-mode {
39+
--background: 222.2 84% 4.9%;
40+
--foreground: 210 40% 98%;
41+
42+
--muted: 217.2 32.6% 17.5%;
43+
--muted-foreground: 215 20.2% 65.1%;
44+
45+
--popover: 222.2 84% 4.9%;
46+
--popover-foreground: 210 40% 98%;
47+
48+
--card: 222.2 84% 4.9%;
49+
--card-foreground: 210 40% 98%;
50+
51+
--border: 217.2 32.6% 17.5%;
52+
--input: 217.2 32.6% 17.5%;
53+
54+
--primary: 210 40% 98%;
55+
--primary-foreground: 222.2 47.4% 11.2%;
56+
57+
--secondary: 217.2 32.6% 17.5%;
58+
--secondary-foreground: 210 40% 98%;
59+
60+
--accent: 217.2 32.6% 17.5%;
61+
--accent-foreground: 210 40% 98%;
62+
63+
--destructive: 0 62.8% 30.6%;
64+
--destructive-foreground: 210 40% 98%;
65+
66+
--ring: 212.7 26.8% 83.9%;
67+
}
68+
69+
@layer base {
70+
* {
71+
@apply border-border;
72+
}
73+
74+
body {
75+
@apply bg-background text-foreground;
76+
}
77+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://shadcn-vue.com/schema.json",
3+
"style": "default",
4+
"typescript": true,
5+
"tsConfigPath": ".nuxt/tsconfig.json",
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "styles/tailwind.css",
9+
"baseColor": "slate",
10+
"cssVariables": true
11+
},
12+
"framework": "nuxt",
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

packages/frontendmu-nuxt/components/auth/LoggedUser.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@ onMounted(() => {
1717
<template>
1818
<div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
1919

20-
<BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-bold" @click="setUrl()">
20+
<BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium hidden md:block"
21+
@click="setUrl()">
22+
Log In
23+
</BaseButton>
24+
<BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium block md:hidden" size="sm"
25+
@click="setUrl()">
2126
Log In
2227
</BaseButton>
2328
<div v-else class="flex gap-2 items-center">

packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ onMounted(async () => {
7070
class="bg-verse-200 aspect-square z-2 rounded-full inline-grid place-items-center text-verse-800 p-4 md:p-1 text-6xl md:text-xl shadow-sm shadow-black/40 relative z-3">{{
7171
attendeeCount }}</span>
7272
<span
73-
class="z-2 md:group-hover:opacity-100 md:group-hover:translate-x-0 md:opacity-0 duration-[250ms] rounded-md md:rounded-r-full md:pl-5 ease-in-out md:-translate-x-8 relative transition text-sm text-verse-900 bg-verse-200/60 px-2 pl-4 text-center md:text-left md:-left-8 py-1">
73+
class="z-2 md:group-hover:opacity-100 md:group-hover:translate-x-0 md:opacity-0 rounded-md md:rounded-r-full md:pl-5 ease-in-out md:-translate-x-8 relative transition text-sm text-verse-900 bg-verse-200/60 px-2 pl-4 text-center md:text-left md:-left-8 py-1">
7474
RSVPs so far
7575
</span>
7676
</h2>

packages/frontendmu-nuxt/components/cards/CardAlbum.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<template>
2-
<div class="grid grid-cols-4 items-center" v-if="currentAlbum">
3-
<img v-for="photo in currentAlbum" :key="photo" :src="`${source}/${photo}`"
4-
class="aspect-square object-cover object-center block" loading="lazy" />
2+
<div class="grid grid-cols-3 items-center h-full" v-if="currentAlbum">
3+
<img v-for="photo in currentAlbum" :key="photo" :src="`${source}/${photo}`" class="object-cover w-full h-full block"
4+
loading="lazy" />
55
</div>
66
</template>
77

88
<script setup lang="ts">
99
import type { MeetupPhotos } from '#build/utils/types';
1010
import { defineProps } from 'vue';
11-
const props = defineProps<{
11+
12+
defineProps<{
1213
currentAlbum: MeetupPhotos[] | undefined;
1314
source: string;
1415
}>();

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

Lines changed: 58 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,58 @@
11
<template>
22
<div :class="[
3-
event?.album ? 'col-span-2' : '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 ',
5-
'group 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',
6-
]" :title="hasAlbum() ? 'has album' : 'no album'">
5+
'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',
6+
]">
77
<div
8-
class="relative flex flex-col md:flex-row justify-between w-full transition-all duration-300 group-hover[.in-card]:shadow-lg group-hover[.in-card]:border-verse-400">
8+
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">
9+
10+
<div class="absolute inset-0 z-0 ">
11+
<CardAlbum :currentAlbum="currentAlbum" :source="photoAlbumSource" />
12+
</div>
13+
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" />
16+
917
<NuxtLink class="absolute inset-0 z-10" :href="`/meetup/${event.id}`">
1018
<span class="sr-only">View details for {{ event?.title }}</span>
1119
</NuxtLink>
12-
<div class="relative flex flex-col p-4 w-full">
13-
<!-- Date -->
20+
21+
<div class="relative z-5 flex flex-col p-4 w-full justify-between gap-4">
22+
1423
<template v-if="event.Date">
1524
<div :class="[
1625
!isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
17-
'flex font-mono text-sm font-medium items-center gap-2 w-full justify-between',
26+
'flex flex-col font-mono text-sm font-medium gap-2 w-full justify-between',
1827
]">
19-
<div>
2028

21-
<Icon name="carbon:calendar" class="mr-2 h-6 w-6" />
22-
<span>{{ formatDate(new Date(event.Date), 'dd MMM yyyy') }}</span>
29+
30+
<!-- Title -->
31+
<h3
32+
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500">
33+
<div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
34+
{{ event?.title }}
35+
</div>
36+
</h3>
37+
38+
<div class="flex items-center gap-2">
39+
40+
<!-- Date -->
41+
<div>
42+
<Icon name="carbon:calendar" class="mr-2 h-4 w-4" />
43+
<span>{{ formatDate(new Date(event.Date), 'dd MMM yyyy') }}</span>
44+
</div>
45+
46+
<div v-if="event.Venue"
47+
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium leading-3 md:leading-5 ">
48+
<Icon name="carbon:location" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
49+
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
50+
{{ event.Venue }}
51+
</div>
52+
</div>
53+
54+
55+
2356
</div>
2457
<template v-if="isNextMeetup">
2558
<span class="bg-green-700 text-sm font-mono justify-end text-white px-3 rounded-md font-bold">
@@ -29,77 +62,34 @@
2962
</div>
3063
</template>
3164

32-
<!-- Title -->
33-
<h3
34-
class="leading-2 text-2xl font-semibold flex-1 py-2 text-verse-500 dark:text-verse-100 group-hover[.in-card]:text-verse-500">
35-
<div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
36-
<!-- :style="vTransitionName('session-title', event.id)" -->
37-
<span class="absolute inset-0" aria-hidden="true"></span>
38-
{{ event?.title }}
39-
</div>
40-
</h3>
41-
42-
<div class="flex gap-4 pr-4 border-gray-100">
43-
<template v-if="event.Venue">
44-
<div
45-
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium leading-3 md:leading-5 text-verse-600 dark:text-verse-200">
46-
<Icon name="carbon:location"
47-
class="mr-1.5 h-[15px] w-[15px] flex-shrink-0 truncate text-verse-600 dark:text-verse-200"
48-
aria-hidden="true" />
65+
<div class="flex justify-between items-end">
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" />
4972
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
50-
{{ event.Venue }}
73+
{{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
5174
</div>
5275
</div>
5376
</template>
54-
55-
<div
56-
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium leading-3 md:leading-5 text-verse-600 dark:text-verse-200">
57-
<template v-if="event.Attendees">
58-
<div class="flex items-center" title="Attendees">
59-
<Icon name="solar:users-group-rounded-bold"
60-
class="mr-1.5 h-[15px] w-[15px] flex-shrink-0 truncate text-verse-600 dark:text-verse-200"
61-
aria-hidden="true" />
62-
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
63-
{{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
64-
</div>
65-
</div>
66-
</template>
67-
</div>
6877
</div>
6978
</div>
70-
<div class="max-w-screen-sm">
71-
<CardAlbum :currentAlbum="currentAlbum" :source="photoAlbumSource" />
72-
</div>
79+
7380
</div>
7481
</div>
7582
</template>
7683

7784
<script setup lang="ts">
7885
import { defineProps } from 'vue';
7986
import { format } from 'date-fns';
80-
// import IconLocation from '~icons/carbon/location';
81-
// import IconCalendar from '~icons/carbon/calendar';
82-
// import IconGroup from '~icons/solar/users-group-rounded-bold';
8387
import photosResponse from '../../../frontendmu-astro/src/data/photos-raw.json';
8488
import CardAlbum from './CardAlbum.vue';
85-
// import { vTransitionName } from '@utils/helpers';
8689
8790
const appConfig = useAppConfig();
8891
const photoAlbumSource = appConfig.photoAlbumSource
89-
interface Meetup {
90-
id: string;
91-
accepting_rsvp: boolean;
92-
title: string;
93-
Date: string;
94-
Attendees: number;
95-
Venue: string;
96-
description: string;
97-
Location: string;
98-
Time: string;
99-
images?: [];
100-
gallery?: [];
101-
album?: string;
102-
}
92+
10393
10494
interface Props {
10595
event: Meetup;
@@ -128,11 +118,15 @@ function fetchAlbumDetails() {
128118
const filteredPhotos = albumPhotosParsed.filter((photo) => {
129119
return !photo.endsWith('.mp4');
130120
});
131-
return filteredPhotos.slice(0, 4);
121+
return filteredPhotos.slice(0, 3);
132122
}
133123
}
134124
}
135125
126+
function allSpeakersForEvent(event: Meetup) {
127+
return event.sessions.map((session) => session.Session_id?.speakers);
128+
}
129+
136130
let currentAlbum = fetchAlbumDetails();
137131
138132
function formatDate(date: Date, formatString: string) {

0 commit comments

Comments
 (0)