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">