Commit 4f2cb586 authored by Jon Moore's avatar Jon Moore
Browse files

Initial code for event record

parent 5d21477c
Pipeline #24098 passed with stage
in 20 seconds
......@@ -21,4 +21,13 @@ export default [
loading: Loading,
}),
},
{
contentTypeID: 'event',
component: Loadable({
loader: () => {
return import('~/pages/Records/EventRecord.page');
},
loading: Loading,
}),
},
];
import styled, { css } from 'styled-components';
import validateProps from '~/utils/validateProps';
import getIn from '~/utils/getIn';
const EventRecordStyled = styled.div`
${({ theme }) => {
const container = getIn(['patterns', 'container'], theme);
const gutter = getIn(['layout', 'gutter'], theme);
const mqXSmall = getIn(['layout', 'mediaQueries', 'xsmall'], theme);
const mqMedium = getIn(['layout', 'mediaQueries', 'medium'], theme);
const mqLarge = getIn(['layout', 'mediaQueries', 'large'], theme);
const mqXLarge = getIn(['layout', 'mediaQueries', 'xlarge'], theme);
validateProps('ExampleRecord', {
container,
gutter,
mqXSmall,
mqMedium,
mqLarge,
mqXLarge,
});
return css`
.container {
${container}
}
.flexWrap {
margin: 0 -${gutter};
@media only screen and (min-width: ${mqLarge}) {
display: flex;
align-items: flex-start;
justify-content: space-between;
&.reverse {
flex-direction: row-reverse;
}
}
&:nth-child(1) {
.flexColMain {
padding-bottom: 0;
}
}
}
.flexColMain {
margin-top: 40px;
flex-basis: ${(100 / 12) * 7}%;
padding-bottom: 70px;
@media only screen and (min-width: ${mqLarge}) {
margin-top: 0;
}
@media only screen and (min-width: ${mqXLarge}) {
flex-basis: ${(100 / 12) * 8}%;
}
.keyInfo {
@media only screen and (min-width: ${mqLarge}) {
display: none;
}
}
}
.flexColAside {
flex-basis: ${(100 / 12) * 4}%;
@media only screen and (min-width: ${mqXLarge}) {
flex-basis: ${(100 / 12) * 3}%;
}
.keyInfo {
display: none;
@media only screen and (min-width: ${mqLarge}) {
display: block;
}
}
}
.flexColPadding {
padding: 0 ${gutter};
}
.share {
margin-top: 30px;
text-align: right;
&:after {
display: inline-block;
content: '';
background-image: url('/static/img/icons/share.svg');
width: 24px;
height: 24px;
margin-left: 8px;
vertical-align: middle;
}
}
.downloadWrap {
text-align: right;
}
.download {
background: #c3deaf;
border-radius: 24px;
text-align: center;
padding: 16px;
width: 100%;
display: inline-block;
margin-top: 20px;
border: none;
font-size: 16px;
line-height: 24px;
color: #333;
&.cancel {
background: #ccc;
color: #333;
}
span {
&:before {
display: inline-block;
vertical-align: middle;
margin: 0 8px;
content: '';
background-image: url('/static/img/icons/download.svg');
width: 16px;
height: 20px;
}
}
}
.subTitle {
font-weight: bold;
font-size: 20px;
line-height: 24px;
color: #333333;
margin: 64px 0 0 0;
}
.productLink {
border: 1px solid #a8bf97;
box-sizing: border-box;
border-radius: 24px;
padding: 16px;
text-align: center;
min-width: 340px;
display: inline-block;
margin-top: 8px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.label {
margin-top: 24px;
}
.restrictions {
display: table;
margin-top: 40px;
div {
display: table-row;
margin-top: 24px;
span {
display: table-cell;
&:nth-child(2) {
padding-left: 20px;
text-align: right;
}
}
}
}
.notes {
margin-top: 40px;
border-top: 1px solid #a8bf97;
}
.notesTitle {
margin: 80px 0 0 0;
}
.notesContent {
margin-top: 40px;
> *:first-child {
margin-top: 0;
}
}
.accordionTitle {
position: relative;
padding-right: 32px;
display: block;
width: 100%;
padding: 12px 16px;
margin-top: 8px;
background: #f2f2f2;
border: none;
font-size: 16px;
line-height: 24px;
color: #333333;
text-align: left;
&:after {
content: '';
background-image: url('/static/img/icons/chevron_down.svg');
width: 10px;
height: 5px;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
}
.accordionSection {
margin-top: 40px;
border-top: 1px solid #a8bf97;
}
.accordionControls {
padding-bottom: 40px;
@media only screen and (min-width: ${mqMedium}) {
display: flex;
justify-content: space-between;
}
a {
margin-top: 24px;
display: block;
color: #2134dc;
}
}
.accordionToggle {
display: block;
margin-top: 24px;
border: none;
background: transparent;
color: #879b79;
text-decoration: underline;
&:after {
content: '';
display: inline-block;
margin-left: 8px;
background-image: url('/static/img/icons/chevron_down.svg');
width: 10px;
height: 5px;
}
}
.keyInfo {
padding: 24px 16px;
background: rgba(242, 242, 242, 0.6);
border-radius: 24px;
margin-top: 40px;
}
.keyInfoTitle {
font-weight: bold;
}
.keyInfoTable {
display: table;
margin-top: 24px;
width: 100%;
div {
display: table-row;
margin-top: 24px;
> span {
display: table-cell;
&:nth-child(2) {
text-align: right;
}
}
}
}
.relatedLinks {
text-align: right;
ul {
list-style: none;
}
li {
margin-top: 8px;
}
a {
text-decoration: none;
}
}
`;
}};
`;
export default EventRecordStyled;
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import EventRecordStyled from '../components.styled/EventRecord.styled';
const EventRecord = ({ className, entry }) => {
if (!entry) return null;
const { entryTitle } = entry;
return (
<EventRecordStyled className={className}>
<div className="container">
<div className="flexWrap reverse">
<div className="flexColMain">
<div className="flexColPadding">
<h1 className="pageTitle">{entryTitle}</h1>
</div>
</div>
</div>
</div>
</EventRecordStyled>
);
};
EventRecord.propTypes = {
className: PropTypes.string,
entry: PropTypes.object,
};
export default withRouter(EventRecord);
import React from 'react';
import PropTypes from 'prop-types';
import MainLayout from '~/layouts/Main.layout';
import EventRecord from '~/features/events/components/EventRecord';
const EventRecordPage = ({ entry }) => {
return (
<MainLayout>
<EventRecord entry={entry} />
</MainLayout>
);
};
EventRecordPage.propTypes = {
entry: PropTypes.object,
};
export default EventRecordPage;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment