-
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.
rework footer: overhaul CSS, link to all pages on site (#236)
This PR does two main things:
1. swaps out the footer CSS to be module'd, use grid in favor of fixed-width spacing, and uses classes instead of nested specificity
* this comes with the added benefit of increasing accessibility, since we're relying on less hacky positioning!
2. adds links to the footer - every single page under the "ACM" category, and a link to each committee
* under evan's suggestion, I've converted each committee link to a dark version of their logo + wordmark, to add some flair!
Motivating goals for adding the links to the footer:
1. as we add new pages (Impact, JEDI, etc.) we need to put them somewhere - and the navbar is quite a bit of work!
2. for the Tech Gala page, there's no way to get to it other than the homepage alert banner
3. the current flow to get to a committee's website is always 2+ clicks from the homepage, which seems bad
4. this is typical practice (I personally always scroll down to footers to find relevant links)
Some comments I'll make:
* ~~I kinda dislike how the links align, but a simple left/right text align looks even worse~~
* ~~how often do the footer links change? we may want to plop this into a data file~~
* when we add JEDI/Impact/w.e, where should they go? I'm thinking a new section under ACM called "Events and Initiatives", and we can bundle tech gala in there as well
* ~~are there any spacing issues and/or mobile view things I should look into fixing?~~
* added an extra util
Inadvertently part of #191.- Loading branch information
Showing
14 changed files
with
440 additions
and
107 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,91 @@ | ||
| import Link from 'next/link'; | ||
| import React from 'react'; | ||
| import committees from '../data/committees'; | ||
| import styles from '../styles/components/Footer.module.scss'; | ||
| import SocialMedia from './SocialMedia'; | ||
|
|
||
| // TODO: add GM? | ||
| const footerACMLinks = [ | ||
| { title: 'About', path: '/about' }, | ||
| { title: 'Committees', path: '/committees' }, | ||
| { title: 'Events', path: '/events' }, | ||
| { title: 'Sponsors', path: '/sponsors' }, | ||
| { title: 'Tech Gala', path: '/techgala' }, | ||
| { title: 'Membership Portal', path: 'https://members.uclaacm.com', ext: true }, | ||
| ]; | ||
|
|
||
| function FooterLinkElement({ title, path, ext }){ | ||
| return ( | ||
| <Link href={path}> | ||
| <a className={styles['link-footer']} target={ext ? '_blank': ''} rel={ext ? 'noopener noreferrer' : ''}>{title}</a> | ||
| </Link> | ||
| ); | ||
| } | ||
|
|
||
| function Footer(){ | ||
| return ( | ||
| <footer id="footer"> | ||
| <div id="footer-inner"> | ||
| <div id="footer-items"> | ||
| <div className="footer-item"> | ||
| <h3>Find us on social media</h3> | ||
| <footer className={styles.footer}> | ||
| <nav className={styles['footer-inner']} aria-labelledby="footer-navigation"> | ||
| <h2 className="sr-only" id="footer-navigation">Footer Navigation</h2> | ||
| <div className="grid-desktop-3"> | ||
| <div> | ||
| <h3 className={styles['footer-header']}>Find us on social media</h3> | ||
| <SocialMedia type="light"/> | ||
| <div className="mt-1"> | ||
| <Link href="http://eepurl.com/c5pE6P"> | ||
| <a className="button tight" target="_blank" rel="noreferrer noopener"> | ||
| Join our Mailing List | ||
| </a> | ||
| </Link> | ||
| </div> | ||
| <p className={styles['footer-header']}>Reach us at</p> | ||
| <a className={styles['link-footer']} href="mailto: [email protected]"><span className="footer-text">[email protected]</span></a> | ||
| </div> | ||
| <div className="footer-item"> | ||
| <h3>Reach us at</h3> | ||
| <a href="mailto: [email protected]" className="email"><span className="footer-text">[email protected]</span></a> | ||
| <div> | ||
| <h3 className={styles['footer-header']}>About ACM at UCLA</h3> | ||
| <ul className='list-unstyled'> | ||
| { | ||
| footerACMLinks.map((link) => <li key={link.path}><FooterLinkElement {...link} /></li>) | ||
| } | ||
| </ul> | ||
| {/* TODO: consider where to put impact/jedi! events & initiatives? */} | ||
| </div> | ||
| {/* the paddingTop is a magic number that replaces a | ||
| previous empty <h3> tag previously used for spacing. should be replaced later. | ||
| */} | ||
| <div className="footer-item" style={{paddingTop: '28px'}}> | ||
| <Link href="http://eepurl.com/c5pE6P"> | ||
| <a className="button tight" target="_blank" rel="noreferrer noopener"> | ||
| Join our Mailing List | ||
| </a> | ||
| </Link> | ||
| <div> | ||
| <h3 className={styles['footer-header']}>Committees</h3> | ||
| <ul className={`list-unstyled text-left ${styles['footer-committee-sidebar-container']}`}> | ||
| { | ||
| committees.map(({name, slug, external_link, wordmark_dark}) => { | ||
| const path = external_link ? external_link : `/committees#${slug}`; | ||
| return ( | ||
| <> | ||
| <li key={slug} className={styles['display-inline']}> | ||
| <FooterLinkElement | ||
| path={path} | ||
| /* TODO: resolve 404 with <Image /> component */ | ||
| /* eslint-disable-next-line @next/next/no-img-element */ | ||
| title={<img className='committee-sidebar-image' src={wordmark_dark} alt={`ACM ${name}`} />} | ||
| ext={external_link} | ||
| /> | ||
| </li> | ||
| <br /> | ||
| </> | ||
| ); | ||
| }) | ||
| } | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div id="netlify-badge"> | ||
| <div className="mt-1"> | ||
| <a href="https://www.netlify.com" target="_BLANK" rel="noopener noreferrer"> | ||
| {/* TODO: resolve 404 with <Image /> component */} | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img src="https://www.netlify.com/img/global/badges/netlify-light.svg" alt="Deploys by Netlify" /> | ||
| </a> | ||
| </div> | ||
| <div id="footer-bottom"> | ||
| <span className="footer-text">© ACM at UCLA 2021.</span> | ||
| <div> | ||
| <span className={styles['footer-text-thin']}>© ACM at UCLA 2021.</span> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </footer> | ||
| ); | ||
| } | ||
|
|
||
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.