diff --git a/package.json b/package.json index e747ef1..e11f01a 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,6 @@ "@payloadcms/next": "beta", "@payloadcms/plugin-cloud": "beta", "@payloadcms/richtext-lexical": "beta", - "@romcal/calendar.france": "^3.0.0-dev.79", - "@romcal/calendar.germany": "file:./../romcal/dist/bundles/germany", "classnames": "^2.5.1", "cross-env": "^7.0.3", "graphql": "^16.8.1", @@ -30,7 +28,6 @@ "payload": "beta", "react": "^19.0.0-rc-6230622a1a-20240610", "react-dom": "^19.0.0-rc-6230622a1a-20240610", - "romcal": "^3.0.0-dev.79", "sharp": "0.32.6" }, "devDependencies": { diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..e8df664 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,4 @@ +html, +body { + margin: 0; +} diff --git a/src/app/icon.ico b/src/app/icon.ico new file mode 100644 index 0000000..91b0b52 Binary files /dev/null and b/src/app/icon.ico differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 46d01ff..56bcb11 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,9 @@ import type { Metadata } from 'next' import { lato } from './fonts' +import './globals.css' export const metadata: Metadata = { title: 'Katholische Pfarrei Heilige drei Könige Berlin', - description: 'Generated by create next app', } export default function RootLayout({ diff --git a/src/app/worship/[id]/page.tsx b/src/app/worship/[id]/page.tsx index a0930db..b915856 100644 --- a/src/app/worship/[id]/page.tsx +++ b/src/app/worship/[id]/page.tsx @@ -33,7 +33,6 @@ export default async function Page({ params }: { params: { id: string } }) { return ( <> - diff --git a/src/app/worship/[id]/styles.module.css b/src/app/worship/[id]/styles.module.css index 0dd5810..1b6873f 100644 --- a/src/app/worship/[id]/styles.module.css +++ b/src/app/worship/[id]/styles.module.css @@ -2,11 +2,13 @@ display: flex; gap: 30px; margin-bottom: 80px; + flex-wrap: wrap; + justify-content: center; } .cardContent { padding-top: 30px; - padding-left: 50px; + text-align: center; } .cardText { diff --git a/src/components/Card/styles.module.css b/src/components/Card/styles.module.css index 14210ff..3135f78 100644 --- a/src/components/Card/styles.module.css +++ b/src/components/Card/styles.module.css @@ -1,6 +1,6 @@ .card { height: 260px; - width: 235px; + width: 240px; box-shadow: 0 0 11px 0 rgba(79, 66, 79, 0.26); background-color: #ffffff; } diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx index 5039e38..b39a2f6 100644 --- a/src/components/Container/Container.stories.tsx +++ b/src/components/Container/Container.stories.tsx @@ -16,7 +16,6 @@ export const Default: Story = { export const Yellow: Story = { args: { - background: 'yellow', children: <>Some content, }, } diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx index bef523a..149ac71 100644 --- a/src/components/Container/Container.tsx +++ b/src/components/Container/Container.tsx @@ -1,15 +1,9 @@ import styles from './styles.module.css' -import classNames from 'classnames' type ContainerProps = { - background?: 'yellow' children: JSX.Element | JSX.Element[] } -export const Container = ({ children, background }: ContainerProps) => { - return ( -
-
{children}
-
- ) +export const Container = ({ children }: ContainerProps) => { + return
{children}
} diff --git a/src/components/Container/styles.module.css b/src/components/Container/styles.module.css index ea69582..a96e799 100644 --- a/src/components/Container/styles.module.css +++ b/src/components/Container/styles.module.css @@ -1,15 +1,10 @@ .container { - width: 800px; + max-width: 800px; margin: 0 auto; } -.yellow { - background: rgb(255, 255, 97); - background: linear-gradient( - 180deg, - rgba(255, 255, 97, 0) 0%, - rgb(255 250 163) 20% - ); - position: relative; - top: -70px; +@media screen and (max-width: 800px) { + .container { + padding: 0 20px; + } } diff --git a/src/components/HomeBanner/HomeBanner.tsx b/src/components/HomeBanner/HomeBanner.tsx index 3c1d0ab..81c3a3f 100644 --- a/src/components/HomeBanner/HomeBanner.tsx +++ b/src/components/HomeBanner/HomeBanner.tsx @@ -19,6 +19,7 @@ export type HomeBannerHandle = { export const HomeBanner = forwardRef( function HomeBanner({ children, stars }: HomeBannerProps, ref) { const canvasRef = useRef(null) + const containerRef = useRef(null) const drawStarAtPosition = useCallback( (ctx: CanvasRenderingContext2D, x: number, y: number) => { @@ -57,7 +58,8 @@ export const HomeBanner = forwardRef( useEffect(() => { if (canvasRef.current) { - canvasRef.current.width = window.innerWidth + canvasRef.current.width = + containerRef.current?.clientWidth || window.innerWidth canvasRef.current.height = 0.8 * window.innerHeight } const context = canvasRef.current?.getContext('2d') @@ -73,7 +75,7 @@ export const HomeBanner = forwardRef( }, [drawStar, stars]) return ( -
+
{children}
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 745b8e6..8119838 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react' import mapboxgl from 'mapbox-gl' import styles from './styles.module.css' import 'mapbox-gl/dist/mapbox-gl.css' +import { Container } from '@/components/Container/Container' // todo: as env variable mapboxgl.accessToken = @@ -31,5 +32,9 @@ export const LocationMap = () => { } }) - return
+ return ( + +
+ + ) } diff --git a/src/components/MassTable/MassTable.stories.ts b/src/components/MassTable/MassTable.stories.ts index a8b3346..f43fecf 100644 --- a/src/components/MassTable/MassTable.stories.ts +++ b/src/components/MassTable/MassTable.stories.ts @@ -15,26 +15,38 @@ export const Default: Story = { { id: '1', date: '10:00', - locationName: 'St. Christopherus', - type: null, + location: 'St. Christopherus', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', }, { id: '1', - date: '11:00', - locationName: 'St. Richard', - type: 'FAMILY', + date: '10:00', + location: 'St. Christopherus', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', }, { id: '1', - date: '11:00', - locationName: 'St. Clara', - type: 'WORD', + date: '10:00', + location: 'St. Christopherus', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', }, { id: '1', - date: '19:00', - locationName: 'St. Clara', - type: null, + date: '10:00', + location: 'St. Christopherus', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', }, ], }, diff --git a/src/components/MassTimer/MassTimer.stories.ts b/src/components/MassTimer/MassTimer.stories.ts index c828099..6ec86af 100644 --- a/src/components/MassTimer/MassTimer.stories.ts +++ b/src/components/MassTimer/MassTimer.stories.ts @@ -11,14 +11,30 @@ export default meta export const OneDay: Story = { args: { - timeout: new Date().getTime() + 1000 * 60 * 60 * 24, + nextMass: { + id: '1', + location: '231234', + date: '2025-08-23T15:00:00.000Z', + type: 'WORD', + cancelled: false, + createdAt: '2025-08-23T15:00:00.000Z', + updatedAt: '2025-08-23T15:00:00.000Z', + }, onStarClick: fn(), }, } export const TimeOut: Story = { args: { - timeout: new Date().getTime(), + nextMass: { + id: '1', + location: '231234', + date: '2025-08-23T15:00:00.000Z', + type: 'WORD', + cancelled: false, + createdAt: '2025-08-23T15:00:00.000Z', + updatedAt: '2025-08-23T15:00:00.000Z', + }, onStarClick: fn(), }, } diff --git a/src/components/MassTimer/MassTimer.tsx b/src/components/MassTimer/MassTimer.tsx index fc4cd2e..22bb870 100644 --- a/src/components/MassTimer/MassTimer.tsx +++ b/src/components/MassTimer/MassTimer.tsx @@ -32,7 +32,10 @@ export const MassTimer = ({ nextMass, onStarClick }: MassTimerProps) => { 🌟 - setDisplayTooltip(true)}> + setDisplayTooltip(true)} + suppressHydrationWarning={true} + > {days}T {hours}S {minutes}M {seconds}S
diff --git a/src/components/MassTimer/masstimer.module.css b/src/components/MassTimer/masstimer.module.css index 4b10be5..1bab979 100644 --- a/src/components/MassTimer/masstimer.module.css +++ b/src/components/MassTimer/masstimer.module.css @@ -1,5 +1,6 @@ .container { position: relative; + width: 145px; } .starButton { diff --git a/src/components/MassTitle/styles.module.css b/src/components/MassTitle/styles.module.css index a32b3f3..2f40be1 100644 --- a/src/components/MassTitle/styles.module.css +++ b/src/components/MassTitle/styles.module.css @@ -1,7 +1,7 @@ .title { font-size: 48px; font-weight: 700; - margin-block-start: 0; + margin-block-start: -10px; } .mass { diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 1efe5de..28e9f24 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -18,7 +18,7 @@ export const Menu = (props: MenuProps) => { {'Menu'}
- + Home @@ -35,7 +35,7 @@ export const Menu = (props: MenuProps) => {
diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css index f9096c1..432f011 100644 --- a/src/components/Menu/styles.module.css +++ b/src/components/Menu/styles.module.css @@ -2,10 +2,10 @@ display: flex; align-items: baseline; gap: 20px; - color: #3d3d3d; - padding-top: 15px; - height: 50px; - border-bottom: 1px solid rgba(217, 217, 217, 0.19); + color: #1f1f1f; + padding: 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.67); + margin-bottom: 2.5em; } .navMobile { diff --git a/src/components/Testimony/Testimony.stories.tsx b/src/components/Testimony/Testimony.stories.tsx index c6e0073..2a7f866 100644 --- a/src/components/Testimony/Testimony.stories.tsx +++ b/src/components/Testimony/Testimony.stories.tsx @@ -15,3 +15,12 @@ export const Default: Story = { 'Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen.', }, } + +export const WithOccupation: Story = { + args: { + name: 'Johan Schäfer', + testimony: + 'Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen.', + occupation: 'Schüler', + }, +} diff --git a/src/components/Testimony/Testimony.tsx b/src/components/Testimony/Testimony.tsx index 8b009ce..3f0ec25 100644 --- a/src/components/Testimony/Testimony.tsx +++ b/src/components/Testimony/Testimony.tsx @@ -2,22 +2,32 @@ import styles from './styles.module.css' import { Container } from '@/components/Container/Container' import classNames from 'classnames' import { faustina } from '@/app/fonts' +import Image from 'next/image' +import quote from './quotes.svg' type TestimonyProps = { name: string testimony: string + occupation?: string } -export const Testimony = ({ name, testimony }: TestimonyProps) => { +export const Testimony = ({ name, testimony, occupation }: TestimonyProps) => { return ( - +
-
-
+
+ {'Quote'}

{testimony}

-

{name}

+

+ {name} {occupation && <>- {occupation}} +

diff --git a/src/components/Testimony/quotes.svg b/src/components/Testimony/quotes.svg new file mode 100644 index 0000000..73b9211 --- /dev/null +++ b/src/components/Testimony/quotes.svg @@ -0,0 +1,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/Testimony/styles.module.css b/src/components/Testimony/styles.module.css index 767cce1..976307a 100644 --- a/src/components/Testimony/styles.module.css +++ b/src/components/Testimony/styles.module.css @@ -7,11 +7,41 @@ .testimonyText { font-style: italic; + line-height: 1.7em; + font-size: 1.1em; +} + +.container { + position: relative; } .person { height: 150px; width: 150px; - background-color: white; + background-color: #f6dc66; flex-shrink: 0; } + +.name { + text-align: right; + font-weight: bold; +} + +.quote { + position: absolute; + top: -10px; + left: -10px; + opacity: 0.5; + z-index: -1; +} + +.slidein { + transform: translateX(-100%); + animation: slide-in 0.3s forwards; +} + +@keyframes slide-in { + 100% { + transform: translateX(0%); + } +} diff --git a/src/payload-types.ts b/src/payload-types.ts index 1cb53a0..f504fe2 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -8,161 +8,162 @@ export interface Config { auth: { - users: UserAuthOperations - } + users: UserAuthOperations; + }; collections: { - users: User - media: Media - worship: Worship - church: Church - testimony: Testimony - 'payload-preferences': PayloadPreference - 'payload-migrations': PayloadMigration - } + users: User; + media: Media; + worship: Worship; + church: Church; + testimony: Testimony; + 'payload-preferences': PayloadPreference; + 'payload-migrations': PayloadMigration; + }; db: { - defaultIDType: string - } - globals: {} - locale: null + defaultIDType: string; + }; + globals: {}; + locale: null; user: User & { - collection: 'users' - } + collection: 'users'; + }; } export interface UserAuthOperations { forgotPassword: { - email: string - password: string - } + email: string; + password: string; + }; login: { - email: string - password: string - } + email: string; + password: string; + }; registerFirstUser: { - email: string - password: string - } + email: string; + password: string; + }; unlock: { - email: string - password: string - } + email: string; + password: string; + }; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "users". */ export interface User { - id: string - updatedAt: string - createdAt: string - email: string - resetPasswordToken?: string | null - resetPasswordExpiration?: string | null - salt?: string | null - hash?: string | null - loginAttempts?: number | null - lockUntil?: string | null - password?: string | null + id: string; + updatedAt: string; + createdAt: string; + email: string; + resetPasswordToken?: string | null; + resetPasswordExpiration?: string | null; + salt?: string | null; + hash?: string | null; + loginAttempts?: number | null; + lockUntil?: string | null; + password?: string | null; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "media". */ export interface Media { - id: string - alt: string - updatedAt: string - createdAt: string - url?: string | null - thumbnailURL?: string | null - filename?: string | null - mimeType?: string | null - filesize?: number | null - width?: number | null - height?: number | null - focalX?: number | null - focalY?: number | null + id: string; + alt: string; + updatedAt: string; + createdAt: string; + url?: string | null; + thumbnailURL?: string | null; + filename?: string | null; + mimeType?: string | null; + filesize?: number | null; + width?: number | null; + height?: number | null; + focalX?: number | null; + focalY?: number | null; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "worship". */ export interface Worship { - id: string - date: string - location: string | Church - type: 'MASS' | 'FAMILY' | 'WORD' - cancelled: boolean - title?: string | null - description?: string | null - updatedAt: string - createdAt: string + id: string; + date: string; + location: string | Church; + type: 'MASS' | 'FAMILY' | 'WORD'; + cancelled: boolean; + title?: string | null; + description?: string | null; + updatedAt: string; + createdAt: string; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "church". */ export interface Church { - id: string - name: string - address: string - updatedAt: string - createdAt: string + id: string; + name: string; + address: string; + updatedAt: string; + createdAt: string; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "testimony". */ export interface Testimony { - id: string - testimony: string - name: string - occupation?: string | null - category: 'EUCHARIST' - updatedAt: string - createdAt: string + id: string; + testimony: string; + name: string; + occupation?: string | null; + category: 'EUCHARIST'; + updatedAt: string; + createdAt: string; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "payload-preferences". */ export interface PayloadPreference { - id: string + id: string; user: { - relationTo: 'users' - value: string | User - } - key?: string | null + relationTo: 'users'; + value: string | User; + }; + key?: string | null; value?: | { - [k: string]: unknown + [k: string]: unknown; } | unknown[] | string | number | boolean - | null - updatedAt: string - createdAt: string + | null; + updatedAt: string; + createdAt: string; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "payload-migrations". */ export interface PayloadMigration { - id: string - name?: string | null - batch?: number | null - updatedAt: string - createdAt: string + id: string; + name?: string | null; + batch?: number | null; + updatedAt: string; + createdAt: string; } /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "auth". */ export interface Auth { - [k: string]: unknown + [k: string]: unknown; } + declare module 'payload' { export interface GeneratedTypes extends Config {} -} +} \ No newline at end of file