Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Close mobile sidebar after click + Current time indicator #256

Merged
merged 3 commits into from
Dec 31, 2020
Merged

Close mobile sidebar after click + Current time indicator #256

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5f05ec
auto close mobile sidebar after clicking link
jackyzha0 Dec 30, 2020
e6bb5ad
add current time display
jackyzha0 Dec 30, 2020
757448d
more human readable constant
jackyzha0 Dec 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add current time display
  • Loading branch information
@jackyzha0
jackyzha0 committed Dec 30, 2020
commit e6bb5ad7c1ac44dace841e03af28026279e7be89
27 changes: 25 additions & 2 deletions src/components/Schedule/Timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -12,27 +12,50 @@ 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;
width: 5em;
margin-top: ${props => props.hourOffset * HOUR_HEIGHT - EVENT_GAP * 1.5}px;
`

const CurrentTime = ({ start, duration, numCols }) => {
const hoursBetweenNowAndStart = (new Date() - start) / 36e5
const renderCurrentTime = 0 < hoursBetweenNowAndStart && hoursBetweenNowAndStart < duration
return (
renderCurrentTime && (
<CurrentTimeHR hourOffset={hoursBetweenNowAndStart} widthMultiplier={numCols} />
)
)
}

export const TimelineColumn = ({ hackathonStart, duration, numCols }) => {
duration = Math.floor(Math.max(0, duration))
return (
<TimelineColumnContainer duration={duration}>
<CurrentTime start={hackathonStart} duration={duration} numCols={numCols} />
{[...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' })
Expand Down