Skip to content
This repository has been archived by the owner on Jan 3, 2025. It is now read-only.

Commit

Permalink
Competition info grid alignment (#367)
Browse files Browse the repository at this point in the history 
* Separate information grid into own component

and minor formatting

* Partially de-duplicate; correct column widths

on all screen sizes

* De-duplicate person list code

and remove comma from link

* Handle no-competitor-limit case in info

* Move info grid to own file

and minor formatting

* fix eslint

---------

Co-authored-by: FinnIckler <finnickler@gmail.com>
  • Loading branch information
@kr-matthews @FinnIckler
kr-matthews and FinnIckler authored Dec 4, 2023
1 parent 4663fc0 commit 7ce1487
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 89 deletions.
128 changes: 128 additions & 0 deletions Frontend/src/pages/home/InfoGrid.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { marked } from 'marked'
import moment from 'moment'
import React, { Fragment } from 'react'
import { Grid, Header } from 'semantic-ui-react'
import styles from './index.module.scss'

export default function InfoGrid({ competitionInfo }) {
return (
<Grid columns={2}>
<InfoGridRow>
<InfoGridHeader>Date</InfoGridHeader>
<InfoGridHeader>
{competitionInfo.start_date === competitionInfo.end_date
? `${moment(competitionInfo.start_date).format('ll')}`
: `${moment(competitionInfo.start_date).format('ll')} to ${moment(
competitionInfo.end_date
).format('ll')}`}
</InfoGridHeader>
</InfoGridRow>

<InfoGridRow>
<InfoGridHeader>City</InfoGridHeader>
<InfoGridHeader>
{competitionInfo.city}, {competitionInfo.country_iso2}
</InfoGridHeader>
</InfoGridRow>

<InfoGridRow>
<InfoGridHeader>Venue</InfoGridHeader>
<InfoGridHeader>
<p
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.venue),
}}
/>
</InfoGridHeader>
</InfoGridRow>

<InfoGridRow>
<InfoGridHeader color="grey">Address</InfoGridHeader>
<InfoGridHeader color="grey">
{competitionInfo.venue_address}
</InfoGridHeader>
</InfoGridRow>

{competitionInfo.venue_details && (
<InfoGridRow>
<InfoGridHeader color="grey">Details</InfoGridHeader>
<InfoGridHeader color="grey">
{competitionInfo.venue_details}
</InfoGridHeader>
</InfoGridRow>
)}

<InfoGridRow>
<InfoGridHeader>Competitor Limit</InfoGridHeader>
<InfoGridHeader>
{competitionInfo.competitor_limit ?? 'None'}
</InfoGridHeader>
</InfoGridRow>

<InfoGridRow>
<InfoGridHeader>Contact</InfoGridHeader>
<InfoGridHeader>
{competitionInfo.contact ? (
<span
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.contact),
}}
/>
) : (
<a
href={`https://www.worldcubeassociation.org/contact/website?competitionId=${competitionInfo.id}`}
>
Organization Team
</a>
)}
</InfoGridHeader>
</InfoGridRow>

<InfoGridRow>
<InfoGridHeader>Organizers</InfoGridHeader>
<InfoGridHeader>
<PersonList people={competitionInfo.organizers} />
</InfoGridHeader>
</InfoGridRow>

<InfoGridRow>
<InfoGridHeader>Delegates</InfoGridHeader>
<InfoGridHeader>
<PersonList people={competitionInfo.delegates} />
</InfoGridHeader>
</InfoGridRow>
</Grid>
)
}

function InfoGridRow({ children }) {
return (
<Grid.Row>
<Grid.Column computer={3} tablet={5} mobile={5}>
{children[0]}
</Grid.Column>
<Grid.Column computer={12} tablet={10} mobile={10}>
{children[1]}
</Grid.Column>
</Grid.Row>
)
}

function InfoGridHeader({ color, children }) {
return (
<Header className={styles.informationHeader} color={color}>
{children}
</Header>
)
}

function PersonList({ people }) {
return people.map((person, index) => (
<Fragment key={person.id}>
{index > 0 && ', '}
<a href={`${process.env.WCA_URL}/persons/${person.wca_id}`}>
{person.name}
</a>
</Fragment>
))
}
98 changes: 9 additions & 89 deletions Frontend/src/pages/home/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@ import { UiIcon } from '@thewca/wca-components'
import { marked } from 'marked'
import moment from 'moment'
import React, { useContext } from 'react'
import { Container, Grid, Header, Segment } from 'semantic-ui-react'
import { Container, Header, Segment } from 'semantic-ui-react'
import { CompetitionContext } from '../../api/helper/context/competition_context'
import RegistrationRequirements from '../register/components/RegistrationRequirements'
import styles from './index.module.scss'
import InfoGrid from './InfoGrid'

export default function HomePage() {
const { competitionInfo } = useContext(CompetitionContext)

return (
<Container>
<div>
<RegistrationRequirements />
</div>

{competitionInfo.information && (
<div>
<Header as="h3">Information:</Header>
Expand All @@ -25,6 +28,7 @@ export default function HomePage() {
/>
</div>
)}

<Header as="h3">
Registration Period:
<Header.Subheader>
Expand All @@ -39,95 +43,10 @@ export default function HomePage() {
).calendar()}`}
</Header.Subheader>
</Header>

<Segment padded attached>
<Grid>
<Grid.Column width={3}>
<Header className={styles.informationHeader}>Date</Header>
<Header className={styles.informationHeader}>City</Header>
<Header className={styles.informationHeader}>Venue</Header>
<Header className={styles.informationHeader} color="grey">
Address
</Header>
{competitionInfo.venue_details && (
<Header className={styles.informationHeader} color="grey">
Details
</Header>
)}
<Header className={styles.informationHeader}>
Competitor Limit
</Header>
<Header className={styles.informationHeader}>Contact</Header>
<Header className={styles.informationHeader}>Organizers</Header>
<Header className={styles.informationHeader}>Delegates</Header>
</Grid.Column>
<Grid.Column width={12}>
<Header className={styles.informationHeader}>
{competitionInfo.start_date === competitionInfo.end_date
? `${moment(competitionInfo.start_date).format('ll')}`
: `${moment(competitionInfo.start_date).format(
'll'
)} to ${moment(competitionInfo.end_date).format('ll')}`}
</Header>
<Header className={styles.informationHeader}>
{competitionInfo.city}, {competitionInfo.country_iso2}
</Header>
<Header className={styles.informationHeader}>
<p
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.venue),
}}
/>
</Header>
<Header className={styles.informationHeader} color="grey">
{competitionInfo.venue_address}
</Header>
{competitionInfo.venue_details && (
<Header className={styles.informationHeader} color="grey">
{competitionInfo.venue_details}
</Header>
)}
<Header className={styles.informationHeader}>
{competitionInfo.competitor_limit}
</Header>
<Header className={styles.informationHeader}>
{competitionInfo.contact ? (
<span
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.contact),
}}
/>
) : (
<a
href={`https://www.worldcubeassociation.org/contact/website?competitionId=${competitionInfo.id}`}
>
Organization Team
</a>
)}
</Header>
<Header className={styles.informationHeader}>
{competitionInfo.organizers.map((organizer, index) => (
<a
key={`competition-organizer-${organizer.id}`}
href={`${process.env.WCA_URL}/persons/${organizer.wca_id}`}
>
{organizer.name}
{index !== competitionInfo.organizers.length - 1 ? ', ' : ''}
</a>
))}
</Header>
<Header className={styles.informationHeader}>
{competitionInfo.delegates.map((delegate, index) => (
<a
key={`competition-organizer-${delegate.id}`}
href={`${process.env.WCA_URL}/persons/${delegate.wca_id}`}
>
{delegate.name}
{index !== competitionInfo.delegates.length - 1 ? ', ' : ''}
</a>
))}
</Header>
</Grid.Column>
</Grid>
<InfoGrid competitionInfo={competitionInfo} />

<Header className={styles.informationHeader}>
<UiIcon name="print" />
<Header.Content>
Expand All @@ -140,6 +59,7 @@ export default function HomePage() {
</Header.Content>
</Header>
</Segment>

<Header attached="bottom" textAlign="center" as="h2">
The Competition has been bookmarked{' '}
{competitionInfo.number_of_bookmarks} times
Expand Down

0 comments on commit 7ce1487

Please sign in to comment.