diff --git a/src/components/Page.js b/src/components/Page.js index 8e977d52..5dab9488 100644 --- a/src/components/Page.js +++ b/src/components/Page.js @@ -40,6 +40,7 @@ const Page = ({ hackerStatus, children }) => { isSubmissionsOpen={livesiteDoc.submissionsOpen} isApplicationOpen={livesiteDoc.applicationsOpen} showMobileSidebar={showMobileSidebar} + hideSidebarCallback={() => setShowMobileSidebar(false)} hackerStatus={hackerStatus} /> diff --git a/src/components/Schedule/Timeline.js b/src/components/Schedule/Timeline.js index e95a3980..1debd1d7 100644 --- a/src/components/Schedule/Timeline.js +++ b/src/components/Schedule/Timeline.js @@ -1,5 +1,5 @@ import React from 'react' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { HOUR_HEIGHT, EVENT_GAP, EVENT_WIDTH } from './Constants' const TimelineColumnContainer = styled.div` @@ -12,16 +12,28 @@ const TimelineBlock = styled.div` transform: translateY(-${EVENT_GAP}px); ` -const TimelineHR = styled.hr` +const ScheduleHR = css` display: inline-block; width: max(${props => props.widthMultiplier * EVENT_WIDTH + EVENT_GAP * 2}px, 70vw); margin-left: 5em; margin-top: ${props => props.hourOffset * HOUR_HEIGHT}px; +` + +const TimelineHR = styled.hr` + ${ScheduleHR} border: 0; border-bottom: 1px dashed ${p => p.theme.colors.text}; opacity: 35%; ` +const CurrentTimeHR = styled.hr` + ${ScheduleHR} + position: absolute; + border: 0; + border-bottom: 2px solid ${p => p.theme.colors.error}; + opacity: 50%; +` + const TimelineLabel = styled.span` padding-right: 1em; position: absolute; @@ -29,10 +41,21 @@ const TimelineLabel = styled.span` margin-top: ${props => props.hourOffset * HOUR_HEIGHT - EVENT_GAP * 1.5}px; ` +const CurrentTime = ({ start, duration, numCols }) => { + const hoursBetweenNowAndStart = ((new Date() - start) / 60) * 60 * 1000 + const renderCurrentTime = 0 < hoursBetweenNowAndStart && hoursBetweenNowAndStart < duration + return ( + renderCurrentTime && ( + + ) + ) +} + export const TimelineColumn = ({ hackathonStart, duration, numCols }) => { duration = Math.floor(Math.max(0, duration)) return ( + {[...Array(duration)].map((v, i) => { const labelTime = new Date(hackathonStart.getTime() + i * 60 * 60 * 1000) const label = labelTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 17dea0dc..34153a8d 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -94,6 +94,7 @@ export default ({ isJudgingOpen, isSubmissionsOpen, isApplicationOpen, + hideSidebarCallback, hackerStatus, }) => { const [location] = useLocation() @@ -135,7 +136,7 @@ export default ({ {!hackerStatus || hackerStatus === 'acceptedAndAttending' ? ( links.map((link, i) => { return ( - + {link.text} )