diff --git a/src/app/_blocks/NextEvent/index.tsx b/src/app/_blocks/NextEvent/index.tsx index 50d3063..4c5bab0 100644 --- a/src/app/_blocks/NextEvent/index.tsx +++ b/src/app/_blocks/NextEvent/index.tsx @@ -144,7 +144,7 @@ export const NextEventBlock: React.FC< { depth: 1, limit: 1, - sort: 'date', + sort: '-date', }, { encode: false }, ) diff --git a/src/app/_components/CollectionArchive/index.tsx b/src/app/_components/CollectionArchive/index.tsx index e1a6ee0..d6b321f 100644 --- a/src/app/_components/CollectionArchive/index.tsx +++ b/src/app/_components/CollectionArchive/index.tsx @@ -314,6 +314,7 @@ export const CollectionArchive: React.FC = props => { date={isPopUpVisible.date} description={isPopUpVisible.description} location={isPopUpVisible.location} + endTime={isPopUpVisible.endTime} onEventClick={EventClick} /> )} diff --git a/src/app/_components/EventPopUp/index.module.scss b/src/app/_components/EventPopUp/index.module.scss index 23e9962..415c1de 100644 --- a/src/app/_components/EventPopUp/index.module.scss +++ b/src/app/_components/EventPopUp/index.module.scss @@ -78,6 +78,7 @@ display: flex; flex-direction: column; padding-left: 20px; + flex: 70%; } .name { @@ -107,8 +108,7 @@ } .bio { - flex: 70%; - padding-top: 30px; + // flex: 70%; padding-left: 5%; padding-right: 5%; font-size: 20px; @@ -120,13 +120,10 @@ text-align: center; padding-left: 10%; padding-right: 10%; - display: flex; + display: inline-flex; flex-direction: column; justify-content: center; - @include extra-small-break { - width: 100%; - } } .date { @@ -136,9 +133,9 @@ letter-spacing: 0; line-height: normal; - // @include extra-small-break { - // font-size: 18vw; - // } + @include extra-small-break { + font-size: 10vw; + } } .month { @@ -149,9 +146,27 @@ line-height: normal; width: 100%; - // @include extra-small-break { - // font-size: 7vw; - // } + @include extra-small-break { + font-size: 6vw; + } + } + + .time { + color: var(--theme-elevation-400); + font-size: 20px; + font-weight: 400; + letter-spacing: 0; + line-height: normal; + width: 100%; + white-space: nowrap; + + @include small-break { + white-space: wrap; + } + + @include extra-small-break { + font-size: 4vw; + } } diff --git a/src/app/_components/EventPopUp/index.tsx b/src/app/_components/EventPopUp/index.tsx index deafc9a..f8643a9 100644 --- a/src/app/_components/EventPopUp/index.tsx +++ b/src/app/_components/EventPopUp/index.tsx @@ -20,6 +20,7 @@ interface PopUpProps { date: string location: string | null description: string | null + endTime: string | null onEventClick: (event: Event | null) => void } @@ -28,6 +29,7 @@ export const EventPopUp: React.FC = ({ date, location, description, + endTime, onEventClick, }) => { const closeClick = () => { @@ -57,7 +59,12 @@ export const EventPopUp: React.FC = ({ const month = parseInt(dateParts[1], 10) const day = dateParts[2].split('T')[0] const monthName = getMonthName(month) - + const time = dateParts[2].split('T')[1].split(':').slice(0, 2).join(':') + let concEndTime: string | null = null + if (endTime) { + const endTimeParts = endTime.split('-') + concEndTime = endTimeParts[2].split('T')[1].split(':').slice(0, 2).join(':') + } return ( <>
@@ -67,6 +74,11 @@ export const EventPopUp: React.FC = ({
{day}
{monthName}
+ {endTime ? ( + {time + ' - ' + concEndTime} + ) : ( + {time} + )}
{name} diff --git a/src/payload/collections/Events.ts b/src/payload/collections/Events.ts index 2bfbff2..8aa3ef5 100644 --- a/src/payload/collections/Events.ts +++ b/src/payload/collections/Events.ts @@ -39,6 +39,16 @@ const Events: CollectionConfig = { }, }, }, + { + name: 'endTime', + label: 'End Time', + type: 'date', + admin: { + date: { + pickerAppearance: 'timeOnly', + }, + }, + }, { name: 'location', label: 'Location', diff --git a/src/payload/payload-types.ts b/src/payload/payload-types.ts index 6632a60..df61957 100644 --- a/src/payload/payload-types.ts +++ b/src/payload/payload-types.ts @@ -935,6 +935,7 @@ export interface Event { id: string; name: string; date: string; + endTime?: string | null; location?: string | null; description?: string | null; updatedAt: string;