Commit 5279b85a authored by Jon Moore's avatar Jon Moore
Browse files

event record styling updates

parent ce629cf9
Pipeline #28860 passed with stage
in 3 minutes and 2 seconds
import React from 'react';
import PropTypes from 'prop-types';
import TestimonialStyled from './Testimonial.styled';
const Testimonial = ({ testimonial, className }) => {
return (
<div className={className}>
<TestimonialStyled className={className}>
<h3>{testimonial.title}</h3>
<img
src={testimonial.image.asset.sys.uri}
src={`${testimonial.image.asset.sys.uri}?f=webp&w=768`}
alt={testimonial.image.altText}
/>
<p>{testimonial.quote.text}</p>
<p>
<strong>{testimonial.quote.source}</strong>
</p>
</div>
<div className="testimonialContent">
<p>
<em>{testimonial.quote.text}</em>
</p>
<p>
<strong>{testimonial.quote.source}</strong>
</p>
</div>
</TestimonialStyled>
);
};
......
import styled from 'styled-components';
const TestimonialStyled = styled.div`
display: flex;
flex-wrap: wrap;
position: relative;
> * {
flex: 0 0 100%;
}
img {
width: 100%;
max-width: 768px;
}
.testimonialContent {
color: #fff;
position: absolute;
align-self: center;
justify-self: center;
text-align: center;
width: 100%;
font-size: 20px;
}
`;
export default TestimonialStyled;
......@@ -25,287 +25,11 @@ const EventRecordStyled = styled.div`
${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;
.eventContent {
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;
}
max-width: 768px;
margin: 0 auto;
}
`;
}};
......
......@@ -15,25 +15,23 @@ const EventRecord = ({ className, entry }) => {
return (
<EventRecordStyled className={className}>
<div className="container">
<div className="flexWrap reverse">
<div className="flexColMain">
<div className="flexColPadding">
{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 &&
entry.testimonials.map((testimonial, idx) => {
return <Testimonial testimonial={testimonial} key={idx} />;
})}
</div>
</div>
{entry.mainImage && (
<img
src={entry.mainImage.asset.sys.uri}
alt={entry.mainImage.altText}
/>
)}
<div className="eventContent">
<h1 className="pageTitle">{entry.entryTitle}</h1>
<Tags tags={entry.eventCategories} />
{entry.content && <ContentComposer composer={entry.content} />}
<h2>Event testimonials</h2>
{entry.testimonials &&
entry.testimonials.length > 0 &&
entry.testimonials.map((testimonial, idx) => {
return <Testimonial testimonial={testimonial} key={idx} />;
})}
</div>
</div>
</EventRecordStyled>
......
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