diff --git a/packages/web-shared/components/ContentChannel.js b/packages/web-shared/components/ContentChannel.js
index a7e5b297..f15288ce 100644
--- a/packages/web-shared/components/ContentChannel.js
+++ b/packages/web-shared/components/ContentChannel.js
@@ -38,7 +38,7 @@ function ContentChannel(props = {}) {
title={item.node.title}
summary={item.node.summary}
onClick={() => handleActionPress(item)}
- videoMedia={item.relatedNode?.videos[0]}
+ videoMedia={item.relatedNode?.videos?.[0]}
/>
);
})}
diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index d2744e14..4c60944a 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -11,7 +11,17 @@ import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
import { add as addBreadcrumb, useBreadcrumbDispatch } from '../providers/BreadcrumbProvider';
import { set as setModal, useModal } from '../providers/ModalProvider';
-import { Box, Loader, Longform, H3, ContentCard, BodyText, ShareButton } from '../ui-kit';
+import {
+ Box,
+ Loader,
+ Longform,
+ H3,
+ ContentCard,
+ BodyText,
+ ShareButton,
+ Icons,
+ PhospherIcon,
+} from '../ui-kit';
import { useFeatureFeed, useHTMLContent, useVideoMediaProgress } from '../hooks';
import { Title, ParentTitle, ParentSummary } from './ContentSingle.styles';
@@ -19,6 +29,59 @@ import VideoPlayer from './VideoPlayer';
import InteractWhenLoaded from './InteractWhenLoaded';
import TrackEventWhenLoaded from './TrackEventWhenLoaded';
+import styled from 'styled-components';
+
+const infoDivider = (
+
+ |
+
+);
+
+const CalendarIconWrapper = styled.span`
+ margin-right: ${({ theme }) => theme.space.xxs};
+ display: inline-flex;
+ @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+ display: none;
+ }
+`;
+
+const CalendarIcon = ({ name }) => (
+
+
+
+);
+
+const FlexBodyText = styled(BodyText)`
+ display: flex;
+ align-items: center;
+`;
+
+function CalendarData({ start, end, location }) {
+ return (
+ <>
+ {location ? (
+
+
+ {location}
+
+ ) : null}
+ {start && location ? infoDivider : null}
+ {start ? (
+
+
+ {start}
+
+ ) : null}
+ {end && start ? infoDivider : null}
+ {end ? (
+
+
+ {end}
+
+ ) : null}
+ >
+ );
+}
function ContentSingle(props = {}) {
const navigate = useNavigate();
@@ -120,11 +183,6 @@ function ContentSingle(props = {}) {
dispatch(setModal(url));
}
};
- const infoDivider = (
-
- |
-
- );
return (
<>
@@ -199,33 +257,38 @@ function ContentSingle(props = {}) {
}}
mb="s"
>
-
+
{/* Title */}
- {title && !hasChildContent ? {title} : null}
- {title && hasChildContent ? {title} : null}
-
- {parentChannel?.name || props?.data?.location ? (
+
+ {title ? {title} : null}
+ {/* Button moves below on mobile views */}
+
+
+
+ {parentChannel?.name ? (
- {parentChannel?.name || props?.data?.location}
+ {parentChannel?.name}
) : null}
- {formattedStartDate ? infoDivider : null}
- {formattedStartDate ? (
- {formattedStartDate}
- ) : null}
- {formattedStartToEnd ? infoDivider : null}
- {formattedStartToEnd ? (
- {formattedStartToEnd}
- ) : null}
+
+
-
-
+
+
{htmlContent ? (
diff --git a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
index 5eca309a..b2292e91 100644
--- a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
@@ -98,7 +98,7 @@ function VerticalCardListFeature(props = {}) {
title={item.title}
summary={item.summary}
onClick={() => handleActionPress(item)}
- videoMedia={item.relatedNode?.videos[0]}
+ videoMedia={item.relatedNode?.videos?.[0]}
/>
))}
diff --git a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
index cf44152e..be70546e 100644
--- a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
+++ b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
@@ -49,7 +49,7 @@ function FeatureFeedListGrid(props = {}) {
title={item.title}
summary={item.summary}
onClick={() => handleActionPress(item)}
- videoMedia={item.relatedNode?.videos[0]}
+ videoMedia={item.relatedNode?.videos?.[0]}
channelLabel={item.relatedNode?.parentItem?.title}
/>
))}
diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
index 454b5300..e3beca42 100644
--- a/packages/web-shared/components/Modal/Modal.js
+++ b/packages/web-shared/components/Modal/Modal.js
@@ -110,7 +110,7 @@ const Modal = (props = {}) => {
mb="base"
alignItems="center"
justifyContent="space-between"
- flexDirection={{ _: 'column-reverse', sm: 'row' }}
+ flexDirection={{ _: 'column-reverse', md: 'row' }}
>
{
sm: '400px',
}}
>
- What can we help you find?
+ What are you looking for?
);
diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
index 2a754d6e..efdc4631 100644
--- a/web-embeds/public/index.html
+++ b/web-embeds/public/index.html
@@ -57,7 +57,7 @@
+ data-placeholder="What are you looking for?" data-modal="true" class="apollos-widget">