added timezones to program items

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 (
     <Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>
       <Left>
-        <Link to={`/series/${series.slug}#${id}`}>
+        <Link to={`/series/${series.slug}#${episodeId}`}>
           <Img src={image} />
         </Link>
         <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>
       </Center>
       <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>
     </Flex>
   )

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;
   }
 `

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 {

src/pages/SeriesPage/index.js

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