Updates for site-view-webinar

.vscode/settings.json

@@ -42,6 +42,7 @@
   "workbench.colorCustomizations": {
     "tab.activeBorderTop": "#e9654c",
     "activityBar.background": "#e9654c",
+    "activityBar.activeBackground": "#e9654c",
     "activityBar.activeBorder": "#55ea6c",
     "activityBar.foreground": "#15202b",
     "activityBar.inactiveForeground": "#15202b99",
@@ -53,7 +54,9 @@
     "titleBar.inactiveForeground": "#e7e7e799",
     "statusBar.background": "#e33e1f",
     "statusBarItem.hoverBackground": "#e9654c",
-    "statusBar.foreground": "#e7e7e7"
+    "statusBar.foreground": "#e7e7e7",
+    "statusBar.border": "#e33e1f",
+    "titleBar.border": "#e33e1f"
   },
   "prettier.printWidth": 80,
   "peacock.color": "#e33e1f",

src/app/core/routes/StaticRoutes.js

@@ -35,7 +35,7 @@ export default [
     }),
   },
   {
-    path: '/events-listing',
+    path: '/events',
     exact: true,
     component: Loadable({
       loader: () => import('~/pages/Listings/EventListing.page'),

src/app/features/events/components.styled/EventCard.styled.js

 import styled from 'styled-components';
 
 const EventCardStyled = styled.div`
-  background-color: #fff;
-  box-shadow: 0px 0px 32px rgba(0, 1, 133, 0.08);
-  border-radius: 12px;
+  flex-basis: 33%;
+  padding: 32px;
+  color: #333;
+  text-decoration: none;
 
-  font-size: 14px;
-  line-height: 24px;
-  color: #777;
-
-  .cInner {
-    padding: 24px 16px;
-  }
-
-  .cTitle {
-    font-weight: bold;
-    font-size: 16px;
-    line-height: 24px;
-    color: #333;
-    margin: 0;
-    padding-bottom: 16px;
-  }
-
-  .cFlex {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 -8px;
+  .ecImageWrap {
+    position: relative;
+    line-height: 0;
+    img {
+      width: 100%;
+      max-width: 365px;
+    }
   }
 
-  .cFlexPadding {
-    padding: 8px;
+  .ecTag {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    padding: 15px;
+    line-height: 1;
+    background: #fff;
   }
 
-  .cSection {
-    position: relative;
-    margin-top: 16px;
-    padding: 16px 0;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -16px;
-      right: -16px;
-      height: 1px;
-      background-color: #f2f2f2;
-    }
+  .ecTitle {
+    ${props =>
+      props.theme &&
+      props.theme.typographyStyles &&
+      props.theme.typographyStyles.h5Styles}
+    margin-top:25px;
   }
 
-  .star {
-    &:before {
-      display: inline-block;
-      content: '';
-      background-image: url('/static/img/icons/star.svg');
-      width: 20px;
-      height: 19px;
-      margin-left: 8px;
-      vertical-align: middle;
-    }
+  .ecDate {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80px;
+    padding: 15px;
+    font-weight: bold;
+    line-height: 1;
+    text-align: center;
+    background: #fff;
   }
 
-  .cStats {
-    margin-top: 16px;
-    text-align: center;
+  .ecDateMonth {
+    display: block;
   }
 
-  .cMore {
+  .ecDateDay {
     display: block;
-    margin-top: 32px;
-    padding: 16px;
-    text-align: center;
-    border: 1px solid #a8bf97;
-    border-radius: 24px;
-    font-size: 16px;
-    color: #333;
-    text-decoration: none;
+    font-size: 28px;
+    margin-top: 10px;
+  }
 
-    &:hover {
-      text-decoration: underline;
-    }
+  .ecLocation {
+    margin-top: 25px;
   }
 `;
 
+EventCardStyled.defaultProps = {
+  theme: {},
+};
+
 export default EventCardStyled;

src/app/features/events/components.styled/EventListing.styled.js

@@ -26,13 +26,11 @@ const EventListingStyled = styled.div`
       }
 
       .flexWrap {
-        margin: 64px -${gutter} 0;
-
-        @media only screen and (min-width: ${mqLarge}) {
-          display: flex;
-          align-items: flex-start;
-          justify-content: space-between;
-        }
+        margin: 64px 0;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        flex-wrap: wrap;
       }
 
       .flexColMain {
@@ -58,32 +56,8 @@ const EventListingStyled = styled.div`
       }
 
       .results {
-        margin: -24px -24px 0;
-
-        @media only screen and (min-width: ${mqXLarge}) {
-          margin: -32px -32px 0;
-        }
-
-        @media only screen and (min-width: ${mqXSmall}) {
-          display: flex;
-          flex-wrap: wrap;
-        }
-      }
-
-      .card {
-        flex-basis: 50%;
-
-        @media only screen and (min-width: ${mqMedium}) {
-          flex-basis: ${(100 / 3) * 1}%;
-        }
-      }
-
-      .cardPadding {
-        padding: 24px;
-
-        @media only screen and (min-width: ${mqXLarge}) {
-          padding: 32px;
-        }
+        display: flex;
+        flex-wrap: wrap;
       }
 
       .downloadWrap {

src/app/features/events/components/EventCard.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-
 import EventCardStyled from '../components.styled/EventCard.styled';
+//import formatDateTimeRange from '~/utils/formatDateTimeRange';
 
-const EventCard = ({ title, description, image, uri, date, className }) => {
+const EventCard = ({ event, className }) => {
+  const eventTitle = event.entryTitle;
+  //const eventDates = formatDateTimeRange(event.datesAndTimes);
   return (
     <EventCardStyled className={className}>
-      <div className="cInner">
-        {image && (
-          <img
-            src={image.asset.sys.uri + '?w=365&h=280&f=webp'}
-            alt={image.altText}
-          />
+      <Link to={event.sys.uri} title={eventTitle}>
+        <div className="ecImageWrap">
+          {event.mainImage && (
+            <img
+              src={event.mainImage.asset.sys.uri + '?w=365&h=280&f=webp'}
+              alt={event.mainImage.altText}
+            />
+          )}
+          {/* {eventDates && (
+          <div className="ecDate">
+            <span className="ecDateMonth">{dateArr[0]}</span>
+            <span className="ecDateDay">{dateArr[1]}</span>
+          </div>
         )}
-        <div className="cTitle">
-          <Link to={uri} title={title}>
-            {title}
-          </Link>
+        {tag && <div className="ecTag">{tag}</div>} */}
         </div>
-        <p>{description}</p>
-        <p>{date}</p>
-      </div>
+        <h2 className="ecTitle">{eventTitle}</h2>
+        <p>{event.entryDescription}</p>
+      </Link>
     </EventCardStyled>
   );
 };
 
 EventCard.propTypes = {
   className: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  image: PropTypes.object,
-  uri: PropTypes.string,
-  date: PropTypes.object,
+  event: PropTypes.object,
 };
 
 export default EventCard;

src/app/features/events/components/EventRecord.js

@@ -18,14 +18,14 @@ const EventRecord = ({ className, entry }) => {
         <div className="flexWrap reverse">
           <div className="flexColMain">
             <div className="flexColPadding">
-              <Tags tags={entry.eventCategories} />
-              <h1 className="pageTitle">{entry.entryTitle}</h1>
               {entry.mainImage && (
                 <img
                   src={entry.mainImage.asset.sys.uri}
                   alt={entry.mainImage.altText}
                 />
               )}
+              <h1 className="pageTitle">{entry.entryTitle}</h1>
+              <Tags tags={entry.eventCategories} />
               {entry.content && <ContentComposer composer={entry.content} />}
               {entry.testimonials &&
                 entry.testimonials.length > 0 &&

src/app/features/events/components/EventsListing.js

@@ -3,19 +3,13 @@ import PropTypes from 'prop-types';
 
 import { withRouter } from 'react-router-dom';
 
-import EventFilters from './EventFilters';
+//import EventFilters from './EventFilters';
 
 import EventListingStyled from '../components.styled/EventListing.styled';
 import EventCard from './EventCard';
-import formatDateTimeRange from '~/utils/formatDateTimeRange';
+//import formatDateTimeRange from '~/utils/formatDateTimeRange';
 
-const EventListing = ({
-  className,
-  filters,
-  paging,
-  results,
-  updateFilters,
-}) => {
+const EventListing = ({ className, paging, results }) => {
   let resultsInfo = null;
 
   if (paging && paging.totalCount > 0) {
@@ -29,43 +23,25 @@ const EventListing = ({
   return (
     <EventListingStyled className={className}>
       <div className="container">
-        <h1 className="pageTitle">Example listing title</h1>
+        <h1 className="pageTitle">Events listing</h1>
         {paging && (
           <div
             className="resultsInfo"
             dangerouslySetInnerHTML={{ __html: resultsInfo }}
           />
         )}
-        <div className="flexWrap">
-          <aside className="flexColAside">
-            <div className="flexColPadding">
-              <EventFilters filters={filters} updateFilters={updateFilters} />
-            </div>
-          </aside>
-          <main className="flexColMain">
-            <div className="flexColPadding">
-              <div className="results">
-                {results &&
-                  results.map((entry, idx) => {
-                    return (
-                      <div key={idx} className="card">
-                        <div className="cardPadding">
-                          <EventCard
-                            title={entry.entryTitle}
-                            description={entry.entryDescription}
-                            image={entry.mainImage}
-                            uri={entry.sys && entry.sys.uri}
-                            date={formatDateTimeRange(entry.datesAndTimes)}
-                          />
-                        </div>
-                      </div>
-                    );
-                  })}
-                {!results || (results.length < 1 && <p>No results found.</p>)}
-              </div>
-            </div>
-          </main>
+        <div className="results">
+          {results &&
+            results.map((entry, idx) => {
+              return <EventCard event={entry} key={idx} />;
+            })}
+          {!results || (results.length < 1 && <p>No results found.</p>)}
         </div>
+        {/* <aside className="flexColAside">
+          <div className="flexColPadding">
+            <EventFilters filters={filters} updateFilters={updateFilters} />
+          </div>
+        </aside> */}
       </div>
     </EventListingStyled>
   );

src/app/features/footer/footer.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+//import { } from '../';
+import FooterStyled from './footer.styled';
+
+const Footer = ({ className }) => {
+  return (
+    <FooterStyled className={className}>&copy; 2020 Zengenti ltd</FooterStyled>
+  );
+};
+
+Footer.propTypes = {
+  className: PropTypes.string,
+};
+
+export default Footer;

src/app/features/footer/footer.styled.js

+import styled from 'styled-components';
+
+const FooterStyled = styled.div`
+  margin-top: 20px;
+  padding: 12px;
+`;
+
+export default FooterStyled;

src/app/features/header/components.styled/Header.styled.js

+import styled from 'styled-components';
+
+const HeaderStyled = styled.div`
+  padding: 30px 32px;
+  border-bottom: 1px solid #575757;
+  position: relative;
+
+  .headerInner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .logo {
+    flex-basis: 140px;
+  }
+`;
+
+export default HeaderStyled;

src/app/features/header/components.styled/Navigation.styled.js

+import styled from 'styled-components';
+
+const NavigationStyled = styled.nav`
+  text-align: right;
+  /*styles*/
+  .navList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .navItem {
+    display: inline-block;
+    margin-left: 65px;
+    font-size: 20px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .navLink {
+    text-decoration: none;
+  }
+
+  .dropdown {
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    padding: 50px 0;
+    border-top: 1px solid #575757;
+    background-color: #fff;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
+  }
+
+  .ddInner {
+    display: flex;
+    margin: 0 -12px;
+  }
+`;
+
+export default NavigationStyled;

src/app/features/headerNavigation/HeaderNavigation.js → src/app/features/header/components/HeaderNavigation.js

@@ -4,21 +4,26 @@ import { Link } from 'react-router-dom';
 
 import { useSelector } from 'react-redux';
 import { selectNavigationRoot } from '~/core/redux/selectors/navigation';
-
+import NavigationStyled from '../components.styled/Navigation.styled';
 const HeaderNavigation = ({ className }) => {
   const rootNode = useSelector(selectNavigationRoot);
   if (!rootNode) return null;
   const rootNodeJs = rootNode.toJS();
-
-  const linksToShow = rootNodeJs.children.map((link, idx) => {
-    return (
-      <li key={idx}>
-        <Link to={link.path}>{link.displayName}</Link>
-      </li>
-    );
-  });
-
-  return <ul className={className}>{linksToShow}</ul>;
+  return (
+    <NavigationStyled className={className}>
+      <ul className="navList">
+        {rootNodeJs.children.map((topLevelChildNode, idx) => {
+          return (
+            <li className="navItem" key={idx}>
+              <Link className="navLink" to={topLevelChildNode.path}>
+                {topLevelChildNode.displayName}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </NavigationStyled>
+  );
 };
 
 HeaderNavigation.propTypes = {

src/app/features/header/components/header.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HeaderNavigation from './HeaderNavigation';
+import HeaderStyled from '../components.styled/Header.styled';
+
+import contensisLogo from '~/assets/logo-contensis.png';
+import contensisLogo2x from '~/assets/logo-contensis2x.png';
+
+const Header = ({ className }) => {
+  return (
+    <HeaderStyled className={className}>
+      <div className="headerInner">
+        <div className="logo">
+          <img alt="Contensis" srcSet={contensisLogo} src={contensisLogo2x} />
+        </div>
+        <div className="navbar">
+          <HeaderNavigation />
+        </div>
+      </div>
+    </HeaderStyled>
+  );
+};
+
+Header.propTypes = {
+  className: PropTypes.string,
+  nav: PropTypes.array,
+};
+
+export default Header;

src/app/features/tags/components/tags.js

@@ -12,7 +12,7 @@ const Tags = ({ tags, className }) => {
     }
   });
 
-  return <span className={className}>{tagsToRender}</span>;
+  return <span className={className}>Categories: {tagsToRender}</span>;
 };
 
 Tags.propTypes = {

src/app/layouts/Main.layout.js

@@ -2,18 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import GlobalStyles from '~/themes/contensis/global';
-import HeaderNavigation from '~/features/headerNavigation/HeaderNavigation';
+import Header from '~/features/header/components/header';
+import Footer from '~/features/footer/footer';
 
 const MainLayout = ({ children }) => {
   return (
     <>
       <GlobalStyles />
-      <header>
-        <HeaderNavigation />
-      </header>
+      <Header />
       {/* <SkipToContent /> */}
       <main id="main">{children}</main>
-      <footer>Footer</footer>
+      <Footer />
     </>
   );
 };

src/app/pages/Listings/EventListing.page.js

@@ -9,8 +9,8 @@ const EventListingPage = () => {
     <MainLayout>
       <ListingContainer
         config={{
-          listingType: 'event',
-          contentTypeIds: ['event', 'eventRd', 'eventGj'],
+          listingType: 'events',
+          contentTypeIds: ['event'],
           fields: [
             'entryTitle',
             'entryDescription',
@@ -48,12 +48,6 @@ const EventListingPage = () => {
                 type: 'to',
               },
             },
-            {
-              label: 'Date tabs',
-              type: 'filterTabs',