Merge branch 'main' into classnames-view-all-buttons

ApollosProject · Feb 23, 2024 · 232af77 · 232af77
2 parents b845119 + faffed9
commit 232af77
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 33 deletions.
diff --git 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
@@ -11,14 +11,77 @@ 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';
 
 import VideoPlayer from './VideoPlayer';
 
 import InteractWhenLoaded from './InteractWhenLoaded';
 import TrackEventWhenLoaded from './TrackEventWhenLoaded';
+import styled from 'styled-components';
+
+const infoDivider = (
+  <BodyText color="text.tertiary" mx="xs" display={{ xs: 'none', sm: 'block' }}>
+    |
+  </BodyText>
+);
+
+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 }) => (
+  <CalendarIconWrapper>
+    <PhospherIcon name={name} />
+  </CalendarIconWrapper>
+);
+
+const FlexBodyText = styled(BodyText)`
+  display: flex;
+  align-items: center;
+`;
+
+function CalendarData({ start, end, location }) {
+  return (
+    <>
+      {location ? (
+        <FlexBodyText color="text.secondary" mb={'xxs'}>
+          <CalendarIcon name="globe" />
+          {location}
+        </FlexBodyText>
+      ) : null}
+      {start && location ? infoDivider : null}
+      {start ? (
+        <FlexBodyText color="text.secondary" mb={'xxs'}>
+          <CalendarIcon name="calendar" />
+          {start}
+        </FlexBodyText>
+      ) : null}
+      {end && start ? infoDivider : null}
+      {end ? (
+        <FlexBodyText color="text.secondary" mb={'xxs'}>
+          <CalendarIcon name="clock" />
+          {end}
+        </FlexBodyText>
+      ) : null}
+    </>
+  );
+}
 
 function ContentSingle(props = {}) {
   const navigate = useNavigate();
@@ -120,11 +183,6 @@ function ContentSingle(props = {}) {
       dispatch(setModal(url));
     }
   };
-  const infoDivider = (
-    <BodyText color="text.tertiary" mx="xs">
-      |
-    </BodyText>
-  );
 
   return (
     <>
@@ -199,33 +257,38 @@ function ContentSingle(props = {}) {
             }}
             mb="s"
           >
-            <Box>
+            <Box width="100%">
               {/* Title */}
-              {title && !hasChildContent ? <Title>{title}</Title> : null}
-              {title && hasChildContent ? <Title>{title}</Title> : null}
-              <Box display="flex" flexDirection="row">
-                {parentChannel?.name || props?.data?.location ? (
+              <Box
+                display="flex"
+                flexDirection="row"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                {title ? <Title>{title}</Title> : null}
+                {/* Button moves below on mobile views */}
+                <ShareButton
+                  ml={{ md: 'xs' }}
+                  display={{ xs: 'none', sm: 'inline-block' }}
+                  contentTitle={title}
+                />
+              </Box>
+              <Box display="flex" flexDirection={{ sm: 'row', xs: 'column' }} width="100%">
+                {parentChannel?.name ? (
                   <BodyText color="text.secondary" mb={title && !hasChildContent ? 'xxs' : ''}>
-                    {parentChannel?.name || props?.data?.location}
+                    {parentChannel?.name}
                   </BodyText>
                 ) : null}
-                {formattedStartDate ? infoDivider : null}
-                {formattedStartDate ? (
-                  <BodyText color="text.secondary">{formattedStartDate}</BodyText>
-                ) : null}
-                {formattedStartToEnd ? infoDivider : null}
-                {formattedStartToEnd ? (
-                  <BodyText color="text.secondary">{formattedStartToEnd}</BodyText>
-                ) : null}
+
+                <CalendarData
+                  start={formattedStartDate}
+                  end={formattedStartToEnd}
+                  location={props?.data?.location}
+                />
               </Box>
             </Box>
-            <Box
-              mt={{
-                _: 'xs',
-                md: '0',
-              }}
-            >
-              <ShareButton ml={{ md: 'xs' }} contentTitle={title} />
+            <Box mb="xs" display={{ xs: 'inline-block', sm: 'none' }}>
+              <ShareButton contentTitle={title} />
             </Box>
           </Box>
           {htmlContent ? (

diff --git 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]}
             />
           ))}
         </Styled.Container>

diff --git 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
@@ -110,7 +110,7 @@ const Modal = (props = {}) => {
                 mb="base"
                 alignItems="center"
                 justifyContent="space-between"
-                flexDirection={{ _: 'column-reverse', sm: 'row' }}
+                flexDirection={{ _: 'column-reverse', md: 'row' }}
               >
                 <Box width={{ _: '0', sm: '10%' }}></Box>
                 <Box

diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js
@@ -70,7 +70,7 @@ const Searchbar = (props = {}) => {
           sm: '400px',
         }}
       >
-        What can we help you find?
+        What are you looking for?
       </Box>
     </Styled.TextPrompt>
   );

diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
@@ -57,7 +57,7 @@
 
   <div data-type="FeatureFeed" data-church="liquid_church"
     data-feature-feed="FeatureFeed:04160599-4edf-4824-98c5-02c1a8854c48"
-    data-placeholder="Life Is Hard. How Can We Help?" data-modal="true" class="apollos-widget"></div>
+    data-placeholder="What are you looking for?" data-modal="true" class="apollos-widget"></div>
   <!-- 
     <div
       data-church="cedar_creek"