Skip to content

Commit 156ab40

Browse files
MrSunshyneMrSunshyne
authored
Merge pull request #159 from Front-End-Coders-Mauritius/ui-fixes-01
Lots of ui fixes
2 parents 33ef8c3 + 50e1cef commit 156ab40

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1033
-328
lines changed

‎packages/frontendmu-data/data/people.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,22 @@ export const people = [
1212
id: "5c852db3-4844-4f6d-b6fe-c135963441fb",
1313
},
1414
{
15-
name: "Michaël Jules",
15+
name: "Cedric Poilly",
1616
role: "Active Community Member",
17-
imageUrl: "https://github.com/mgjules.png",
18-
id: "d746a55d-bd48-495a-a7af-de65cf067a6c",
17+
imageUrl: "https://github.com/cedpoilly.png",
18+
id: "549be7b0-1e7d-4deb-9fb3-273cfe0da5b0",
19+
},
20+
{
21+
name: "Dereck Lam Hon Wah",
22+
role: "Active Community Member",
23+
imageUrl: "https://github.com/derecklhw.png",
24+
id: "1b0b22bd-0d92-4328-8d62-0f8468485e5e",
25+
},
26+
{
27+
name: "Noor Joomun",
28+
role: "Active Community Member",
29+
imageUrl: "https://github.com/joomun.png",
30+
id: "",
1931
},
2032
{
2133
name: "Mahima Ramgolam",
@@ -30,21 +42,9 @@ export const people = [
3042
id: "78966047-4716-4afc-856e-46f1430974ed",
3143
},
3244
{
33-
name: "Cedric Poilly",
45+
name: "Michaël Jules",
3446
role: "Active Community Member",
35-
imageUrl: "https://github.com/cedpoilly.png",
36-
id: "549be7b0-1e7d-4deb-9fb3-273cfe0da5b0",
37-
},
38-
{
39-
name: "Noor Joomun",
40-
role: "Collaborator",
41-
imageUrl: "https://github.com/joomun.png",
42-
id: "",
43-
},
44-
{
45-
name: "Dereck Lam Hon Wah",
46-
role: "Collaborator",
47-
imageUrl: "https://github.com/derecklhw.png",
48-
id: "",
47+
imageUrl: "https://github.com/mgjules.png",
48+
id: "d746a55d-bd48-495a-a7af-de65cf067a6c",
4949
},
5050
];

‎packages/frontendmu-nuxt/app.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default defineAppConfig({
22
photoAlbumSource:
3-
"https://raw.githubusercontent.com/Front-End-Coders-Mauritius/google-photos-sync/main/"
3+
"https://raw.githubusercontent.com/Front-End-Coders-Mauritius/google-photos-sync/main/",
4+
description: 'A community around front-end development based in Mauritius. We also organise monthly meetups free for anyone interested to attend.',
45
})

‎packages/frontendmu-nuxt/assets/css/tailwind.css

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,77 @@
11
@tailwind base;
22
@tailwind components;
33
@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%;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 84% 4.9%;
9+
10+
--muted: 210 40% 96.1%;
11+
--muted-foreground: 215.4 16.3% 46.9%;
12+
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 222.2 84% 4.9%;
15+
16+
--card: 0 0% 100%;
17+
--card-foreground: 222.2 84% 4.9%;
18+
19+
--border: 214.3 31.8% 91.4%;
20+
--input: 214.3 31.8% 91.4%;
21+
22+
--primary: 222.2 47.4% 11.2%;
23+
--primary-foreground: 210 40% 98%;
24+
25+
--secondary: 210 40% 96.1%;
26+
--secondary-foreground: 222.2 47.4% 11.2%;
27+
28+
--accent: 210 40% 96.1%;
29+
--accent-foreground: 222.2 47.4% 11.2%;
30+
31+
--destructive: 0 84.2% 60.2%;
32+
--destructive-foreground: 210 40% 98%;
33+
34+
--ring: 222.2 84% 4.9%;
35+
36+
--radius: 0.5rem;
37+
}
38+
39+
.dark {
40+
--background: 222.2 84% 4.9%;
41+
--foreground: 210 40% 98%;
42+
43+
--muted: 217.2 32.6% 17.5%;
44+
--muted-foreground: 215 20.2% 65.1%;
45+
46+
--popover: 222.2 84% 4.9%;
47+
--popover-foreground: 210 40% 98%;
48+
49+
--card: 222.2 84% 4.9%;
50+
--card-foreground: 210 40% 98%;
51+
52+
--border: 217.2 32.6% 17.5%;
53+
--input: 217.2 32.6% 17.5%;
54+
55+
--primary: 210 40% 98%;
56+
--primary-foreground: 222.2 47.4% 11.2%;
57+
58+
--secondary: 217.2 32.6% 17.5%;
59+
--secondary-foreground: 210 40% 98%;
60+
61+
--accent: 217.2 32.6% 17.5%;
62+
--accent-foreground: 210 40% 98%;
63+
64+
--destructive: 0 62.8% 30.6%;
65+
--destructive-foreground: 210 40% 98%;
66+
67+
--ring: 212.7 26.8% 83.9%;
68+
}
6769
}
68-
70+
6971
@layer base {
7072
* {
7173
@apply border-border;
7274
}
73-
7475
body {
7576
@apply bg-background text-foreground;
7677
}

‎packages/frontendmu-nuxt/components.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"$schema": "https://shadcn-vue.com/schema.json",
33
"style": "default",
44
"typescript": true,
5-
"tsConfigPath": ".nuxt/tsconfig.json",
5+
"tsConfigPath": "./tsconfig.json",
66
"tailwind": {
77
"config": "tailwind.config.js",
88
"css": "styles/tailwind.css",

‎packages/frontendmu-nuxt/components/LayoutBackdrop.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import BackgroundShapes from './misc/BackgroundShapes.vue';
44
</script>
55

66
<template>
7-
<div class="bg-verse-100 dark:bg-verse-950 relative min-h-[100dvh]">
7+
<div
8+
class="from-verse-100 to-white bg-fixed dark:from-verse-900 dark:to-verse-950 bg-gradient-to-tl relative min-h-[100dvh]">
89
<div class="relative z-0">
910
<BackgroundShapes />
1011
</div>

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="grid md:grid-cols-3 gap-8 border border-verse-900 dark:border-verse-400 rounded-lg p-8">
3+
<div v-if="asset" class="flex flex-col col-span-1 gap-4 justify-center">
4+
<h3 class="font-bold text-xl md:text-3xl">{{ asset.name }}</h3>
5+
<p v-if="asset.description">{{ asset.description }}</p>
6+
7+
<div class="flex justify-start items-center text-sm uppercase gap-4">
8+
<span>Download</span>
9+
<a v-for="version in asset.versions" :key="version" :href="getAssetPath(version)"
10+
class="border px-4 py-1 cursor-pointer hover:bg-gray-100 rounded-md flex items-center gap-2" download>
11+
<Icon name="carbon:download" />
12+
<span>
13+
{{ version }}
14+
</span>
15+
</a>
16+
</div>
17+
</div>
18+
<div class="col-span-2 flex justify-center">
19+
<img class="max-h-64 w-full" :src="defaultPath">
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts">
25+
import type { BrandingAsset } from '@/utils/types';
26+
27+
const props = defineProps<{
28+
asset: BrandingAsset;
29+
}>()
30+
31+
const defaultPath = computed(() => {
32+
if (props.asset) {
33+
return '/brand/' + props.asset.filename + '.' + props.asset.versions[0];
34+
}
35+
return '';
36+
});
37+
38+
const getAssetPath = (version: string) => {
39+
if (props.asset) {
40+
return '/brand/' + props.asset.filename + '.' + version;
41+
}
42+
return '';
43+
};
44+
</script>

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
<template>
22
<div v-if="currentAlbum" class="grid grid-cols-3 items-center h-full">
3-
<img
4-
v-for="photo in currentAlbum" :key="photo" :src="`${source}/${photo}`" class="object-cover w-full h-full block"
5-
loading="lazy" >
3+
<NuxtImg v-for="photo in currentAlbum" :key="photo" :src="`${source}/${photo}`" alt="Album Photo" width="100"
4+
height="auto" class="object-cover w-full h-full block" loading="lazy" />
65
</div>
76
</template>
87

98
<script setup lang="ts">
10-
import { defineProps } from 'vue';
11-
129
defineProps<{
1310
currentAlbum: string[] | undefined;
1411
source: string;

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

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
2-
<div
3-
:class="[
2+
<div :class="[
43
event?.album ? 'col-span-2 md:col-span-1' : 'md:col-span-1 col-span-2',
54
isNextMeetup ? 'border-green-600 dark:border-green-500' : 'border-verse-50 dark:border-white/10 ',
65
'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',
@@ -22,20 +21,27 @@
2221
<div class="relative z-5 flex flex-col p-4 w-full justify-between gap-4">
2322

2423
<template v-if="event.Date">
25-
<div
26-
:class="[
24+
<div :class="[
2725
isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
2826
'flex flex-col font-mono text-sm font-medium gap-2 w-full justify-between',
2927
]">
3028

3129

3230
<!-- Title -->
33-
<h3
34-
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500">
35-
<div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
36-
{{ event?.title }}
37-
</div>
38-
</h3>
31+
<div class="flex items-center justify-between">
32+
<h3
33+
class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500">
34+
<div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
35+
{{ event?.title }}
36+
</div>
37+
</h3>
38+
39+
<template v-if="isNextMeetup">
40+
<span class="bg-green-700 text-sm font-mono justify-end text-white px-3 rounded-md font-bold">
41+
NEXT MEETUP
42+
</span>
43+
</template>
44+
</div>
3945

4046
<div class="flex items-center gap-2">
4147

@@ -45,8 +51,7 @@
4551
<span>{{ formatDate(new Date(event.Date), 'dd MMM yyyy') }}</span>
4652
</div>
4753

48-
<div
49-
v-if="event.Venue"
54+
<div v-if="event.Venue"
5055
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium leading-3 md:leading-5 ">
5156
<Icon name="carbon:location" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
5257
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
@@ -57,20 +62,14 @@ v-if="event.Venue"
5762

5863

5964
</div>
60-
<template v-if="isNextMeetup">
61-
<span class="bg-green-700 text-sm font-mono justify-end text-white px-3 rounded-md font-bold">
62-
NEXT MEETUP
63-
</span>
64-
</template>
6565
</div>
6666
</template>
6767

6868
<div class="flex justify-between items-end">
6969
<SpeakerList :event="event" />
7070

7171
<template v-if="event.Attendees">
72-
<div
73-
class="flex items-center border-gray-100 bg-white/70 dark:bg-verse-950/60 rounded-full px-2"
72+
<div class="flex items-center border-gray-100 bg-white/70 dark:bg-verse-950/60 rounded-full px-2"
7473
title="Attendees">
7574
<Icon name="carbon:group" class="mr-1.5 h-4 w-4 flex-shrink-0 truncate " aria-hidden="true" />
7675
<div class="pt-[2px] line-clamp-1 md:line-clamp-0">
@@ -92,7 +91,7 @@ import photosResponse from "../../../frontendmu-data/data/photos-raw.json";
9291
import CardAlbum from './CardAlbum.vue';
9392
9493
const appConfig = useAppConfig();
95-
const photoAlbumSource = appConfig.photoAlbumSource
94+
const photoAlbumSource = appConfig.photoAlbumSource as string;
9695
9796
9897
interface Props {

0 commit comments

Comments
 (0)