-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Flattening "committees" page components (#170)
* first pass on flattening * extra comments, rename
- Loading branch information
Showing
21 changed files
with
201 additions
and
227 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 37 additions & 7 deletions
44
src/components/Committees/CommitteeSections/CommitteeSection.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,46 @@ | ||
| import React from 'react'; | ||
| import Body from './CommitteeSectionBody/CommitteeSectionBody'; | ||
| import Header from './CommitteeSectionHeader/CommitteeSectionHeader'; | ||
| import CommitteeEventCard from './CommitteeEventCard/CommitteeEventCard'; | ||
| import Intro from './CommitteeSectionIntro/CommitteeSectionIntro'; | ||
|
|
||
| function CommitteeSection(props) { | ||
| function CommitteeProjects({committee}) { | ||
| return ( | ||
| <div id={props.committee.class} className='committee-section'> | ||
| <Header committee={props.committee}/> | ||
| <Intro committee={props.committee}/> | ||
| <Body committee={props.committee}/> | ||
| <div className="body-wrapper"> | ||
| <h3 className="font-header text-bold text-25x">Events and Projects</h3> | ||
| <div className="card-container"> | ||
| {committee.infoCards.map((card) => { | ||
| // TODO: destructure class after renaming it | ||
| const { image, title, desc } = card; | ||
| return ( | ||
| <CommitteeEventCard | ||
| committee={committee.class} | ||
| image={image} | ||
| title={title} | ||
| desc={desc} | ||
| key={title} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function CommitteeSection(props) { | ||
| const { committee } = props; | ||
| // TODO: destructure committee after renaming the .class property | ||
| return ( | ||
| <div id={committee.class} className="committee-section"> | ||
| {/* Header image */} | ||
| {/* TODO: this could probably be a bit more accessible */} | ||
| <div className={`committee-header ${committee.class}`}> | ||
| <img src={committee.image} alt="committee logo" /> | ||
| </div> | ||
| {/* Committee Intro */} | ||
| <Intro committee={committee} /> | ||
| {/* Committee Body: events & projects */} | ||
| <CommitteeProjects committee={committee} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default CommitteeSection; |
26 changes: 0 additions & 26 deletions
26
src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeSectionBody.js
This file was deleted.
Oops, something went wrong.
21 changes: 0 additions & 21 deletions
21
src/components/Committees/CommitteeSections/CommitteeSectionBody/style.scss
This file was deleted.
Oops, something went wrong.
11 changes: 0 additions & 11 deletions
11
src/components/Committees/CommitteeSections/CommitteeSectionHeader/CommitteeSectionHeader.js
This file was deleted.
Oops, something went wrong.
6 changes: 0 additions & 6 deletions
6
src/components/Committees/CommitteeSections/CommitteeSectionHeader/style.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 0 additions & 13 deletions
13
src/components/Committees/CommitteeSections/CommitteeSections.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,37 @@ | ||
| import React from 'react'; | ||
| import Config from '../../config'; | ||
| import Banner from '../Banner/Banner'; | ||
| import CommitteeBanner from './CommitteesBanner/CommitteesBanner'; | ||
| import CommitteeSections from './CommitteeSections/CommitteeSections'; | ||
| import Navigation from './SidebarItem/SidebarItem'; | ||
| import CommitteeSection from './CommitteeSections/CommitteeSection'; | ||
| import Navigation from './Sidebar/Sidebar'; | ||
|
|
||
| function Sponsors() { | ||
| function CommitteesBanner() { | ||
| return ( | ||
| <div className="committee-banner-container"> | ||
| <div className="banner-main-content"> | ||
| <img src={process.env.PUBLIC_URL + '/images/acm_committees.png'} alt="the logos of all ACM committees" /> | ||
| <div className="info"> | ||
| <h1>Committees</h1> | ||
| <p className="half-size">ACM comprises eight committees, each serving a unique topic and mission. All of our events are open to everyone. We strive to cover all of our members’ interests and encourage members to explore new topics and events, too!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function CommitteesPage() { | ||
| const committees = Config.committees; | ||
| return ( | ||
| <div> | ||
| <Banner decorative /> | ||
| <Navigation committees={Config.committees} /> | ||
| <Navigation committees={committees} /> | ||
| <div className="page-content"> | ||
| <CommitteeBanner /> | ||
| <CommitteeSections committees={Config.committees}/> | ||
| <CommitteesBanner /> | ||
| <div className='committee-sections-container'> | ||
| {committees.map(committee => <CommitteeSection key={committee.name} committee={committee} />) } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Sponsors; | ||
| export default CommitteesPage; |
17 changes: 0 additions & 17 deletions
17
src/components/Committees/CommitteesBanner/CommitteesBanner.js
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.