Merge pull request #92 from ecss-soton/header-darkmode-fix

added popup for the events page

src/app/_components/CollectionArchive/index.tsx

@@ -16,6 +16,7 @@ import { Card } from '../Card'
 import { CommitteeItem } from '../CommitteeItem'
 import { CommitteePopUp } from '../CommitteePopUp'
 import { EventItem } from '../EventItem'
+import { EventPopUp } from '../EventPopUp'
 import { Gutter } from '../Gutter'
 import { PageRange } from '../PageRange'
 import { Pagination } from '../Pagination'
@@ -93,6 +94,10 @@ export const CollectionArchive: React.FC<Props> = props => {
     setIsPopUpVisible(newCommittee)
   }
 
+  const EventClick = (newEvent: Event) => {
+    setIsPopUpVisible(newEvent)
+  }
+
   const categories = (catsFromProps || [])
     .map(cat => (typeof cat === 'object' ? cat.id : cat))
     .join(',')
@@ -274,7 +279,7 @@ export const CollectionArchive: React.FC<Props> = props => {
                       <CommitteeItem committee={result} onCommitteeClick={CommitteeClick} />
                     )}
                     {relationTo === 'events' && 'name' in result && 'date' in result && (
-                      <EventItem event={result} />
+                      <EventItem event={result} onEventClick={EventClick} />
                     )}
                   </div>
                 )
@@ -293,7 +298,7 @@ export const CollectionArchive: React.FC<Props> = props => {
           )}
         </Gutter>
       </Fragment>
-      {isPopUpVisible && (
+      {isPopUpVisible && 'position' in isPopUpVisible && (
         <CommitteePopUp
           name={isPopUpVisible.firstName + ' ' + isPopUpVisible.lastName}
           role={isPopUpVisible.position}
@@ -303,6 +308,15 @@ export const CollectionArchive: React.FC<Props> = props => {
           onCommitteeClick={CommitteeClick}
         />
       )}
+      {isPopUpVisible && 'date' in isPopUpVisible && (
+        <EventPopUp
+          name={isPopUpVisible.name}
+          date={isPopUpVisible.date}
+          description={isPopUpVisible.description}
+          location={isPopUpVisible.location}
+          onEventClick={EventClick}
+        />
+      )}
     </div>
   )
 }

src/app/_components/EventItem/index.tsx

@@ -13,10 +13,17 @@ const inter = Inter({
 
 export const EventItem: React.FC<{
   event?: Event
-}> = props => {
-  const {
-    event: { name, date, description: desc },
-  } = props
+  onEventClick: (event: Event | null) => void
+}> = ({ event, onEventClick }) => {
+  const { name, date, description } = event || {}
+
+  const handleClick = () => {
+    onEventClick(event)
+  }
+
+  const handleClose = () => {
+    onEventClick(null)
+  }
 
   const getMonthName = (monthNumber: number): string => {
     const monthNames = [
@@ -36,12 +43,21 @@ export const EventItem: React.FC<{
     return monthNames[monthNumber - 1]
   }
 
+  const truncateDescription = (description: string, maxLength: number) => {
+    if (description.length > maxLength) {
+      return description.substring(0, maxLength) + '...'
+    }
+    return description
+  }
+
   const dateParts = date.split('-')
   const year = dateParts[0]
   const month = parseInt(dateParts[1], 10)
   const day = dateParts[2].split('T')[0]
   const monthName = getMonthName(month)
 
+  const truncatedDesc = truncateDescription(description, 150)
+
   // const { slug, title, categories, meta } = doc || {}
   // const { description, image: metaImage } = meta || {}
 
@@ -51,14 +67,14 @@ export const EventItem: React.FC<{
   // const href = `/${relationTo}/${slug}`
 
   return (
-    <div className={[classes.rectangle, inter.className].join(' ')}>
+    <div className={[classes.rectangle, inter.className].join(' ')} onClick={handleClick}>
       <div className={classes.when}>
         <div className={classes.date}>{day}</div>
         <div className={classes.month}>{monthName}</div>
       </div>
       <div className={classes.what}>
         <div className={classes.name}>{name}</div>
-        <p className={classes.desc}>{desc}</p>
+        <p className={classes.desc}>{truncatedDesc}</p>
       </div>
     </div>
   )

src/app/_components/EventPopUp/index.module.scss

@@ -0,0 +1,158 @@
+@import '../../_css/common';
+
+.close {
+    width: 32px;
+    height: 32px;
+    opacity: 0.3;
+    position: absolute;
+    top: 6%;
+    right: 1%;
+    // padding-top: 50px;
+}
+
+.close:hover {
+    opacity: 1;
+}
+
+.close:before, .close:after {
+    position: absolute;
+    content: ' ';
+    height: 33px;
+    width: 2px;
+    background-color: var(--theme-elevation-1000);
+}
+
+.close:before {
+    transform: rotate(45deg);
+}
+
+.close:after {
+    transform: rotate(-45deg);
+}
+
+.background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1; 
+}
+
+.rectangle {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--theme-bg);
+    padding: 20px;
+    box-shadow: 0 4px 10px -2px var(--theme-shadow);
+    z-index: 2; 
+    width: 50%;
+    // height: 50%;
+    padding: 20px;
+    padding-bottom: 50px;
+    min-width: 330px;
+    border-radius: 37px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    @include large-break {
+        width: 70%;
+    }
+
+    @include small-break {
+        width: 80%;
+    }
+}
+
+.info {
+    display: flex;
+    flex-direction: row;
+    flex: 30%;
+}
+
+.bits {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+}
+
+.name {
+    color: var(--theme-elevation-1000);
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: normal;
+
+    @include small-break {
+        font-size: 6vw;
+    }
+}
+
+.role {
+    color: var(--theme-elevation-600);
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin: 0;
+    padding-top: 10px;
+
+    @include small-break{
+        font-size: 4vw;
+    }
+}
+
+.bio {
+    flex: 70%;
+    padding-top: 30px;
+    padding-left: 5%;
+    padding-right: 5%;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+}
+
+.when {
+    text-align: center;
+    padding-left: 10%;
+    padding-right: 10%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include extra-small-break {
+        width: 100%;
+      }
+  }
+
+  .date {
+    color: var(--theme-elevation-1000);
+    font-size: 60px;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: normal;
+
+    // @include extra-small-break {
+    //     font-size: 18vw;
+    //   }
+  }
+
+  .month {
+    color: var(--theme-elevation-400);
+    font-size: 30px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: normal;
+    width: 100%;
+
+    // @include extra-small-break {
+    //     font-size: 7vw;
+    //   }
+  }
+
+
+

src/app/_components/EventPopUp/index.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import React from 'react'
+import { Inter } from '@next/font/google'
+import Link from 'next/link'
+
+import { Event } from '../../../payload/payload-types'
+import RichText from '../RichText'
+
+import classes from './index.module.scss'
+
+const inter = Inter({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  style: ['normal'],
+})
+
+interface PopUpProps {
+  name: string
+  date: string
+  location: string | null
+  description: string | null
+  onEventClick: (event: Event | null) => void
+}
+
+export const EventPopUp: React.FC<PopUpProps> = ({
+  name,
+  date,
+  location,
+  description,
+  onEventClick,
+}) => {
+  const closeClick = () => {
+    onEventClick(null)
+  }
+
+  const getMonthName = (monthNumber: number): string => {
+    const monthNames = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ]
+    return monthNames[monthNumber - 1]
+  }
+
+  const dateParts = date.split('-')
+  const year = dateParts[0]
+  const month = parseInt(dateParts[1], 10)
+  const day = dateParts[2].split('T')[0]
+  const monthName = getMonthName(month)
+
+  return (
+    <>
+      <div className={[classes.background, inter.className].join(' ')} onClick={closeClick} />
+      <div className={classes.rectangle}>
+        <Link onClick={closeClick} className={classes.close} href={''}></Link>
+        <div className={classes.info}>
+          <div className={classes.when}>
+            <div className={classes.date}>{day}</div>
+            <div className={classes.month}>{monthName}</div>
+          </div>
+          <div className={classes.bits}>
+            <span className={classes.name}>{name}</span>
+            <span className={classes.role}>{location}</span>
+          </div>
+        </div>
+        {description && <p className={classes.bio}>{description}</p>}
+      </div>
+    </>
+  )
+}

src/payload/collections/Events.ts

@@ -48,7 +48,6 @@ const Events: CollectionConfig = {
       name: 'description',
       label: 'Description',
       type: 'text',
-      maxLength: 150,
     },
   ],
 }