From f8654d41ec5ea2baba374001629c6dda7910538a Mon Sep 17 00:00:00 2001 From: Ethan P Date: Mon, 18 Jul 2022 20:56:30 -0700 Subject: [PATCH 1/6] events: Add `byDate` to `upcomingEvents` This array is automatically sorted to have the closest events (chronologically) near the beginning of the array. --- src/utils/upcomingEvents.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/utils/upcomingEvents.js b/src/utils/upcomingEvents.js index 42f947d..b2a7d28 100644 --- a/src/utils/upcomingEvents.js +++ b/src/utils/upcomingEvents.js @@ -116,4 +116,18 @@ const upcomingEvent = [ */ ] -export default upcomingEvent +export default upcomingEvent; + +// Internal Utility Functions: +function dateOf(event) { + const time = event.time.split(' - ')[0].replace(/ *([AP]M)/g, ' $1'); + return new Date(`${event.month} ${event.day} ${time}`); +} + +// byDate: The events, listed in order of closest to furthest. +export const byDate = upcomingEvent.sort((a, b) => { + const aDate = dateOf(a); + const bDate = dateOf(b); + return bDate - aDate; +}); + From 67a072c48b8bce0bc57e8e3f2dbe6b50a3a3dfc5 Mon Sep 17 00:00:00 2001 From: Ethan P Date: Mon, 18 Jul 2022 21:11:16 -0700 Subject: [PATCH 2/6] events: Show upcoming events on home page --- src/components/ShortUpcomingEvent.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/ShortUpcomingEvent.js b/src/components/ShortUpcomingEvent.js index b18346d..a738004 100644 --- a/src/components/ShortUpcomingEvent.js +++ b/src/components/ShortUpcomingEvent.js @@ -1,10 +1,11 @@ import styles from '../css/ShortUpcomingEvent.module.css' import useMediaQuery from '../utils/useMediaQuery' -import allEvents from '../utils/upcomingEvents' +import {byDate} from '../utils/upcomingEvents' import UpcomingEvent from './UpcomingEvent' const EventSelector = props => { const isDesktop = useMediaQuery('(min-width: 600px)') + const events = byDate.slice(0, 3); return (
{
- {allEvents.map((event, i) => ( + {events.map((event, i) => ( <> - {i < 3 && ( + {
{ fbEvent={event.fbEvent} />
- )} + } ))} - {allEvents.length <= 0 && -

- Stay tuned for future events -

- } +

+ {events.length > 0 ? '' : 'Stay tuned for future events'} +

) From e5fdfa0270c4ac6bf18fbb2b215377d42b60523a Mon Sep 17 00:00:00 2001 From: Ethan P Date: Tue, 26 Jul 2022 21:03:52 -0700 Subject: [PATCH 3/6] Make option for Note to be expandable up to 500px --- src/components/Note.js | 7 ++++++- src/css/Note.module.css | 5 +++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Note.js b/src/components/Note.js index 3e32130..efca5f3 100644 --- a/src/components/Note.js +++ b/src/components/Note.js @@ -8,13 +8,18 @@ const Note = ({ primaryColor = '#3D73C7', secondaryColor = '#2B5699', contentHeight, + expandable, setHovering }) => { const isDesktop = useMediaQuery('(min-width: 600px)') + const classes = [ + styles.container, + expandable ? styles.containerExpandable : null, + ] return (
x != null).join(' ')} style={{ '--primary-color': primaryColor, '--secondary-color': secondaryColor, diff --git a/src/css/Note.module.css b/src/css/Note.module.css index 72def96..ab8e454 100644 --- a/src/css/Note.module.css +++ b/src/css/Note.module.css @@ -5,6 +5,11 @@ width: fit-content; } +.container.containerExpandable { + width: 100%; + max-width: 500px; +} + .pageCurl { position: absolute; bottom: 0; From 884d36b2f847491e5e45b680fd545496e23d561d Mon Sep 17 00:00:00 2001 From: Ethan P Date: Tue, 26 Jul 2022 21:04:37 -0700 Subject: [PATCH 4/6] Make upcoming events on home page expand This makes them look nicer when they have to wrap. --- src/components/ShortUpcomingEvent.js | 1 + src/components/UpcomingEvent.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ShortUpcomingEvent.js b/src/components/ShortUpcomingEvent.js index a738004..a133040 100644 --- a/src/components/ShortUpcomingEvent.js +++ b/src/components/ShortUpcomingEvent.js @@ -34,6 +34,7 @@ const EventSelector = props => { time={event.time} link={event.link} fbEvent={event.fbEvent} + noteProps={{expandable: true}} />
} diff --git a/src/components/UpcomingEvent.js b/src/components/UpcomingEvent.js index fe6ee62..1fcfb3e 100644 --- a/src/components/UpcomingEvent.js +++ b/src/components/UpcomingEvent.js @@ -13,11 +13,12 @@ const UpcomingEvent = ({ location, time, link, - fbEvent + fbEvent, + noteProps, }) => { const isDesktop = useMediaQuery('(min-width: 600px)') return ( - +
From df713bf1e958dd09f3d1c56397e93484a40bfff3 Mon Sep 17 00:00:00 2001 From: Ethan P Date: Tue, 26 Jul 2022 21:09:32 -0700 Subject: [PATCH 5/6] Make event on events page look cleaner on all window sizes --- src/components/EventSelector.js | 1 + src/css/EventSelector.module.css | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/EventSelector.js b/src/components/EventSelector.js index 8b3d54e..2266fe4 100644 --- a/src/components/EventSelector.js +++ b/src/components/EventSelector.js @@ -112,6 +112,7 @@ const EventSelector = props => { time={event.time} link={event.link} fbEvent={event.fbEvent} + noteProps={{expandable: true}} />
)} diff --git a/src/css/EventSelector.module.css b/src/css/EventSelector.module.css index 1f18a62..c5a8f40 100644 --- a/src/css/EventSelector.module.css +++ b/src/css/EventSelector.module.css @@ -42,7 +42,19 @@ min-height: 631px; grid-row-gap: 31px; grid-column-gap: 49px; - grid-template-columns: 1fr 2fr; + grid-template-columns: 1fr 1fr 1fr; +} + +@media screen and (max-width: 1200px) { + .eventsNotes { + grid-template-columns: 1fr 1fr; + } +} + +@media screen and (max-width: 840px) { + .eventsNotes { + grid-template-columns: 1fr; + } } .eventsNotesMobile { From 4f0db740694b82f3a882118dfb37af6c7ec6f11d Mon Sep 17 00:00:00 2001 From: Ethan P Date: Tue, 26 Jul 2022 21:09:39 -0700 Subject: [PATCH 6/6] //TEMP --- src/utils/upcomingEvents.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/utils/upcomingEvents.js b/src/utils/upcomingEvents.js index b2a7d28..c7dc8e9 100644 --- a/src/utils/upcomingEvents.js +++ b/src/utils/upcomingEvents.js @@ -1,4 +1,37 @@ const upcomingEvent = [ + { + title: 'Audio Workshop', + day: '28', + month: 'Jul', + location: 'SFU Library', + time: '5:30PM – 7:30PM', + link: 'https://lu.ma/a5m6mqwe', + filterSetting: 'Workshops', + fbEvent: + 'https://www.facebook.com/events/589045982841057' + }, + { + title: 'Audio Workshop', + day: '28', + month: 'Jul', + location: 'SFU Library', + time: '5:30PM – 7:30PM', + link: 'https://lu.ma/a5m6mqwe', + filterSetting: 'Workshops', + fbEvent: + 'https://www.facebook.com/events/589045982841057' + }, + { + title: 'Audio Workshop', + day: '28', + month: 'Jul', + location: 'SFU Library', + time: '5:30PM – 7:30PM', + link: 'https://lu.ma/a5m6mqwe', + filterSetting: 'Workshops', + fbEvent: + 'https://www.facebook.com/events/589045982841057' + }, { title: 'Audio Workshop', day: '28',