diff options
Diffstat (limited to 'src/js/cms-preview-templates')
| -rw-r--r-- | src/js/cms-preview-templates/components/jumbotron.js | 25 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/contact.js | 28 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/home.js | 69 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/products.js | 22 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/values.js | 46 |
5 files changed, 173 insertions, 17 deletions
diff --git a/src/js/cms-preview-templates/components/jumbotron.js b/src/js/cms-preview-templates/components/jumbotron.js new file mode 100644 index 0000000..128a51e --- /dev/null +++ b/src/js/cms-preview-templates/components/jumbotron.js @@ -0,0 +1,25 @@ +import React from "react"; + +export default class Jumbotron extends React.Component { + render() { + const {image, title, subtitle} = this.props; + return <div> + <div className="pv5 pv6-l ph3 bg-center cover" style={{ + backgroundImage: image && `url(${image})` + }}> + <div className="mw7 center ph3"> + <div className="db mb3"> + <div className="mw7 relative bg-fix-primary mb3"> + <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary"> + { title } + </h1> + </div> + <div className="mw7 relative bg-fix-primary"> + {subtitle && <p className="b f4 di lh-title mb3 white mw6 bg-primary">{ subtitle }</p>} + </div> + </div> + </div> + </div> + </div>; + } +} diff --git a/src/js/cms-preview-templates/contact.js b/src/js/cms-preview-templates/contact.js new file mode 100644 index 0000000..dea318c --- /dev/null +++ b/src/js/cms-preview-templates/contact.js @@ -0,0 +1,28 @@ +import React from "react"; + +const ContactEntry = ({heading, text}) => + <div> + <h4 className="f4 b lh-title mb2 primary">{ heading }</h4> + <p>{ text }</p> + </div>; + +const ContactEntries = ({data}) => data && data.length > 0 + ? <div className="flex-ns mb3"> + {data.map(({heading, text}) => <ContactEntry heading={heading} text={text} />)} + </div> + : ""; + +export default class ContactPreview extends React.Component { + render() { + const {entry, getAsset, widgetFor} = this.props; + const entryContactEntries = entry.getIn(["data", "contact_entries"]); + const contactEntries = entryContactEntries ? entryContactEntries.toJS() : []; + return <div className="ph3 bg-off-white"> + <img src={getAsset(entry.getIn(["data", "logo"]))} alt="" className="db w4 center pv4" /> + <div className="center mw6 pv3"> + { widgetFor("body") } + <ContactEntries data={contactEntries} /> + </div> + </div>; + } +} diff --git a/src/js/cms-preview-templates/home.js b/src/js/cms-preview-templates/home.js new file mode 100644 index 0000000..ca8c123 --- /dev/null +++ b/src/js/cms-preview-templates/home.js @@ -0,0 +1,69 @@ +import React from "react"; +import format from "date-fns/format"; + +import Jumbotron from "./components/jumbotron"; + +export default class PostPreview extends React.Component { + render() { + const {entry, getAsset} = this.props; + let image = getAsset(entry.getIn(["data", "image"])); + + // Bit of a nasty hack to make relative paths work as expected as a background image here + if (image && !image.fileObj) { + image = window.parent.location.protocol + "//" + window.parent.location.host + image; + } + + return <div> + <Jumbotron image={image} title={entry.getIn(["data", "title"])} subtitle={entry.getIn(["data", "subtitle"])}/> + + <div className="bg-grey-1 pv4"> + <div className="flex-l mhn1-l ph3 center mw7"> + <h2 className="f2 b lh-title mb2 w-40-l">{entry.getIn(["data", "blurb", "heading"])}</h2> + <p className="w-60-l mb0">{entry.getIn(["data", "blurb", "text"])}</p> + </div> + </div> + + <div className="bg-off-white pv4"> + <div className="ph3 mw7 center"> + <h2 className="f2 b lh-title mb2">{entry.getIn(["data", "intro", "heading"])}</h2> + <p className="mb4 mw6">{entry.getIn(["data", "intro", "text"])}</p> + + <div className="flex-ns mhn2-ns mb3"> + {(entry.getIn(["data", "products"]) || []).map((product, i) => <div className="ph2-ns w-50-ns" key={i}> + <img src={getAsset(product.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/> + <p>{product.get("text")}</p> + </div>)} + </div> + + <div className="tc"> + <a href="#" className="btn raise">See all products</a> + </div> + </div> + </div> + + <div className="bg-grey-1 pv4"> + <div className="ph3 mw7 center"> + + <div className="flex-l mhn2-l"> + <div className="w-40-l ph2-l"> + <h2 className="f2 b lh-title mb2">{entry.getIn(["data", "values", "heading"])}</h2> + + <p>{entry.getIn(["data", "values", "text"])}</p> + </div> + + <div className="w-60-l ph2-l"> + <img src="/img/home-about-section.jpg" alt="" className="mb3"/> + </div> + </div> + + <div className="tc"> + <a href="{{.buttonLink}}" className="btn raise">Read more</a> + </div> + + </div> + </div> + + + </div> + } +}
\ No newline at end of file diff --git a/src/js/cms-preview-templates/products.js b/src/js/cms-preview-templates/products.js index 547ff33..4316c7d 100644 --- a/src/js/cms-preview-templates/products.js +++ b/src/js/cms-preview-templates/products.js @@ -1,9 +1,11 @@ import React from "react"; import format from "date-fns/format"; +import Jumbotron from "./components/jumbotron"; + export default class PostPreview extends React.Component { render() { - const {entry, getAsset, widgetFor} = this.props; + const {entry, getAsset} = this.props; let image = getAsset(entry.getIn(["data", "image"])); // Bit of a nasty hack to make relative paths work as expected as a background image here @@ -12,21 +14,7 @@ export default class PostPreview extends React.Component { } return <div> - <div className="pv5 pv6-l ph3 bg-center cover" style={{ - backgroundImage: image && `url(${image})` - }}> - <div className="mw7 center ph3"> - <div className="db mb3"> - <div className="mw7 relative bg-fix-primary mb3"> - <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary"> - { entry.getIn(["data", "title"]) } - </h1> - </div> - <div className="mw7 relative bg-fix-primary"> - </div> - </div> - </div> - </div> + <Jumbotron image={image} title={entry.getIn(["data", "title"])} /> <div className="bg-off-white pv4"> <div className="ph3 mw7 center"> @@ -34,7 +22,7 @@ export default class PostPreview extends React.Component { <p className="mb4 mw6">{entry.getIn(["data", "intro", "description"])}</p> <div className="flex-ns flex-wrap mhn2-ns mb3"> - {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}> + {(entry.getIn(["data", "intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}> <img src={blurb.get("image") && getAsset(blurb.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/> <p>{blurb.get("text")}</p> </div>)} diff --git a/src/js/cms-preview-templates/values.js b/src/js/cms-preview-templates/values.js new file mode 100644 index 0000000..173d0c9 --- /dev/null +++ b/src/js/cms-preview-templates/values.js @@ -0,0 +1,46 @@ +import React from "react"; +import { List } from 'immutable'; + +import Jumbotron from "./components/jumbotron"; + +const MediaBlock = ({heading, text, imageUrl, reverse}) => { + const imageContainerClassName = reverse + ? "ph3-m w-50-m" + : "ph3-m w-50-m order-last-m"; + return <div className="flex-m mhn3-m mb4"> + <div className={imageContainerClassName}> + <img src={imageUrl} alt="" className="db mb2" /> + </div> + <div className="ph3-m w-50-m"> + <h3 className="f3 b lh-title mb1">{heading}</h3> + <p>{text}</p> + </div> + </div>; +}; + +export default class ValuesPreview extends React.Component { + render() { + const {entry, getAsset} = this.props; + + let image = getAsset(entry.getIn(["data", "image"])); + + // Bit of a nasty hack to make relative paths work as expected as a background image here + if (image && !image.fileObj) { + image = window.parent.location.protocol + "//" + window.parent.location.host + image; + } + + const entryValues = entry.getIn(["data", "values"]); + const values = entryValues ? entryValues.toJS() : []; + + return <div> + <Jumbotron image={image} title={entry.getIn(["data", "title"])} /> + <div className="bg-off-white pv4"> + <div className="mw7 center ph3 pt4"> + {values.map(({text, heading, imageUrl}, i) => + <MediaBlock key={i} text={text} heading={heading} imageUrl={imageUrl} reverse={i % 2 === 0} /> + )} + </div> + </div> + </div>; + } +} |