Merge pull request #140 from Front-End-Coders-Mauritius/feat/nuxt-mai…

…n-menu ui improvements
Front-End-Coders-Mauritius · May 21, 2024 · b7ac4d6 · b7ac4d6
2 parents c33a555 + 1663f17
commit b7ac4d6
Show file tree

Hide file tree

Showing 24 changed files with 990 additions and 509 deletions.
diff --git a/packages/frontendmu-data/data/meetups-raw.json b/packages/frontendmu-data/data/meetups-raw.json
diff --git a/packages/frontendmu-data/data/speakers-raw.json b/packages/frontendmu-data/data/speakers-raw.json
diff --git a/packages/frontendmu-nuxt/assets/css/tailwind.css b/packages/frontendmu-nuxt/assets/css/tailwind.css
@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+html.dark-mode {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 212.7 26.8% 83.9%;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/frontendmu-nuxt/components.json b/packages/frontendmu-nuxt/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
@@ -17,7 +17,12 @@ onMounted(() => {
 <template>
   <div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
 
-    <BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-bold" @click="setUrl()">
+    <BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium hidden md:block"
+      @click="setUrl()">
+      Log In
+    </BaseButton>
+    <BaseButton v-if="!isLoggedIn" href="/login" :color="'primary'" class="font-medium block md:hidden" size="sm"
+      @click="setUrl()">
       Log In
     </BaseButton>
     <div v-else class="flex gap-2 items-center">

diff --git a/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue b/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
@@ -70,7 +70,7 @@ onMounted(async () => {
           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">{{
             attendeeCount }}</span>
         <span
-          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">
+          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">
           RSVPs so far
         </span>
       </h2>

diff --git a/packages/frontendmu-nuxt/components/cards/CardAlbum.vue b/packages/frontendmu-nuxt/components/cards/CardAlbum.vue
@@ -1,14 +1,15 @@
 <template>
-  <div class="grid grid-cols-4 items-center" v-if="currentAlbum">
-    <img v-for="photo in currentAlbum" :key="photo" :src="`${source}/${photo}`"
-      class="aspect-square object-cover object-center block" loading="lazy" />
+  <div class="grid grid-cols-3 items-center h-full" v-if="currentAlbum">
+    <img v-for="photo in currentAlbum" :key="photo" :src="`${source}/${photo}`" class="object-cover w-full h-full block"
+      loading="lazy" />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { MeetupPhotos } from '#build/utils/types';
 import { defineProps } from 'vue';
-const props = defineProps<{
+
+defineProps<{
   currentAlbum: MeetupPhotos[] | undefined;
   source: string;
 }>();

diff --git a/packages/frontendmu-nuxt/components/cards/EventCard.vue b/packages/frontendmu-nuxt/components/cards/EventCard.vue
@@ -1,25 +1,58 @@
 <template>
   <div :class="[
-    event?.album ? 'col-span-2' : 'md:col-span-1 col-span-2',
+    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 ',
-    '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',
-  ]" :title="hasAlbum() ? 'has album' : 'no album'">
+    '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',
+  ]">
     <div
-      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">
+      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 :currentAlbum="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}`">
         <span class="sr-only">View details for {{ event?.title }}</span>
       </NuxtLink>
-      <div class="relative flex flex-col p-4 w-full">
-        <!-- Date -->
+
+      <div class="relative z-5 flex flex-col p-4 w-full justify-between gap-4">
+
         <template v-if="event.Date">
           <div :class="[
             !isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
-            'flex font-mono text-sm font-medium items-center gap-2 w-full justify-between',
+            'flex flex-col font-mono text-sm font-medium gap-2 w-full justify-between',
           ]">
-            <div>
 
-              <Icon name="carbon:calendar" class="mr-2 h-6 w-6" />
-              <span>{{ formatDate(new Date(event.Date), 'dd MMM yyyy') }}</span>
+
+            <!-- Title -->
+            <h3
+              class="leading-2 text-2xl font-semibold text-verse-500 dark:text-white group-hover[.in-card]:text-verse-500">
+              <div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
+                {{ event?.title }}
+              </div>
+            </h3>
+
+            <div class="flex items-center gap-2">
+
+              <!-- Date -->
+              <div>
+                <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 ">
+                <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>
+              </div>
+
+
+
             </div>
             <template v-if="isNextMeetup">
               <span class="bg-green-700 text-sm font-mono justify-end text-white px-3 rounded-md font-bold">
@@ -29,77 +62,34 @@
           </div>
         </template>
 
-        <!-- Title -->
-        <h3
-          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">
-          <div class="w-[300px] md:w-96 focus:outline-none" :title="`Meetup ${event?.title}`">
-            <!-- :style="vTransitionName('session-title', event.id)" -->
-            <span class="absolute inset-0" aria-hidden="true"></span>
-            {{ event?.title }}
-          </div>
-        </h3>
-
-        <div class="flex gap-4 pr-4 border-gray-100">
-          <template v-if="event.Venue">
-            <div
-              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">
-              <Icon name="carbon:location"
-                class="mr-1.5 h-[15px] w-[15px] flex-shrink-0 truncate text-verse-600 dark:text-verse-200"
-                aria-hidden="true" />
+        <div class="flex justify-between items-end">
+          <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">
+              <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.Venue }}
+                {{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
               </div>
             </div>
           </template>
-
-          <div
-            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">
-            <template v-if="event.Attendees">
-              <div class="flex items-center" title="Attendees">
-                <Icon name="solar:users-group-rounded-bold"
-                  class="mr-1.5 h-[15px] w-[15px] flex-shrink-0 truncate text-verse-600 dark:text-verse-200"
-                  aria-hidden="true" />
-                <div class="pt-[2px] line-clamp-1 md:line-clamp-0">
-                  {{ event?.Attendees === 0 ? 'No' : event?.Attendees }}
-                </div>
-              </div>
-            </template>
-          </div>
         </div>
       </div>
-      <div class="max-w-screen-sm">
-        <CardAlbum :currentAlbum="currentAlbum" :source="photoAlbumSource" />
-      </div>
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import { format } from 'date-fns';
-// import IconLocation from '~icons/carbon/location';
-// import IconCalendar from '~icons/carbon/calendar';
-// import IconGroup from '~icons/solar/users-group-rounded-bold';
 import photosResponse from '../../../frontendmu-astro/src/data/photos-raw.json';
 import CardAlbum from './CardAlbum.vue';
-// import { vTransitionName } from '@utils/helpers';
 
 const appConfig = useAppConfig();
 const photoAlbumSource = appConfig.photoAlbumSource
-interface Meetup {
-  id: string;
-  accepting_rsvp: boolean;
-  title: string;
-  Date: string;
-  Attendees: number;
-  Venue: string;
-  description: string;
-  Location: string;
-  Time: string;
-  images?: [];
-  gallery?: [];
-  album?: string;
-}
+
 
 interface Props {
   event: Meetup;
@@ -128,11 +118,15 @@ function fetchAlbumDetails() {
       const filteredPhotos = albumPhotosParsed.filter((photo) => {
         return !photo.endsWith('.mp4');
       });
-      return filteredPhotos.slice(0, 4);
+      return filteredPhotos.slice(0, 3);
     }
   }
 }
 
+function allSpeakersForEvent(event: Meetup) {
+  return event.sessions.map((session) => session.Session_id?.speakers);
+}
+
 let currentAlbum = fetchAlbumDetails();
 
 function formatDate(date: Date, formatString: string) {