diff --git a/src/components/Agenda/Agenda.js b/src/components/Agenda/Agenda.js index 06d5b729b..e1b999ac2 100644 --- a/src/components/Agenda/Agenda.js +++ b/src/components/Agenda/Agenda.js @@ -1,14 +1,15 @@ -import React, { Children, Fragment } from 'react'; +import React, { cloneElement, Children, Fragment } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import Heading from './Heading'; import Session from './Session'; import Time from './Time'; +import useMedia from 'use-media'; -const Agenda = ({ children, className, tracks }) => { - const childrenArray = Children.toArray(children); +const Agenda = ({ children, className, tracks, mobileBreakpoint }) => { + const isMobileScreen = useMedia({ maxWidth: mobileBreakpoint }); - const sessionsByTime = childrenArray + const sessionsByTime = Children.toArray(children) .filter((child) => child.type === Session) .reduce((memo, child) => { const { time } = child.props; @@ -25,24 +26,34 @@ const Agenda = ({ children, className, tracks }) => { css={css` display: grid; grid-template-columns: 0.75fr repeat(${tracks.length}, 1fr); + + @media screen and (max-width: ${mobileBreakpoint}) { + grid-template-columns: 1fr; + } `} > - <Heading - css={css` - grid-column-start: 2; - `} - > - {tracks[0]} - </Heading> - - {tracks.slice(1).map((track) => ( - <Heading key={track}>{track}</Heading> - ))} + {!isMobileScreen && ( + <> + <Heading + css={css` + grid-column-start: 2; + `} + > + {tracks[0]} + </Heading> + + {tracks.slice(1).map((track) => ( + <Heading key={track}>{track}</Heading> + ))} + </> + )} {Array.from(sessionsByTime).map(([time, sessions]) => ( <Fragment key={time}> - <Time inactive={sessions[0].props.inactive}>{time}</Time> - {sessions} + {!isMobileScreen && ( + <Time inactive={sessions[0].props.inactive}>{time}</Time> + )} + {sessions.map((session) => cloneElement(session, { isMobileScreen }))} </Fragment> ))} </div> @@ -53,6 +64,7 @@ Agenda.propTypes = { className: PropTypes.string, children: PropTypes.node, tracks: PropTypes.arrayOf(PropTypes.string).isRequired, + mobileBreakpoint: PropTypes.string, }; Agenda.Session = Session; diff --git a/src/components/Agenda/Session.js b/src/components/Agenda/Session.js index 8ce5ef232..9cc8d0527 100644 --- a/src/components/Agenda/Session.js +++ b/src/components/Agenda/Session.js @@ -3,11 +3,19 @@ import PropTypes from 'prop-types'; import { css } from '@emotion/core'; import Cell from './Cell'; -const Session = ({ inactive, time, speaker, title, span }) => ( +const Session = ({ + inactive, + time, + speaker, + title, + track, + span, + isMobileScreen, +}) => ( <Cell inactive={inactive} css={css` - grid-column: span ${span}; + grid-column: span ${isMobileScreen ? 1 : span}; text-align: center; `} > @@ -32,15 +40,51 @@ const Session = ({ inactive, time, speaker, title, span }) => ( > {speaker} </div> + {isMobileScreen && ( + <ul + css={css` + display: flex; + justify-content: center; + margin-top: 0.5rem; + padding: 0; + list-style: none; + font-size: 0.75rem; + font-weight: normal; + `} + > + <Badge>{time}</Badge> + <Badge>{track}</Badge> + </ul> + )} </Cell> ); +const Badge = (props) => ( + <li + css={css` + color: var(--color-neutrals-700); + margin: 0 0.25rem; + padding: 0.125rem 0.5rem; + background-color: rgba(0, 0, 0, 0.075); + border-radius: 3.5rem; + + .dark-mode & { + color: var(--color-dark-700); + background: var(--color-dark-300); + } + `} + {...props} + /> +); + Session.propTypes = { inactive: PropTypes.bool, time: PropTypes.string, speaker: PropTypes.string, title: PropTypes.string, span: PropTypes.number, + track: PropTypes.string, + isMobileScreen: PropTypes.bool, }; Session.defaultProps = { diff --git a/src/pages/nerd-days.js b/src/pages/nerd-days.js index 99917fc52..13bff759e 100644 --- a/src/pages/nerd-days.js +++ b/src/pages/nerd-days.js @@ -357,6 +357,7 @@ const NerdDaysPage = () => { max-width: 1000px; margin: 0 auto; `} + mobileBreakpoint="1000px" tracks={[ 'Observability', 'Cloud migration', @@ -369,134 +370,108 @@ const NerdDaysPage = () => { time="8:00 AM" title="Welcome" speaker="Jemiah Sius" + track="DevOps journey" span={5} /> <Agenda.Session time="8:30 AM" title="Building Better Apps" speaker="Anita Baker" + track="Fundamentals" span={2} /> <Agenda.Session time="8:30 AM" title="Open DevOps" speaker="Robert Parr" + track="DevOps journey" span={2} /> <Agenda.Session time="8:30 AM" title="NR 101" speaker="Jeff Osborne" + track="DevOps journey" /> <Agenda.Session time="9:00 AM" title="All seeing eye" speaker="Dylan Hernandez" + track="Observability" /> <Agenda.Session time="9:00 AM" title="AWS Ops" speaker="Celso Piña" + track="DevOps journey" /> <Agenda.Session time="9:00 AM" title="Main v Master" speaker="Jeff Osborne" + track="DevOps journey" /> <Agenda.Session time="9:00 AM" title="DevOps Journey" speaker="Jemiah Sius" + track="DevOps journey" span={2} /> <Agenda.Session time="11:00 AM" title="Is it down? Yes." speaker="Dylan Hernandez" + track="Fundamentals" /> <Agenda.Session time="11:00 AM" title="How much is too much?" speaker="Natalia Lafourcade" + track="DevOps journey" span={2} /> <Agenda.Session time="11:00 AM" title="Monolith Magic" speaker="John McGibbons" + track="DevOps journey" /> <Agenda.Session time="11:00 AM" title="Debuggers" speaker="Anita Baker" + track="DevOps journey" /> <Agenda.Session inactive time="12:00 AM" title="Lunch Break" speaker="Music by DJ Mykael V" + track="DevOps journey" span={5} /> <Agenda.Session time="1:30 PM" title="Observability and You" speaker="Natalia Lafourcade" + track="DevOps journey" span={3} /> <Agenda.Session time="1:30 PM" title="COVID Productivity" speaker="Celso Piña" + track="DevOps journey" span={2} /> <Agenda.Session time="2:30 PM" title="Closing + Swag" speaker="Jemiah Sius and Team" + track="DevOps journey" span={5} /> - <div className={cx(styles.agendaHeaderRow)}> - <h5 - className={cx( - styles.agendaHeaderRowHeading, - styles.agendaHeaderRowHeading1 - )} - > - Observability - </h5> - <h5 - className={cx( - styles.agendaHeaderRowHeading, - styles.agendaHeaderRowHeading2 - )} - > - Cloud Migration - </h5> - <h5 - className={cx( - styles.agendaHeaderRowHeading, - styles.agendaHeaderRowHeading3 - )} - > - Open Source - </h5> - <h5 - className={cx( - styles.agendaHeaderRowHeading, - styles.agendaHeaderRowHeading4 - )} - > - DevOps Journey - </h5> - <h5 - className={cx( - styles.agendaHeaderRowHeading, - styles.agendaHeaderRowHeading5 - )} - > - Fundamentals - </h5> - </div> <div className={cx(styles.agendaRow)}> <h4 className={cx(styles.agendaTime)}>8:00 AM</h4> <h4 diff --git a/src/pages/nerd-days.module.scss b/src/pages/nerd-days.module.scss index 0fc618ff4..d85302022 100644 --- a/src/pages/nerd-days.module.scss +++ b/src/pages/nerd-days.module.scss @@ -1,10 +1,3 @@ -.agendaHeaderRow { - display: grid; - grid-template-columns: 0.75fr repeat(5, 1fr); - grid-template-areas: '. header1 header2 header3 header4 header5'; - grid-column: span 6; -} - .agendaHeaderRowHeading { display: flex; align-items: center; @@ -238,8 +231,7 @@ } @media screen and (max-width: 1000px) { - .agendaTime, - .agendaHeaderRow { + .agendaTime { display: none; }