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'
type MassGridProps = {
children: React.ReactNode
export type MassGridLocation = {
id: string
name: string
masses: Worship[]
}
export const MassGrid = ({ children }: MassGridProps) => {
return <div className={styles.container}>
<div className={styles.grid}>{children}</div>
</div>
type MassGridProps = {
locations: MassGridLocation[]
}
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>
)
}

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

@ -1,9 +1,9 @@
.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 {

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

@ -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;
}

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 { 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({
/>
<Section padding={'small'}>
<MassGrid>
{worshipPerLocation.map((value) => (
<MassTable
key={value[0]}
location={value[1].name}
masses={value[1].masses}
/>
))}
</MassGrid>
<MassGrid
locations={worshipPerLocation.map(([id, group]) => ({
id,
name: group.name,
masses: group.masses,
}))}
/>
</Section>
<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 { 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 = ({
/>
<Section padding={'small'}>
<MassGrid>
{worshipPerLocation.map(value => <MassTable key={value[0]} location={value[0]} masses={value[1]} />)}
</MassGrid>
<MassGrid
locations={worshipPerLocation.map(([name, masses]) => ({
id: name,
name,
masses,
}))}
/>
</Section>
<Section padding={'small'}>