From 15180937f9d3776d93120421a530936c7497a367 Mon Sep 17 00:00:00 2001
From: sunda <>
Date: Thu, 11 Nov 2021 12:48:27 +0100
Subject: [PATCH] added timezones to program items
---
src/components/EpisodeCard/index.js | 20 +++++++++++++++++---
src/components/EpisodeCard/styles.js | 9 ++++++++-
src/components/Markdown/styles.js | 4 ++++
src/pages/SeriesPage/index.js | 22 ++++++++++++----------
4 files changed, 41 insertions(+), 14 deletions(-)
diff --git a/src/components/EpisodeCard/index.js b/src/components/EpisodeCard/index.js
index 3d4b86d..d294873 100644
--- a/src/components/EpisodeCard/index.js
+++ b/src/components/EpisodeCard/index.js
@@ -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 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 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 (
-
+
@@ -43,7 +56,8 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id, url, descri
-
+
+
)
diff --git a/src/components/EpisodeCard/styles.js b/src/components/EpisodeCard/styles.js
index 69f101f..9142d46 100644
--- a/src/components/EpisodeCard/styles.js
+++ b/src/components/EpisodeCard/styles.js
@@ -48,6 +48,8 @@ export const Left = styled(FlexColumn)`
export const Center = styled(FlexColumn)`
@media screen and (max-width: ${screenSizes.md}px) {
order: 2;
+ position: relative;
+ top: -1em;
}
`
@@ -59,10 +61,15 @@ export const Title = styled(H2)`
export const Right = styled.div`
flex: 1;
text-align: right;
+
+ label {
+ display: block;
+ margin-bottom: 0.2em;
+ }
@media screen and (max-width: ${screenSizes.md}px) {
position: relative;
- top: 1em;
+ top: 1.2em;
order: 1;
}
`
diff --git a/src/components/Markdown/styles.js b/src/components/Markdown/styles.js
index f6cc328..333a4f9 100644
--- a/src/components/Markdown/styles.js
+++ b/src/components/Markdown/styles.js
@@ -28,6 +28,10 @@ export const MarkdownWrapper = styled.span`
p {
margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')};
+
+ &:last-of-type {
+ margin-bottom: ${props => (props.$withLinebreaks ? '8px' : '0')};
+ }
}
p > p {
diff --git a/src/pages/SeriesPage/index.js b/src/pages/SeriesPage/index.js
index 6d2edd4..1cdd2ea 100644
--- a/src/pages/SeriesPage/index.js
+++ b/src/pages/SeriesPage/index.js
@@ -109,16 +109,18 @@ const SeriesPage = ({ data }) => {
{credits}
: null}
- {orgsList.length ?
- {orgsList.map((org, index) => (
-
-
-
-
- {orgsList.length === 2 && index + 1 !== orgsList.length ? : null}
-
- ))}
- : null}
+ {orgsList.length ? (
+
+ {orgsList.map((org, index) => (
+
+
+
+
+ {orgsList.length === 2 && index + 1 !== orgsList.length ? : null}
+
+ ))}
+
+ ) : null}
)