From fcef53e7d049b0757ef121e38bd317b979c40ed3 Mon Sep 17 00:00:00 2001 From: Benno Tielen Date: Fri, 17 Apr 2026 11:29:00 +0200 Subject: [PATCH] fix: render grid as flex --- src/components/MassTable/MassGrid.stories.ts | 300 ++++++++++++++++++ src/components/MassTable/MassGrid.tsx | 30 +- src/components/MassTable/massgrid.module.scss | 8 +- src/components/MassTable/styles.module.scss | 14 +- src/compositions/Blocks/MassTimesBlock.tsx | 17 +- src/pageComponents/Home/HomeView.tsx | 11 +- 6 files changed, 352 insertions(+), 28 deletions(-) create mode 100644 src/components/MassTable/MassGrid.stories.ts diff --git a/src/components/MassTable/MassGrid.stories.ts b/src/components/MassTable/MassGrid.stories.ts new file mode 100644 index 0000000..52a5703 --- /dev/null +++ b/src/components/MassTable/MassGrid.stories.ts @@ -0,0 +1,300 @@ +import { Meta, StoryObj } from '@storybook/nextjs-vite' +import { MassGrid } from './MassGrid' + +const meta: Meta = { + component: MassGrid, +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + locations: [ + { + id: 'clara', + name: 'St. Clara', + masses: [ + { + id: '1', + date: '2024-08-21T15:00:00.000Z', + location: 'St. Clara', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '2', + date: '2024-08-23T18:00:00.000Z', + location: 'St. Clara', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '3', + date: '2024-08-24T09:00:00.000Z', + location: 'St. Clara', + type: 'WORD', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'christopherus', + name: 'St. Christopherus', + masses: [ + { + id: '4', + date: '2024-08-22T10:00:00.000Z', + location: 'St. Christopherus', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '5', + date: '2024-08-25T17:00:00.000Z', + location: 'St. Christopherus', + type: 'FAMILY', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '6', + date: '2024-08-26T15:00:00.000Z', + location: 'St. Christopherus', + type: 'MASS', + cancelled: true, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'marien', + name: 'St. Marien', + masses: [ + { + id: '7', + date: '2024-08-23T11:00:00.000Z', + location: 'St. Marien', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '8', + date: '2024-08-24T19:00:00.000Z', + location: 'St. Marien', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + ], + }, +} + +export const SingleLocation: Story = { + args: { + locations: [ + { + id: 'clara', + name: 'St. Clara', + masses: [ + { + id: '1', + date: '2024-08-21T15:00:00.000Z', + location: 'St. Clara', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '2', + date: '2024-08-23T18:00:00.000Z', + location: 'St. Clara', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + ], + }, +} + +export const Empty: Story = { + args: { + locations: [], + }, +} + +export const SevenChurches: Story = { + args: { + locations: [ + { + id: 'clara', + name: 'St. Clara', + masses: [ + { + id: '1', + date: '2024-08-21T15:00:00.000Z', + location: 'St. Clara', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '2', + date: '2024-08-24T09:00:00.000Z', + location: 'St. Clara', + type: 'WORD', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'christopherus', + name: 'St. Christopherus', + masses: [ + { + id: '3', + date: '2024-08-22T10:00:00.000Z', + location: 'St. Christopherus', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '4', + date: '2024-08-25T17:00:00.000Z', + location: 'St. Christopherus', + type: 'FAMILY', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'marien', + name: 'St. Marien', + masses: [ + { + id: '5', + date: '2024-08-23T11:00:00.000Z', + location: 'St. Marien', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'johannes', + name: 'St. Johannes Nepomuk II', + masses: [ + { + id: '6', + date: '2024-08-21T18:00:00.000Z', + location: 'St. Johannes Nepomuk II', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '7', + date: '2024-08-24T10:30:00.000Z', + location: 'St. Johannes Nepomuk II', + type: 'MASS', + cancelled: true, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'peter', + name: 'St. Peter', + masses: [ + { + id: '8', + date: '2024-08-22T08:00:00.000Z', + location: 'St. Peter', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '9', + date: '2024-08-25T11:00:00.000Z', + location: 'St. Peter', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'paul', + name: 'St. Paulus Of the holy Cross', + masses: [ + { + id: '10', + date: '2024-08-23T17:00:00.000Z', + location: 'St. Paul', + type: 'WORD', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + { + id: 'elisabeth', + name: 'St. Elisabeth', + masses: [ + { + id: '11', + date: '2024-08-24T19:00:00.000Z', + location: 'St. Elisabeth', + type: 'FAMILY', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + { + id: '12', + date: '2024-08-26T09:00:00.000Z', + location: 'St. Elisabeth', + type: 'MASS', + cancelled: false, + updatedAt: '', + createdAt: '', + }, + ], + }, + ], + }, +} diff --git a/src/components/MassTable/MassGrid.tsx b/src/components/MassTable/MassGrid.tsx index 621933d..ba44b29 100644 --- a/src/components/MassTable/MassGrid.tsx +++ b/src/components/MassTable/MassGrid.tsx @@ -1,11 +1,29 @@ +import { Worship } from '@/payload-types' +import { MassTable } from '@/components/MassTable/MassTable' import styles from './massgrid.module.scss' -type MassGridProps = { - children: React.ReactNode +export type MassGridLocation = { + id: string + name: string + masses: Worship[] } -export const MassGrid = ({ children }: MassGridProps) => { - return
-
{children}
-
+type MassGridProps = { + locations: MassGridLocation[] +} + +export const MassGrid = ({ locations }: MassGridProps) => { + return ( +
+
+ {locations.map((location) => ( + + ))} +
+
+ ) } diff --git a/src/components/MassTable/massgrid.module.scss b/src/components/MassTable/massgrid.module.scss index d418b74..327a07a 100644 --- a/src/components/MassTable/massgrid.module.scss +++ b/src/components/MassTable/massgrid.module.scss @@ -1,12 +1,12 @@ .grid { - display: grid; - grid-template-columns: repeat(auto-fit, 200px); + display: flex; + flex-wrap: wrap; justify-content: center; column-gap: 30px; - row-gap: 15px; + row-gap: 30px; } .container { margin: 0 auto; max-width: 1200px -} \ No newline at end of file +} diff --git a/src/components/MassTable/styles.module.scss b/src/components/MassTable/styles.module.scss index e1eb3ed..0551269 100644 --- a/src/components/MassTable/styles.module.scss +++ b/src/components/MassTable/styles.module.scss @@ -18,6 +18,12 @@ .location { font-size: 22px; font-weight: 700; + line-height: 1em; + height: 70px; + display: flex; + align-items: flex-end; + justify-content: center; + text-align: center; } .cancelled { @@ -43,8 +49,8 @@ .table { width: 200px; - display: grid; - grid-row: span 3; - grid-template-rows: subgrid; - justify-items: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; } diff --git a/src/compositions/Blocks/MassTimesBlock.tsx b/src/compositions/Blocks/MassTimesBlock.tsx index c7904b8..3e896e9 100644 --- a/src/compositions/Blocks/MassTimesBlock.tsx +++ b/src/compositions/Blocks/MassTimesBlock.tsx @@ -6,7 +6,6 @@ import { perParish } from '@/utils/dto/perParish' import { Section } from '@/components/Section/Section' import { Title } from '@/components/Title/Title' import { MassGrid } from '@/components/MassTable/MassGrid' -import { MassTable } from '@/components/MassTable/MassTable' import { PopupButton } from '@/components/PopupButton/PopupButton' import { Button } from '@/components/Button/Button' import moment from 'moment' @@ -82,15 +81,13 @@ export async function MassTimesBlock({ />
- - {worshipPerLocation.map((value) => ( - - ))} - + ({ + id, + name: group.name, + masses: group.masses, + }))} + />
diff --git a/src/pageComponents/Home/HomeView.tsx b/src/pageComponents/Home/HomeView.tsx index 37ef033..35de6ca 100644 --- a/src/pageComponents/Home/HomeView.tsx +++ b/src/pageComponents/Home/HomeView.tsx @@ -6,7 +6,6 @@ import { MainText } from '@/components/MainText/MainText' import { HR } from '@/components/HorizontalRule/HorizontalRule' import { Title } from '@/components/Title/Title' import { MassGrid } from '@/components/MassTable/MassGrid' -import { MassTable } from '@/components/MassTable/MassTable' import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider' import { blogToSlides } from '@/utils/dto/blog' import forest from '@/assets/map.jpg' @@ -111,9 +110,13 @@ export const HomeView = ({ />
- - {worshipPerLocation.map(value => )} - + ({ + id: name, + name, + masses, + }))} + />