From c9b572424369b887ae757df04433c7cc84a33fc9 Mon Sep 17 00:00:00 2001 From: samgildea Date: Mon, 3 May 2021 10:28:04 -0400 Subject: [PATCH] #56 process page styling --- src/components/process/process-styles.js | 111 +++++++++++++++++++++++ src/components/process/process.js | 90 ++++++++++++++++++ src/pages/process.js | 38 +++----- src/schemas/process.json | 22 +++-- 4 files changed, 229 insertions(+), 32 deletions(-) create mode 100644 src/components/process/process-styles.js create mode 100644 src/components/process/process.js diff --git a/src/components/process/process-styles.js b/src/components/process/process-styles.js new file mode 100644 index 0000000..259cdf4 --- /dev/null +++ b/src/components/process/process-styles.js @@ -0,0 +1,111 @@ +import styled from "styled-components" +import colors from "../../style/colors" +import dimensions from "../../style/dimensions" +import { + layoutPaddingDesktop, + layoutPaddingMobile, +} from "../../style/variables" +export const ProcessContainer = styled.div`` + +export const HowItWorks = styled.div` + min-height: 100vh; + position: relative; + z-index: 1; +` + +export const HowHeader = styled.div` + padding-top: 216px; + color: ${colors.blue900}; +` + +export const HowImage = styled.div` + img { + width: 627px; + height: 581px; + object-fit: cover; + } +` + +export const HowCarousel = styled.div` + display: flex; + margin-bottom: 242px; +` + +export const HowText = styled.div` + width: 36vw; + background-color: ${colors.white900}; + height: 581px; +` + +export const HowParagraph = styled.div` + padding-left: 90px; + padding-top: 108px; + padding-right: 72px; +` + +export const BlueBackground = styled.div` + width: 63vw; + position: absolute; + right: 0; + min-height: calc(100vh + 242px); + background-color: ${colors.softblue900}; + top: 127px; + z-index: 0; +` + +export const FindSection = styled.div` + position: relative; + min-height: 100vh; +` + +export const FindImage = styled.div` + img { + width: 100vw; + left: -${layoutPaddingDesktop}; + position: absolute; + z-index: 0; + height: 100vh; + object-fit: cover; + } +` +export const FindText = styled.div` + position: relative; + z-index: 1; + color: ${colors.blue900}; + padding-top: 350px; +` +export const FindButton = styled.a` + background-color: ${colors.orange900}; + text-transform: uppercase; + color: ${colors.white900}; + padding-left: 48px; + font-size: 16px; + padding-right: 48px; + padding-top: 16px; + padding-bottom: 16px; +` + +export const StepsSection = styled.div` + + +` + +export const Step = styled.div` + +display: flex; +align-items: center; + +` + +export const StepImage = styled.div` + +margin-top: 230px; +margin-left: -${layoutPaddingDesktop}; + +` + +export const StepText = styled.div` +justify-content: center; +padding-left: 238px; +width: 32vw; +` \ No newline at end of file diff --git a/src/components/process/process.js b/src/components/process/process.js new file mode 100644 index 0000000..48fd234 --- /dev/null +++ b/src/components/process/process.js @@ -0,0 +1,90 @@ +import React from "react" +import { + ProcessContainer, + HowItWorks, + HowHeader, + HowImage, + HowCarousel, + HowText, + HowParagraph, + BlueBackground, + FindSection, + FindImage, + FindText, + FindButton, + StepsSection, + Step, + StepImage, + StepText +} from "./process-styles" +import { H1, P, H2, H3, Body } from "../../style/type-styles" + +export default function Process({ data }) { + return ( + + + + + +

{data.prismicProcessPage.data.how_header}

+ + + + + + + + + + { + data.prismicProcessPage.data.how_images[0].how_paragraph[0] + .text + } + + + + + + + + + + + + +

{data.prismicProcessPage.data.find_header}

+ + + {data.prismicProcessPage.data.find_button_text} + + + + + + {console.log(data.prismicProcessPage.data.steps[0])} + {data.prismicProcessPage.data.steps.map(step => { + return ( + + + + + + + +

+ {step.step_title} +

+ + {step.step_description} + + + + + ) + })} + + + ) +} diff --git a/src/pages/process.js b/src/pages/process.js index 1b5c615..f84ac12 100644 --- a/src/pages/process.js +++ b/src/pages/process.js @@ -1,13 +1,14 @@ import { graphql } from "gatsby" import Layout from "../components/layout" import React from "react" +import ProcessComponent from "../components/process/process" export default function Process({ data }) { const processData = data.prismicProcessPage.data return ( -

{processData.process_header}

+ ) } @@ -16,40 +17,27 @@ export const query = graphql` query ProcessQuery { prismicProcessPage { data { - find_button_destination - find_button_text - find_description - find_header - header_image { - url - dimensions { - width - height - } - } - how_description { - text - } how_header how_images { how_image { url - dimensions { - width - height - } + } + how_paragraph { + text } } - process_header + find_header + find_image { + url + } + + find_button_text + steps { - step_description step_image { url - dimensions { - width - height - } } + step_description step_title } } diff --git a/src/schemas/process.json b/src/schemas/process.json index d067820..5b18ab2 100644 --- a/src/schemas/process.json +++ b/src/schemas/process.json @@ -23,13 +23,6 @@ "label" : "How Header" } }, - "how_description" : { - "type" : "StructuredText", - "config" : { - "multi" : "paragraph", - "label" : "How Description" - } - }, "how_images" : { "type" : "Group", "config" : { @@ -41,6 +34,13 @@ "thumbnails" : [ ], "label" : "How Image" } + }, + "how_paragraph" : { + "type" : "StructuredText", + "config" : { + "multi" : "paragraph", + "label" : "How Paragraph" + } } }, "label" : "How Images" @@ -71,6 +71,14 @@ "config" : { "label" : "Find Button Destination" } + }, + "find_image" : { + "type" : "Image", + "config" : { + "constraint" : { }, + "thumbnails" : [ ], + "label" : "Find Image" + } } }, "Steps" : {