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

Commit

Permalink
Move custom components to Semantic (#294)
Browse files Browse the repository at this point in the history 
* Move Competition Box to Semantic

* Make PermissionsMessage more flexible

* Move RegistrationRequirements to Semantic

* Move Home Info Box to Semantic

* Move registration requirements to accordion

* Add periods to Registration Requirements

* Delete unncessary css

* Make text slightly bigger

* Move Processing to Modal

* Make Tabs not overflow

* Extract Logo out of Information and put it in the corner
  • Loading branch information
@FinnIckler
FinnIckler authored Oct 29, 2023
1 parent 95a9a68 commit e40c677
Show file tree
Hide file tree
Showing 19 changed files with 384 additions and 357 deletions.
4 changes: 0 additions & 4 deletions Frontend/src/api/auth/get_permissions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,3 @@ export async function getPermissions(): Promise<Permissions> {
}
return getPermissionsMock()
}

// TODO: move these to I18n
export const CAN_ADMINISTER_COMPETITIONS = 'Can Administer Competitions'
export const CAN_ATTEND_COMPETITIONS = 'Can attend Competitions'
1 change: 1 addition & 0 deletions Frontend/src/api/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ interface CompetitionInfo {
'on_the_spot_registration': boolean
'on_the_spot_entry_fee_lowest_denomination': string
'extra_registration_requirements': string
'guests_entry_fee_lowest_denomination': number
'url': string
'website': string
'short_name': string
Expand Down
205 changes: 100 additions & 105 deletions Frontend/src/pages/home/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,33 @@
import { UiIcon } from '@thewca/wca-components'
import { marked } from 'marked'
import moment from 'moment'
import React, { useContext, useState } from 'react'
import { Button } from 'semantic-ui-react'
import React, { useContext } from 'react'
import { Container, Grid, 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'

export default function HomePage() {
const { competitionInfo } = useContext(CompetitionContext)
const [showAllRequirements, setShowAllRequirements] = useState(false)
return (
<div className={styles.homeContainer}>
<div className={styles.requirements}>
<div>Registration Requirements:</div>
<div>[INSERT ORGANIZER MESSAGE REGARDING REQUIREMENTS]</div>
{showAllRequirements && <RegistrationRequirements />}
<div>
<Button onClick={() => setShowAllRequirements(!showAllRequirements)}>
View All
</Button>
</div>
<Container>
<div>
<RegistrationRequirements />
</div>
{competitionInfo.information && (
<div className={styles.information}>
<div className={styles.informationHeader}>Information:</div>
<div>
<Header as="h3">Information:</Header>
<div
className={styles.informationText}
className={styles.information}
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.information),
}}
/>
</div>
)}
<div className={styles.registrationPeriod}>
<div className={styles.registrationHeader}>Registration Period:</div>
<div className={styles.registrationPeriodText}>
<Header as="h3">
Registration Period:
<Header.Subheader>
{new Date(competitionInfo.registration_open) < new Date()
? `Registration opened ${moment(
competitionInfo.registration_open
Expand All @@ -45,98 +37,101 @@ export default function HomePage() {
: `Registration will open ${moment(
competitionInfo.registration_open
).calendar()}`}
</div>
</div>
<div className={styles.details}>
<div>
<span className={styles.detailHeader}>Date: </span>
{moment(competitionInfo.start_date).format('ll')}
</div>
<div>
<span className={styles.detailHeader}>Start Time: </span>
XX:XX PM
</div>
<div>
<span className={styles.detailHeader}>City: </span>
{competitionInfo.city}, {competitionInfo.country_iso2}
</div>
<div>
<span className={styles.detailHeader}>Venue: </span>
<span
dangerouslySetInnerHTML={{ __html: marked(competitionInfo.venue) }}
/>
<ul>
<li>
<span className={styles.detailHeader}>Address: </span>
{competitionInfo.venue_address}
</li>
</Header.Subheader>
</Header>
<Segment padded attached>
<Grid>
<Grid.Column width={3}>
<Header>Date</Header>
<Header>City</Header>
<Header>Venue</Header>
<Header color="grey">Address</Header>
{competitionInfo.venue_details && (
<li>
<span className={styles.detailHeader}>Details: </span>
{competitionInfo.venue_details}
</li>
<Header color="grey">Details</Header>
)}
</ul>
</div>
<div>
<span className={styles.detailHeader}>Competitor Limit: </span>
{competitionInfo.competitor_limit}
</div>
<div>
<span className={styles.detailHeader}>Contact: </span>
{competitionInfo.contact ? (
<span
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.contact),
}}
/>
) : (
<a
href={`https://www.worldcubeassociation.org/contact/website?competitionId=${competitionInfo.id}`}
className={styles.delegateLink}
>
Organization Team
</a>
)}
</div>
<div>
<span className={styles.detailHeader}>Organizers: </span>
{competitionInfo.organizers.map((organizer) => (
<a
key={`competition-organizer-${organizer.id}`}
href={`mailto:${organizer.email}`}
className={styles.delegateLink}
>
{organizer.name}
</a>
))}
</div>
<div>
<span className={styles.detailHeader}>Delegates: </span>
{competitionInfo.delegates.map((delegate) => (
<Header>Competitor Limit</Header>
<Header>Contact</Header>
<Header>Organizers</Header>
<Header>Delegates</Header>
</Grid.Column>
<Grid.Column width={12}>
<Header>
{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>
{competitionInfo.city}, {competitionInfo.country_iso2}
</Header>
<Header>
<p
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.venue),
}}
/>
</Header>
<Header color="grey">{competitionInfo.venue_address}</Header>
{competitionInfo.venue_details && (
<Header color="grey">{competitionInfo.venue_details}</Header>
)}
<Header>{competitionInfo.competitor_limit}</Header>
<Header>
{competitionInfo.contact ? (
<span
dangerouslySetInnerHTML={{
__html: marked(competitionInfo.contact),
}}
/>
) : (
<a
href={`https://www.worldcubeassociation.org/contact/website?competitionId=${competitionInfo.id}`}
>
Organization Team
</a>
)}
</Header>
<Header>
{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>
{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>
<Header>
<UiIcon name="print" />
<Header.Content>
Download all of the competitions details as a PDF{' '}
<a
key={`competition-organizer-${delegate.id}`}
href={`mailto:${delegate.email}`}
className={styles.delegateLink}
href={`https://www.worldcubeassociation.org/competitions/${competitionInfo.id}.pdf`}
>
{delegate.name}
here
</a>
))}
</div>
<div>
<UiIcon name="print" /> Download all of the competitions details as a
PDF{' '}
<a
href={`https://www.worldcubeassociation.org/competitions/${competitionInfo.id}.pdf`}
>
here
</a>
</div>
</div>
<div className={styles.bookmarked}>
</Header.Content>
</Header>
</Segment>
<Header attached="bottom" textAlign="center" as="h2">
The Competition has been bookmarked{' '}
{competitionInfo.number_of_bookmarks} times
</div>
</div>
</Header>
</Container>
)
}
63 changes: 4 additions & 59 deletions Frontend/src/pages/home/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,6 @@
@import '../../style/font-sizes';
@import '../../style/margins';
@import '../../style/colors';
.information{
font-size: $sub-header-size;
line-height: 1.3em;
padding: 30px;
.information-header{
margin-bottom: $double-margin;
font-weight: bold;
font-size: 1.1em;
img{
display: none;
}
}
.home-container{
padding: 20px;
}
.registration-period{
font-size: $sub-header-size;
line-height: 1.3em;
padding: 0 30px 30px;
.registration-header{
margin-bottom: $double-margin;
font-weight: bold;
}
}
.bookmarked{
text-align: center;
font-size: $sub-header-size;
margin-top: $double-margin;
}
.requirements{
font-weight: 500;
font-size: $sub-header-size;
background-color: $requirements-red;
border-radius: 28px;
padding: 30px;
width: 90%;
line-height: 3em;
}
.details{
font-size: $sub-header-size;
line-height: $header-size;
background-color: #EBEBEB;
margin-top: $triple-margin;
border-radius: 28px;
padding: 30px;
ul{
margin: 0;
}
.detailHeader{
font-weight: bold;
}
p{
display: inline;
}
.delegateLink{
margin-right: $single-margin;
&::after{
content: ',';
}
}
}
}
2 changes: 1 addition & 1 deletion Frontend/src/pages/register/components/CompetingStep.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function CompetingStep({ nextStep }) {
/>
</div>
)}
<div className={processing ? styles.panelProcessing : styles.panel}>
<div className={styles.panel}>
{registration.registration_status ? (
<>
<div className={styles.registrationGreeting}>
Expand Down
15 changes: 6 additions & 9 deletions Frontend/src/pages/register/components/Processing.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query'
import React, { useContext, useEffect, useState } from 'react'
import { Message } from 'semantic-ui-react'
import { Message, Modal } from 'semantic-ui-react'
import { CompetitionContext } from '../../../api/helper/context/competition_context'
import { UserContext } from '../../../api/helper/context/user_context'
import { pollRegistrations } from '../../../api/registration/get/poll_registrations'
Expand Down Expand Up @@ -29,23 +29,20 @@ export default function Processing({ onProcessingComplete }) {
}
}, [data, onProcessingComplete])
return (
<div>
<div>Your registration is processing...</div>
<div>{data && `Registration status: ${data.status.competing}`}</div>
<div>
<Modal dimmer="blurring">
<Modal.Header>Your registration is processing...</Modal.Header>
<Modal.Content>
{pollCounter > 3 && (
<Message warning>
Processing is taking longer than usual, don't go away!
</Message>
)}
</div>
<div>
{data && data.queueCount > 500 && (
<Message warning>
Lots of Registrations being processed, hang tight!
</Message>
)}
</div>
</div>
</Modal.Content>
</Modal>
)
}
Loading

0 comments on commit e40c677

Please sign in to comment.