Skip to content

Commit

Permalink
#31 updating product page styles
Browse files Browse the repository at this point in the history
  • Loading branch information
samgildea committed May 7, 2021
1 parent 03bce8b commit 7a8276e
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 72 deletions.
62 changes: 60 additions & 2 deletions src/components/product_page/product-page-styles.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,39 @@
import styled from "styled-components"
import dimensions from "../../style/dimensions"
import colors from "../../style/colors"

export const FeaturedProductSection = styled.div`
width: 100%;
margin-top: 40px;
margin-bottom: 148px;
color: ${colors.blue900};
@media (min-width: ${dimensions.maxwidthTablet}px) {
width: 86vw;
display: flex;
}
`

export const FeaturedCTA = styled.div`
margin-top: 64px;
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;
text-decoration: none;
}
`

export const ProductsHeading = styled.div`
padding-top: 135px;
color: ${colors.blue900};
`

export const FeaturedProductImage = styled.div`
img {
width: 47vw;
Expand All @@ -25,6 +48,7 @@ export const FeaturedProductImage = styled.div`
export const FeaturedProductText = styled.div`
margin-left: 5vw;
margin-top: 52px;
color: ${colors.blue900};
@media (max-width: ${dimensions.maxwidthTablet}px) {
margin-left: 0vw;
Expand All @@ -46,11 +70,45 @@ export const ProductImage = styled.div`
width: 21vw;
height: 245px;
img {
width: 21vw;
height: 245px;
object-fit: cover;
}
@media (max-width: ${dimensions.maxwidthTablet}px) {
width: 100%;
img {
width: 100%;
height: 244px;
object-fit: cover;
}
}
`

export const HomeownerSection = styled.div``
export const HomeownerSection = styled.div`
color: ${colors.blue900};
`

export const CommercialSection = styled.div`
color: ${colors.blue900};
`

export const ProductCTA = styled.div`
margin-top: 58px;
margin-bottom: 58px;
export const CommercialSection = styled.div``
a {
padding-right: 60px;
padding-left: 60px;
padding-top: 16px;
padding-bottom: 16px;
border: solid ${colors.orange900}; 1px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: ${colors.orange900};
}
`
56 changes: 47 additions & 9 deletions src/components/product_page/product-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,20 @@ import {
ProductImage,
HomeownerSection,
CommercialSection,
ProductsHeading,
FeaturedCTA,
ProductCTA,
} from "./product-page-styles"

export default function ProductSection({ data }) {
return (
<div>
<H1>{data.product_page_main_heading}</H1>
<ProductsHeading>
<H1>{data.product_page_main_heading}</H1>
</ProductsHeading>
<FeaturedProductSection>
<FeaturedProductImage>
{console.log(data.featured_product_image)}
<img
src={data.featured_product_image.url}
alt={data.featured_product_image.alt}
Expand All @@ -25,6 +31,12 @@ export default function ProductSection({ data }) {
<Sub1>{data.featured_product_heading}</Sub1>
<H2>{data.featured_product_name}</H2>
<Body>{data.featured_product_description}</Body>
<FeaturedCTA>
{console.log(data)}
<a href={data.learn_more_button_text_destination}>
{data.learn_more_button_text}
</a>
</FeaturedCTA>
</FeaturedProductText>
</FeaturedProductSection>

Expand All @@ -36,13 +48,25 @@ export default function ProductSection({ data }) {
product.product.document.data.product_type === "Homeowner" && (
<div>
<ProductImage>
<img
src={product.product.document.data.product_images[0].image.url}
alt={product.product.document.data.product_images[0].image.alt}/>
<img
src={
product.product.document.data.product_images[0].image
.url
}
alt={
product.product.document.data.product_images[0].image
.alt
}
/>
</ProductImage>
<H2>{product.product.document.data.product_title}</H2>
<H3>{product.product.document.data.product_price}</H3>
<Body></Body>
<Body>{product.product_description}</Body>
<ProductCTA>
<a href={`/${product.product.document.uid}`}>
{product.button_text}
</a>
</ProductCTA>
</div>
)
)
Expand All @@ -53,18 +77,32 @@ export default function ProductSection({ data }) {
<CommercialSection>
<Sub1>{data.model_scope[1].model_scope_heading}</Sub1>
<ProductsGroup>
{console.log(data.products)}
{data.products.map(product => {
return (
product.product.document.data.product_type === "Commercial" && (
<div>
<ProductImage>
<img
src={product.product.document.data.product_images[0].image.url}
alt={product.product.document.data.product_images[0].image.alt}/>
<img
src={
product.product.document.data.product_images[0].image
.url
}
alt={
product.product.document.data.product_images[0].image
.alt
}
/>
</ProductImage>
<H2>{product.product.document.data.product_title}</H2>

<H3>{product.product.document.data.product_price}</H3>
<Body></Body>
<Body>{product.product_description}</Body>
<ProductCTA>
<a href={`/${product.product.document.uid}`}>
{product.button_text}
</a>
</ProductCTA>
</div>
)
)
Expand Down
5 changes: 4 additions & 1 deletion src/pages/products.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function ProductSection({ data }) {

return (
<Layout>
<ProductPage data={productSectionData}/>
<ProductPage data={productSectionData} />
</Layout>
)
}
Expand All @@ -32,9 +32,12 @@ export const query = graphql`
product_page_main_heading
products {
button_text
product_description
product {
document {
... on PrismicProduct {
uid
data {
product_title
button_destination
Expand Down
132 changes: 72 additions & 60 deletions src/schemas/product_page.json
Original file line number Diff line number Diff line change
@@ -1,89 +1,101 @@
{
"Main" : { },
"Featured Section" : {
"product_page_main_heading" : {
"type" : "Text",
"config" : {
"label" : "Product Page Main Heading"
"Main": {},
"Featured Section": {
"product_page_main_heading": {
"type": "Text",
"config": {
"label": "Product Page Main Heading"
}
},
"featured_product_heading" : {
"type" : "Text",
"config" : {
"label" : "Featured Product Heading"
"featured_product_heading": {
"type": "Text",
"config": {
"label": "Featured Product Heading"
}
},
"featured_product_name" : {
"type" : "Text",
"config" : {
"label" : "Featured Product Name"
"featured_product_name": {
"type": "Text",
"config": {
"label": "Featured Product Name"
}
},
"featured_product_description" : {
"type" : "Text",
"config" : {
"label" : "Featured Product Description"
"featured_product_description": {
"type": "Text",
"config": {
"label": "Featured Product Description"
}
},
"featured_product_image" : {
"type" : "Image",
"config" : {
"constraint" : { },
"thumbnails" : [ ],
"label" : "Featured Product Image"
"featured_product_image": {
"type": "Image",
"config": {
"constraint": {},
"thumbnails": [],
"label": "Featured Product Image"
}
},
"learn_more_button_text" : {
"type" : "Text",
"config" : {
"label" : "Learn More Button Text"
"learn_more_button_text": {
"type": "Text",
"config": {
"label": "Learn More Button Text"
}
},
"learn_more_button_text_destination" : {
"type" : "Text",
"config" : {
"label" : "Learn More Button Text Destination"
"learn_more_button_text_destination": {
"type": "Text",
"config": {
"label": "Learn More Button Text Destination"
}
}
},
"Models Section" : {
"model_scope" : {
"type" : "Group",
"config" : {
"fields" : {
"model_scope_heading" : {
"type" : "Text",
"config" : {
"label" : "Model Scope Heading"
"Models Section": {
"model_scope": {
"type": "Group",
"config": {
"fields": {
"model_scope_heading": {
"type": "Text",
"config": {
"label": "Model Scope Heading"
}
}
},
"label" : "Model Scope"
"label": "Model Scope"
}
},
"products" : {
"type" : "Group",
"config" : {
"fields" : {
"product" : {
"type" : "Link",
"config" : {
"select" : "document",
"customtypes" : [ "product" ],
"label" : "product"
"products": {
"type": "Group",
"config": {
"fields": {
"product": {
"type": "Link",
"config": {
"select": "document",
"customtypes": ["product"],
"label": "product"
}
},
"button_text": {
"type": "Text",
"config": {
"label": "Button Text"
}
},
"product_description": {
"type": "Text",
"config": {
"label": "Product Description"
}
}
},
"label" : "Products"
"label": "Products"
}
},
"test" : {
"type" : "Link",
"config" : {
"select" : "document",
"customtypes" : [ "product" ],
"label" : "test"
"test": {
"type": "Link",
"config": {
"select": "document",
"customtypes": ["product"],
"label": "test"
}
}
}
}
}

0 comments on commit 7a8276e

Please sign in to comment.