feat: add the rest of the responsive styles for the agenda

newrelic · Sep 4, 2020 · 12fdec1 · 12fdec1
1 parent cae2449
commit 12fdec1
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }