diff --git a/src/components/ContactPerson2/styles.module.scss b/src/components/ContactPerson2/styles.module.scss index d721266..2e1f025 100644 --- a/src/components/ContactPerson2/styles.module.scss +++ b/src/components/ContactPerson2/styles.module.scss @@ -2,6 +2,7 @@ display: flex; gap: 20px; align-items: center; + justify-content: center; } .photo { diff --git a/src/components/Title/styles.module.scss b/src/components/Title/styles.module.scss index bbe91c5..e1f9dbc 100644 --- a/src/components/Title/styles.module.scss +++ b/src/components/Title/styles.module.scss @@ -9,6 +9,7 @@ .subtitle { position: relative; + font-weight: 500; top: -20px; } diff --git a/src/pageComponents/Event/Event.stories.tsx b/src/pageComponents/Event/Event.stories.tsx index 8ebbcd5..63a8db4 100644 --- a/src/pageComponents/Event/Event.stories.tsx +++ b/src/pageComponents/Event/Event.stories.tsx @@ -75,4 +75,44 @@ export const WithPhoto: Story = { ...Default.args, photo: photo } +} + +export const WithOccurrences: Story = { + args: { + ...Default.args, + upcomingOccurrences: [ + { + id: 'o1', + date: '2024-12-09T09:21:19Z', + title: 'Sing & Pray', + href: '/veranstaltungen/sing-and-pray-2', + location: 'St. Richard', + cancelled: false, + }, + { + id: 'o2', + date: '2024-12-16T09:21:19Z', + title: 'Sing & Pray', + href: '/veranstaltungen/sing-and-pray-3', + location: 'St. Richard', + cancelled: true, + }, + { + id: 'o3', + date: '2024-12-23T09:21:19Z', + title: 'Sing & Pray', + href: '/veranstaltungen/sing-and-pray-4', + location: 'St. Richard', + cancelled: false, + }, + { + id: 'o4', + date: '2024-12-30T09:21:19Z', + title: 'Sing & Pray', + href: '/veranstaltungen/sing-and-pray-5', + location: 'St. Richard', + cancelled: false, + }, + ], + }, } \ No newline at end of file diff --git a/src/pageComponents/Event/Event.tsx b/src/pageComponents/Event/Event.tsx index 235db43..d6cc86a 100644 --- a/src/pageComponents/Event/Event.tsx +++ b/src/pageComponents/Event/Event.tsx @@ -5,11 +5,9 @@ import { Title } from '@/components/Title/Title' import { Container } from '@/components/Container/Container' import { Col } from '@/components/Flex/Col' import { Pill } from '@/components/Pill/Pill' -import { HR } from '@/components/HorizontalRule/HorizontalRule' import { useDate } from '@/hooks/useCompactDate' import { readableDateTime } from '@/utils/readableDate' import { TextDiv } from '@/components/Text/TextDiv' -import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt' import { Button } from '@/components/Button/Button' import Image, { StaticImageData } from 'next/image' import { locationString } from '@/utils/dto/location' @@ -17,6 +15,8 @@ import { ContactPerson2 } from '@/components/ContactPerson2/ContactPerson2' import { getPhoto } from '@/utils/dto/gallery' import { AdminMenu } from '@/components/AdminMenu/AdminMenu' import { EventRow } from '@/components/EventRow/EventRow' +import { Row } from '@/components/Flex/Row' +import classNames from 'classnames' type UpcomingOccurrence = { id: string @@ -71,10 +71,11 @@ export function EventPage( const where = locationString(location); const contactPersonPhoto = typeof contact === "object" ? getPhoto("thumbnail", contact.photo) : undefined; const isRecurring = recurrenceType && recurrenceType !== 'none' + const hasOccurrences = upcomingOccurrences && upcomingOccurrences.length > 0; return ( <> -
+
<div className={styles.headerText}> <p> - Herzliche Einladungen an unseren kommenden Veranstaltungen und Events teilzunehmen. + {shortDescription} </p> <p className={styles.published}> Publiziert am {published} @@ -102,7 +103,7 @@ export function EventPage( } </div> </div> - <Col> + <div> { photo && <Image src={photo} @@ -112,104 +113,106 @@ export function EventPage( /> } - </Col> + </div> </div> - <HR /> + </Section> <Section padding={"medium"}> <Container> <Title size={"md"} - title={`${title} - ${readableDate}`} + title={title} + subtitle={`${readableDate} - ${typeof location === "object" ? location.name : 'd'}`} fontStyle={"sans-serif"} align={"center"} /> - {typeof location === "object" && - <Title - size={"md"} - title={location.name} - fontStyle={"sans-serif"} - align={"center"} - /> - } <Section padding={"medium"}> - <div className={styles.description}> - <TextDiv text={description} /> + <Row> + <Col> + <Title + size={"md"} + title={"Einladung"} + fontStyle={"sans-serif"} + align={"center"} + /> - { (typeof flyer === "object" || group || rsvpLink) && - <Section padding={"small"}> - <div className={styles.buttons}> - { rsvpLink && - <Button size={"md"} href={rsvpLink} target={"_blank"} schema={"contrast"}> - Anmelden - </Button> - } + <div className={classNames({ + [styles.description]: true, + [styles.padding]: !hasOccurrences + })}> + <TextDiv text={description} /> - { typeof flyer === "object" && flyer.url && - <Button size={"md"} href={flyer.url}>Flyer herunterladen</Button> - } + <br/> + <Title title={"Location"} size={"sm"} align={"center"} fontStyle={"sans-serif"}/> + <TextDiv text={where} /> - { group && - <Button - size={"md"} - schema={"shade"} - href={`/gruppe/${group}`} - >Erfahre mehr zur Gruppe</Button> - } - </div> - </Section> - } - </div> + { typeof contact !== "undefined" && + <> + <br/> + <Title title={"Ansprechperson"} size={"sm"} align={"center"} fontStyle={"sans-serif"}/> + <ContactPerson2 + contact={contact} + photo={contactPersonPhoto}/> + </> + } + + </div> + + + { (typeof flyer === "object" || group || rsvpLink) && + <Section padding={"small"}> + <div className={styles.buttons}> + { rsvpLink && + <Button size={"md"} href={rsvpLink} target={"_blank"} schema={"contrast"}> + Anmelden + </Button> + } + + { typeof flyer === "object" && flyer.url && + <Button size={"md"} href={flyer.url}>Flyer herunterladen</Button> + } + + { group && + <Button + size={"md"} + schema={"shade"} + href={`/gruppe/${group}`} + >Erfahre mehr zur Gruppe</Button> + } + </div> + </Section> + } + + </Col> + { upcomingOccurrences && upcomingOccurrences.length > 0 && + <Col> + <Title + title={"Nächste Termine"} + size={"md"} + color={"contrast"} + /> + { upcomingOccurrences.map(o => + <EventRow + key={o.id} + date={o.date} + title={o.title} + href={o.href} + location={o.location} + cancelled={o.cancelled} + color={"contrast"} + /> + )} + </Col> + } + </Row> </Section> </Container> - - <EventExcerpt> - <EventExcerptRow label={"Was:"}> - <TextDiv text={shortDescription} /> - </EventExcerptRow> - <EventExcerptRow label={"Wo:"}> - <TextDiv text={where} /> - </EventExcerptRow> - <EventExcerptRow label={"Ansprechperson:"}> - <ContactPerson2 - contact={contact} - photo={contactPersonPhoto} - /> - </EventExcerptRow> - </EventExcerpt> - </Section> - { upcomingOccurrences && upcomingOccurrences.length > 0 && - <Section padding={"medium"}> - <Container> - <Title - title={"Nächste Termine"} - size={"md"} - color={"contrast"} - align={"center"} - /> - <Section padding={"small"}> - { upcomingOccurrences.map(o => - <EventRow - key={o.id} - date={o.date} - title={o.title} - href={o.href} - location={o.location} - cancelled={o.cancelled} - /> - )} - </Section> - </Container> - </Section> - } - - <Section/> <AdminMenu collection={"event"} id={id} diff --git a/src/pageComponents/Event/styles.module.scss b/src/pageComponents/Event/styles.module.scss index b43409b..85e0842 100644 --- a/src/pageComponents/Event/styles.module.scss +++ b/src/pageComponents/Event/styles.module.scss @@ -2,7 +2,11 @@ .description { text-align: center; - padding: 0 100px; +} + +.padding { + max-width: 600px; + margin: 0 auto; } .published { @@ -28,6 +32,7 @@ gap: 80px; margin: 0 auto; overflow: hidden; + justify-content: space-between; } .photo {