bennot/church-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: render grid as flex

Browse source
This commit is contained in:
Benno Tielen 2026-04-17 11:29:00 +02:00
parent b8ed9ea538
commit fcef53e7d0
6 changed files with 352 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

300
src/components/MassTable/MassGrid.stories.ts Normal file
View file

@ -0,0 +1,300 @@
import { Meta, StoryObj } from '@storybook/nextjs-vite'
import { MassGrid } from './MassGrid'
const meta: Meta<typeof MassGrid> = {
component: MassGrid,
}
export default meta
type Story = StoryObj<typeof meta>
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: '',
},
],
},
],
},
}

30
src/components/MassTable/MassGrid.tsx
View file

@ -1,11 +1,29 @@
import { Worship } from '@/payload-types'
import { MassTable } from '@/components/MassTable/MassTable'
import styles from './massgrid.module.scss' import styles from './massgrid.module.scss'
type MassGridProps = { export type MassGridLocation = {
children: React.ReactNode id: string
name: string
masses: Worship[]
} }
export const MassGrid = ({ children }: MassGridProps) => { type MassGridProps = {
return <div className={styles.container}> locations: MassGridLocation[]
<div className={styles.grid}>{children}</div> }
</div>
export const MassGrid = ({ locations }: MassGridProps) => {
return (
<div className={styles.container}>
<div className={styles.grid}>
{locations.map((location) => (
<MassTable
key={location.id}
location={location.name}
masses={location.masses}
/>
))}
</div>
</div>
)
} }

8
src/components/MassTable/massgrid.module.scss
View file

@ -1,12 +1,12 @@
.grid { .grid {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, 200px); flex-wrap: wrap;
justify-content: center; justify-content: center;
column-gap: 30px; column-gap: 30px;
row-gap: 15px; row-gap: 30px;
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 1200px max-width: 1200px
} }

14
src/components/MassTable/styles.module.scss
View file

@ -18,6 +18,12 @@
.location { .location {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
line-height: 1em;
height: 70px;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
} }
.cancelled { .cancelled {
@ -43,8 +49,8 @@
.table { .table {
width: 200px; width: 200px;
display: grid; display: flex;
grid-row: span 3; flex-direction: column;
grid-template-rows: subgrid; align-items: center;
justify-items: center; gap: 10px;
} }

17
src/compositions/Blocks/MassTimesBlock.tsx
View file

@ -6,7 +6,6 @@ import { perParish } from '@/utils/dto/perParish'
import { Section } from '@/components/Section/Section' import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title' import { Title } from '@/components/Title/Title'
import { MassGrid } from '@/components/MassTable/MassGrid' import { MassGrid } from '@/components/MassTable/MassGrid'
import { MassTable } from '@/components/MassTable/MassTable'
import { PopupButton } from '@/components/PopupButton/PopupButton' import { PopupButton } from '@/components/PopupButton/PopupButton'
import { Button } from '@/components/Button/Button' import { Button } from '@/components/Button/Button'
import moment from 'moment' import moment from 'moment'
@ -82,15 +81,13 @@ export async function MassTimesBlock({
/> />
<Section padding={'small'}> <Section padding={'small'}>
<MassGrid> <MassGrid
{worshipPerLocation.map((value) => ( locations={worshipPerLocation.map(([id, group]) => ({
<MassTable id,
key={value[0]} name: group.name,
location={value[1].name} masses: group.masses,
masses={value[1].masses} }))}
/> />
))}
</MassGrid>
</Section> </Section>
<Section padding={'small'}> <Section padding={'small'}>

11
src/pageComponents/Home/HomeView.tsx
View file

@ -6,7 +6,6 @@ import { MainText } from '@/components/MainText/MainText'
import { HR } from '@/components/HorizontalRule/HorizontalRule' import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { Title } from '@/components/Title/Title' import { Title } from '@/components/Title/Title'
import { MassGrid } from '@/components/MassTable/MassGrid' import { MassGrid } from '@/components/MassTable/MassGrid'
import { MassTable } from '@/components/MassTable/MassTable'
import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider' import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider'
import { blogToSlides } from '@/utils/dto/blog' import { blogToSlides } from '@/utils/dto/blog'
import forest from '@/assets/map.jpg' import forest from '@/assets/map.jpg'
@ -111,9 +110,13 @@ export const HomeView = ({
/> />
<Section padding={'small'}> <Section padding={'small'}>
<MassGrid> <MassGrid
{worshipPerLocation.map(value => <MassTable key={value[0]} location={value[0]} masses={value[1]} />)} locations={worshipPerLocation.map(([name, masses]) => ({
</MassGrid> id: name,
name,
masses,
}))}
/>
</Section> </Section>
<Section padding={'small'}> <Section padding={'small'}>