added timezones to program items

This commit is contained in:
sunda 2021-11-11 12:48:27 +01:00
parent 1489a0380b
commit 15180937f9
4 changed files with 41 additions and 14 deletions

View File

@ -14,7 +14,7 @@ import Flex from '../Flex'
const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id, url, description, ...rest }) => { const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId, url, description, ...rest }) => {
const { data: { series: allSeries } } = useEventApi() const { data: { series: allSeries } } = useEventApi()
const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {} const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
@ -24,11 +24,24 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id, url, descri
const { width: screenWidth } = useWindowSize() const { width: screenWidth } = useWindowSize()
const isMobile = screenWidth < screenSizes.md const isMobile = screenWidth < screenSizes.md
const dateString = `${new Date()}`
let tzShort =
// Works for the majority of modern browsers
dateString.match(/\(([^\)]+)\)$/) ||
// IE outputs date strings in a different format:
dateString.match(/([A-Z]+) [\d]{4}$/)
if (tzShort) {
// Old Firefox uses the long timezone name (e.g., "Central
// Daylight Time" instead of "CDT")
tzShort = tzShort[1].match(/[A-Z]/g).join('')
}
return ( return (
<Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}> <Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>
<Left> <Left>
<Link to={`/series/${series.slug}#${id}`}> <Link to={`/series/${series.slug}#${episodeId}`}>
<Img src={image} /> <Img src={image} />
</Link> </Link>
<ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} /> <ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
@ -43,7 +56,8 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id, url, descri
</div> </div>
</Center> </Center>
<Right> <Right>
<Label size={24} colour={colours.rose} weight="600">{startTime}</Label> <Label size={24} colour={colours.rose} weight="600" align="right" block>{startTime}</Label>
<Label size={18} colour={colours.rose} weight="600" align="right" block>{tzShort}</Label>
</Right> </Right>
</Flex> </Flex>
) )

View File

@ -48,6 +48,8 @@ export const Left = styled(FlexColumn)`
export const Center = styled(FlexColumn)` export const Center = styled(FlexColumn)`
@media screen and (max-width: ${screenSizes.md}px) { @media screen and (max-width: ${screenSizes.md}px) {
order: 2; order: 2;
position: relative;
top: -1em;
} }
` `
@ -59,10 +61,15 @@ export const Title = styled(H2)`
export const Right = styled.div` export const Right = styled.div`
flex: 1; flex: 1;
text-align: right; text-align: right;
label {
display: block;
margin-bottom: 0.2em;
}
@media screen and (max-width: ${screenSizes.md}px) { @media screen and (max-width: ${screenSizes.md}px) {
position: relative; position: relative;
top: 1em; top: 1.2em;
order: 1; order: 1;
} }
` `

View File

@ -28,6 +28,10 @@ export const MarkdownWrapper = styled.span`
p { p {
margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')}; margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')};
&:last-of-type {
margin-bottom: ${props => (props.$withLinebreaks ? '8px' : '0')};
}
} }
p > p { p > p {

View File

@ -109,16 +109,18 @@ const SeriesPage = ({ data }) => {
<Markdown theme={theme}>{credits}</Markdown> <Markdown theme={theme}>{credits}</Markdown>
</InfoContent> : null} </InfoContent> : null}
</Fragment> </Fragment>
{orgsList.length ? <LogosRow $wrap> {orgsList.length ? (
{orgsList.map((org, index) => ( <LogosRow $wrap>
<Fragment> {orgsList.map((org, index) => (
<a href={org.orgUrl}> <Fragment>
<img src={org.logoUrl} alt={`${org.orgName} logo`} /> <a href={org.orgUrl}>
</a> <img src={org.logoUrl} alt={`${org.orgName} logo`} />
{orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null} </a>
</Fragment> {orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
))} </Fragment>
</LogosRow> : null} ))}
</LogosRow>
) : null}
</InfoLayout> </InfoLayout>
</Page> </Page>
) )