Commit ce629cf9 authored by Jon Moore's avatar Jon Moore
Browse files

Updates for site-view-webinar

parent 908d01d7
Pipeline #28857 passed with stage
in 6 minutes and 5 seconds
......@@ -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",
......
......@@ -35,7 +35,7 @@ export default [
}),
},
{
path: '/events-listing',
path: '/events',
exact: true,
component: Loadable({
loader: () => import('~/pages/Listings/EventListing.page'),
......
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;
......@@ -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 {
......
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;
......@@ -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 &&
......
......@@ -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>
);
......
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;
import styled from 'styled-components';
const FooterStyled = styled.div`
margin-top: 20px;
padding: 12px;
`;
export default FooterStyled;
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;
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;
......@@ -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 = {
......
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;
......@@ -12,7 +12,7 @@ const Tags = ({ tags, className }) => {
}
});
return <span className={className}>{tagsToRender}</span>;
return <span className={className}>Categories: {tagsToRender}</span>;
};
Tags.propTypes = {
......
......@@ -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 />
</>
);
};
......
......@@ -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',