From a510659d5e1d3b798422d3ceeaa30c2b52438c59 Mon Sep 17 00:00:00 2001 From: Matt Wang Date: Tue, 15 Jun 2021 01:19:01 -0700 Subject: [PATCH] Flattening "committees" page components (#170) * first pass on flattening * extra comments, rename --- src/App.scss | 7 +-- src/Base.scss | 38 +++++++++----- .../CommitteeEventCard/CommitteeEventCard.js | 2 +- .../CommitteeEventCard/style.scss | 5 +- .../CommitteeSections/CommitteeSection.js | 44 +++++++++++++--- .../CommitteeSectionBody.js | 26 ---------- .../CommitteeSectionBody/style.scss | 21 -------- .../CommitteeSectionHeader.js | 11 ---- .../CommitteeSectionHeader/style.scss | 6 --- .../CommitteeSectionIntro.js | 4 ++ .../CommitteeSections/CommitteeSections.js | 13 ----- src/components/Committees/Committees.js | 32 +++++++++--- .../CommitteesBanner/CommitteesBanner.js | 17 ------ .../Committees/CommitteesBanner/style.scss | 19 ------- src/components/Committees/Sidebar/Sidebar.js | 40 ++++++++++++++ .../{SidebarItem => Sidebar}/style.scss | 0 .../Committees/SidebarItem/CommiteeSidebar.js | 14 ----- .../Committees/SidebarItem/MobileNavItem.js | 19 ------- .../Committees/SidebarItem/SidebarItem.js | 38 -------------- src/components/Committees/style.scss | 52 +++++++++++++++++-- src/components/Navbar/Navbar.js | 20 ++++++- 21 files changed, 201 insertions(+), 227 deletions(-) rename src/components/Committees/CommitteeSections/{CommitteeSectionBody => }/CommitteeEventCard/CommitteeEventCard.js (87%) rename src/components/Committees/CommitteeSections/{CommitteeSectionBody => }/CommitteeEventCard/style.scss (91%) delete mode 100644 src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeSectionBody.js delete mode 100644 src/components/Committees/CommitteeSections/CommitteeSectionBody/style.scss delete mode 100644 src/components/Committees/CommitteeSections/CommitteeSectionHeader/CommitteeSectionHeader.js delete mode 100644 src/components/Committees/CommitteeSections/CommitteeSectionHeader/style.scss delete mode 100644 src/components/Committees/CommitteeSections/CommitteeSections.js delete mode 100644 src/components/Committees/CommitteesBanner/CommitteesBanner.js delete mode 100644 src/components/Committees/CommitteesBanner/style.scss create mode 100644 src/components/Committees/Sidebar/Sidebar.js rename src/components/Committees/{SidebarItem => Sidebar}/style.scss (100%) delete mode 100644 src/components/Committees/SidebarItem/CommiteeSidebar.js delete mode 100644 src/components/Committees/SidebarItem/MobileNavItem.js delete mode 100644 src/components/Committees/SidebarItem/SidebarItem.js diff --git a/src/App.scss b/src/App.scss index 00ccd860..83b0c5c2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,12 +4,9 @@ @import 'Base'; @import 'components/Navbar/style'; @import 'components/Committees/style'; -@import 'components/Committees/CommitteesBanner/style'; -@import 'components/Committees/SidebarItem/style'; -@import 'components/Committees/CommitteeSections/CommitteeSectionHeader/style'; +@import 'components/Committees/Sidebar/style'; @import 'components/Committees/CommitteeSections/CommitteeSectionIntro/style'; -@import 'components/Committees/CommitteeSections/CommitteeSectionBody/style'; -@import 'components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style'; +@import 'components/Committees/CommitteeSections/CommitteeEventCard/style'; @import 'components/Button/style'; @import 'components/Banner/style'; @import 'components/Home/style'; diff --git a/src/Base.scss b/src/Base.scss index 4eb69d35..2a723620 100644 --- a/src/Base.scss +++ b/src/Base.scss @@ -5,62 +5,74 @@ $acm-cobalt: #1E6CFF; $acm-black: #181818; $acm-tint: #3DA2FF; - + $hack-purple: #C960FF; $hack-black: #262938; $hack-tint: #C137D8; - + $w-teal: #1BC3A9; $w-black: #233431; $w-tint: #56E4B1; - + $icpc-tangerine: #FF8383; $icpc-black: #3A2B2B; $icpc-tint: #F38F70; - + $ai-arctic: #28B2FF; $ai-black: #233339; $ai-tint: #35DDF3; - + $studio-raspberry: #FB4469; $studio-black: #39272B; $studio-tint: #FF8C93; - + $cyber-amber: #FFCB44; $cyber-black: #3A3327; $cyber-tint: #FFE81A; - + $design-orange: #FE8D3C; $design-black: #372B25; $design-tint: #FFAC30; - + $teachla-green: #5EDA12; $teachla-black: #2C3022; $teachla-tint: #B0EE00; - + $font-display: 'Poppins', 'Helvetica Neue', 'Helvetica', sans-serif; $font-header: 'Poppins', sans-serif; $font-body: 'Open Sans', sans-serif; - + $font-primary-color: #333; $font-secondary-color: #777; $navbar-breakpoint: 1160px; - + body { color: $font-primary-color; font-family: $font-body; margin: 0; padding: 0; } - + .app-container { display: flex; flex-direction: column; min-height: 100vh; } - + .main-container { flex: 1 0 auto; margin-top: 70px; //To account for height of Navbar, which uses fixed positioning } + +.font-header { + font-family: $font-header; +} + +.text-bold { + font-weight: bold; +} + +.text-25x { + font-size: 2.5em !important; +} diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/CommitteeEventCard.js b/src/components/Committees/CommitteeSections/CommitteeEventCard/CommitteeEventCard.js similarity index 87% rename from src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/CommitteeEventCard.js rename to src/components/Committees/CommitteeSections/CommitteeEventCard/CommitteeEventCard.js index a0806bf9..7cfded0d 100644 --- a/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/CommitteeEventCard.js +++ b/src/components/Committees/CommitteeSections/CommitteeEventCard/CommitteeEventCard.js @@ -8,7 +8,7 @@ function CommitteeEventCard(props) { ? {props.image.alt} : {props.image.alt} } -

{props.title}

+

{props.title}

{props.desc} ); diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style.scss b/src/components/Committees/CommitteeSections/CommitteeEventCard/style.scss similarity index 91% rename from src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style.scss rename to src/components/Committees/CommitteeSections/CommitteeEventCard/style.scss index 53ecb59c..3a93a8d9 100644 --- a/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style.scss +++ b/src/components/Committees/CommitteeSections/CommitteeEventCard/style.scss @@ -4,13 +4,14 @@ flex-direction: column; margin: 0 1% 2rem; text-align: left; - + img { height: 160px; object-fit: cover; } - h2 { + h4 { + font-size: 1.4em; margin: 20px 10px 20px 0; } diff --git a/src/components/Committees/CommitteeSections/CommitteeSection.js b/src/components/Committees/CommitteeSections/CommitteeSection.js index 2cbfbeee..47a1e861 100644 --- a/src/components/Committees/CommitteeSections/CommitteeSection.js +++ b/src/components/Committees/CommitteeSections/CommitteeSection.js @@ -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 ( -
-
- - +
+

Events and Projects

+
+ {committee.infoCards.map((card) => { + // TODO: destructure class after renaming it + const { image, title, desc } = card; + return ( + + ); + })} +
); } +function CommitteeSection(props) { + const { committee } = props; + // TODO: destructure committee after renaming the .class property + return ( +
+ {/* Header image */} + {/* TODO: this could probably be a bit more accessible */} +
+ committee logo +
+ {/* Committee Intro */} + + {/* Committee Body: events & projects */} + +
+ ); +} + export default CommitteeSection; diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeSectionBody.js b/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeSectionBody.js deleted file mode 100644 index f12a4605..00000000 --- a/src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeSectionBody.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import CommitteeEventCard from './CommitteeEventCard/CommitteeEventCard'; - -function CommitteeSectionBody(props){ - return ( -
-

Events and Projects

-
- { props.committee.infoCards.map(card => { - const {image, title, desc} = card; - return ; - }) - } -
-
- ); -} - -export default CommitteeSectionBody; diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionBody/style.scss b/src/components/Committees/CommitteeSections/CommitteeSectionBody/style.scss deleted file mode 100644 index 1c546e76..00000000 --- a/src/components/Committees/CommitteeSections/CommitteeSectionBody/style.scss +++ /dev/null @@ -1,21 +0,0 @@ -.body-wrapper { - margin: 50px 0 40px; - - h1 { - font-size: 1.5em; - margin: 40px 0 30px; - } - - .card-container { - display: flex; - flex-wrap: wrap; - } - - @media (min-width: 688px) { - h1 { - font-size: 2em; - margin: 0 0 30px; - } - } -} - diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionHeader/CommitteeSectionHeader.js b/src/components/Committees/CommitteeSections/CommitteeSectionHeader/CommitteeSectionHeader.js deleted file mode 100644 index dec0c69a..00000000 --- a/src/components/Committees/CommitteeSections/CommitteeSectionHeader/CommitteeSectionHeader.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -function CommitteeSectionHeader(props) { - return ( -
- committee logo -
- ); -} - -export default CommitteeSectionHeader; diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionHeader/style.scss b/src/components/Committees/CommitteeSections/CommitteeSectionHeader/style.scss deleted file mode 100644 index 4f7c6c13..00000000 --- a/src/components/Committees/CommitteeSections/CommitteeSectionHeader/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -.committee-header { - img { - box-shadow: none; - } - -} diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js b/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js index a0c3f93b..f0a98eda 100644 --- a/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js +++ b/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js @@ -25,6 +25,7 @@ function CommitteeIconLink({committee, link}) { ); } +// TODO: down the line, this can be refactored into a utility! function CommitteeIcon({platform}) { // see https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility#web-fonts-semantic // for more on accessibility @@ -45,10 +46,12 @@ function CommitteeIcon({platform}) { } } +// TODO: props destructuring function CommitteeSectionIntro(props) { return (
+ {/* TODO: this should have an alt tag */}

{props.committee.introImageDesc}

@@ -62,6 +65,7 @@ function CommitteeSectionIntro(props) { )}
+ {/* TODO: we can easily refactor this with the above .show-mobile to reduce code dupe */}

{props.committee.introImageDesc}

diff --git a/src/components/Committees/CommitteeSections/CommitteeSections.js b/src/components/Committees/CommitteeSections/CommitteeSections.js deleted file mode 100644 index a8796827..00000000 --- a/src/components/Committees/CommitteeSections/CommitteeSections.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import CommitteeSection from './CommitteeSection'; - -function CommitteeSections(props) { - return ( -
- { props.committees.map(committee => ) } -
- ); -} - -export default CommitteeSections; diff --git a/src/components/Committees/Committees.js b/src/components/Committees/Committees.js index afd42ab6..e6db4b39 100644 --- a/src/components/Committees/Committees.js +++ b/src/components/Committees/Committees.js @@ -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 ( +
+
+ the logos of all ACM committees +
+

Committees

+

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!

+
+
+
+ ); +} + +function CommitteesPage() { + const committees = Config.committees; return (
- +
- - + +
+ {committees.map(committee => ) } +
); } -export default Sponsors; +export default CommitteesPage; diff --git a/src/components/Committees/CommitteesBanner/CommitteesBanner.js b/src/components/Committees/CommitteesBanner/CommitteesBanner.js deleted file mode 100644 index 59b6321a..00000000 --- a/src/components/Committees/CommitteesBanner/CommitteesBanner.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -function CommitteesBanner() { - return ( -
-
- the logos of all ACM committees -
-

Committees

-

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!

-
-
-
- ); -} - -export default CommitteesBanner; diff --git a/src/components/Committees/CommitteesBanner/style.scss b/src/components/Committees/CommitteesBanner/style.scss deleted file mode 100644 index 4958793e..00000000 --- a/src/components/Committees/CommitteesBanner/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.committee-banner-container { - h1 { - font-size: 2.5em; - margin: 10px 0; - } - - img { - box-shadow: none; - } - - @media (min-width: 688px) { - margin-top: -20px; - min-height: 500px; - - p { - font-size: 1em; - } - } -} diff --git a/src/components/Committees/Sidebar/Sidebar.js b/src/components/Committees/Sidebar/Sidebar.js new file mode 100644 index 00000000..1d3dc7b2 --- /dev/null +++ b/src/components/Committees/Sidebar/Sidebar.js @@ -0,0 +1,40 @@ +import React, { useState } from 'react'; + +function SidebarLink(props){ + return ( + + {`Logo + + ); +} + +function Sidebar(props){ + // TODO: this is a side effect, it needs to be done with useEffect and should be cleaned up + + // Check if user has scrolled to the bottom of the page + const [bottom, setBottom] = useState(false); + window.onscroll = function() { + const difference = document.documentElement.scrollHeight - window.innerHeight; + const scrollposition = document.documentElement.scrollTop; + setBottom(difference - scrollposition <= 180); + }; + + + // Don't display sidebar if user has scrolled to the bottom of the screen + if (bottom) { + return null; + } + + return ( +
+ {props.committees.map( + committee => , + )} +
+ ); +} + +export default Sidebar; diff --git a/src/components/Committees/SidebarItem/style.scss b/src/components/Committees/Sidebar/style.scss similarity index 100% rename from src/components/Committees/SidebarItem/style.scss rename to src/components/Committees/Sidebar/style.scss diff --git a/src/components/Committees/SidebarItem/CommiteeSidebar.js b/src/components/Committees/SidebarItem/CommiteeSidebar.js deleted file mode 100644 index 14421886..00000000 --- a/src/components/Committees/SidebarItem/CommiteeSidebar.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -function CommitteeSidebar(props){ - return ( - - {`Logo - - ); -} - -export default CommitteeSidebar; diff --git a/src/components/Committees/SidebarItem/MobileNavItem.js b/src/components/Committees/SidebarItem/MobileNavItem.js deleted file mode 100644 index 452a8ee6..00000000 --- a/src/components/Committees/SidebarItem/MobileNavItem.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import {NavHashLink} from 'react-router-hash-link'; - -function MobileNavItem() { - return ( - - ); -} - -export default MobileNavItem; diff --git a/src/components/Committees/SidebarItem/SidebarItem.js b/src/components/Committees/SidebarItem/SidebarItem.js deleted file mode 100644 index 9e162b30..00000000 --- a/src/components/Committees/SidebarItem/SidebarItem.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useState } from 'react'; -import CommitteeSidebar from './CommiteeSidebar'; - -function SidebarItem(props){ - - // Check if user has scrolled to the bottom of the page - const [bottom, setBottom] = useState(false); - window.onscroll = function() - { - var difference = document.documentElement.scrollHeight - window.innerHeight; - var scrollposition = document.documentElement.scrollTop; - - if (difference - scrollposition <= 180) - { - setBottom(true); - } - else - { - setBottom(false); - } - }; - - - if (bottom) // Don't display sidebar if user has scrolled to the bottom of the screen - { - return null; - } - - return ( -
- {props.committees.map( - committee => , - )} -
- ); -} - -export default SidebarItem; diff --git a/src/components/Committees/style.scss b/src/components/Committees/style.scss index ef124edc..374631ae 100644 --- a/src/components/Committees/style.scss +++ b/src/components/Committees/style.scss @@ -20,11 +20,6 @@ margin: 30px 0 20px; } - h3 { - font-size: 1.2em; - margin: 20px; - } - p { font-family: $font-body; font-size: 1em; @@ -49,3 +44,50 @@ padding: 0 60px; } } + +.committee-header { + img { + box-shadow: none; + } +} + +.body-wrapper { + margin: 50px 0 40px; + + h1 { + font-size: 1.5em; + margin: 40px 0 30px; + } + + .card-container { + display: flex; + flex-wrap: wrap; + } + + @media (min-width: 688px) { + h1 { + font-size: 2em; + margin: 0 0 30px; + } + } +} + +.committee-banner-container { + h1 { + font-size: 2.5em; + margin: 10px 0; + } + + img { + box-shadow: none; + } + + @media (min-width: 688px) { + margin-top: -20px; + min-height: 500px; + + p { + font-size: 1em; + } + } +} diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 2e25242d..7b6bf9b0 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -1,12 +1,28 @@ import React from 'react'; -import {NavLink} from 'react-router-dom'; -import MobileNavItem from '../Committees/SidebarItem/MobileNavItem'; +import { NavLink } from 'react-router-dom'; +import { NavHashLink } from 'react-router-hash-link'; // import gmData from '../../config/gmData'; //to allow GM page to be visible on the navbar and accessible //uncomment the above import line "import gmData from '../../config/gmData';" to get quarter from the gmData page //uncomment the two lines saying "/*
  • {gmData.date.quarter} gm
    •  */" +function MobileNavItem() { + return ( + + ); +} + + export default class Navbar extends React.Component { constructor(props) { super(props);