#37 Update styling for image highlight section on singular product pa…

…ge for desktop screen size. Styling for mobile screen size needs to be revised for this section.
Scout-NU · Apr 20, 2021 · db32bfe · db32bfe
1 parent bb5b428
commit db32bfe
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 1 deletion.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -1,5 +1,9 @@
 import styled from "styled-components"
 import dimensions from "../../style/dimensions"
+import {
+  layoutPaddingDesktop,
+  layoutPaddingMobile,
+} from "../../style/variables"
 
 export const SingularProductContainer = styled.div``
 
@@ -121,6 +125,64 @@ export const IconCaption = styled.div`
   }
 `
 
+export const ImageHighlightSection = styled.div`
+  padding-top: 76px;
+  position: relative;
+`
+
+export const ImageHighlightHeading = styled.div`
+  padding-top: 147px;
+  margin-left: 4vw;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-top: 43px;
+  }
+`
+
+export const ImageHighlightGroupContainer = styled.div``
+
+export const ImageHighlightGroup = styled.div`
+  &.second-section {
+    position: absolute;
+    right: 0;
+    top: 200px;
+  }
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    // display: flex;
+  }
+`
+
+export const HighlightedImage = styled.div`
+  &.first-image {
+    img {
+      margin-left: -${layoutPaddingDesktop};
+      margin-top: 60px;
+    }
+  }
+`
+
+export const ImageHighlightDescription = styled.div`
+  font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
+  width: 35vw;
+  &.second-section {
+    padding-top: 88px;
+  }
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+    padding-top: 32px;
+  }
+`
+
+export const ThirdSection = styled.div`
+  &.third-section {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    margin-top: 97px;
+    margin-right: -${layoutPaddingDesktop}; 
+    justify-content: space-between;
+  }
+`
+
 export const FeatureSpecSection = styled.div`
   margin-top: 100px;
 `

diff --git a/src/pages/singular-product.js b/src/pages/singular-product.js
@@ -66,6 +66,7 @@ export const query = graphql`
           }
           product_title
           product_type
+          
         }
       }
   }

diff --git a/src/schemas/product.json b/src/schemas/product.json
@@ -137,5 +137,35 @@
           "label" : "Button Destination"
         }
       }
+    },
+    "Image Highlight Section": {
+      "image_highlight_heading": {
+        "type": "Text",
+        "config": {
+          "label": "Image Highlight Heading"
+        }
+      },
+      "image_highlight_group": {
+        "type": "Group",
+        "config": {
+          "fields": {
+            "highlighted_image": {
+              "type": "Image",
+              "config": {
+                "constraint": {},
+                "thumbnails": [],
+                "label": "Highlighted Image"
+              }
+            },
+            "image_highlight_description": {
+              "type": "Text",
+              "config": {
+                "label": "Image Highlight Description"
+              }
+            }
+          },
+          "label": "Image Highlight Group"
+        }
+      }
     }
   }
diff --git a/src/templates/product.js b/src/templates/product.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { graphql } from "gatsby"
-import {H3, P} from "../style/type-styles"
+import {H1, H3, P} from "../style/type-styles"
 import {
   SingularProductContainer,
   HeroSection,
@@ -17,6 +17,13 @@ import {
   Icon,
   IconImage,
   IconCaption,
+  ImageHighlightSection,
+  ImageHighlightHeading,
+  ImageHighlightGroupContainer,
+  ImageHighlightGroup,
+  HighlightedImage,
+  ImageHighlightDescription,
+  ThirdSection,
   FeatureSpecSection,
   FeatureIcon,
   FeatureSpecHeading,
@@ -70,6 +77,34 @@ export default function Product({ data }) {
         </IconContainer>
       </IconSection>
 
+      <ImageHighlightSection>
+      <ImageHighlightHeading>
+          <H1>{products.data.image_highlight_heading}</H1>
+        </ImageHighlightHeading>
+        <ImageHighlightGroupContainer>
+          {products.data.image_highlight_group.map((highlight, id) => {
+            return (
+              <ImageHighlightGroup
+                key={id}
+                className={id == 0 ? "first" : ""}
+                className={id == 1 ? "second-section" : ""}
+              >
+                <ThirdSection className={id == 2 ? "third-section" : ""}>
+                  <HighlightedImage className={id == 0 ? "first-image" : ""}>
+                    <img src={highlight.highlighted_image.url} />
+                  </HighlightedImage>
+                  <ImageHighlightDescription
+                    className={id == 1 ? "second-section" : ""} 
+                  >
+                    {highlight.image_highlight_description}
+                  </ImageHighlightDescription>
+                </ThirdSection>
+              </ImageHighlightGroup>
+            )
+          })}
+        </ImageHighlightGroupContainer>
+      </ImageHighlightSection>
+
       <FeatureSpecSection>
         <FeatureIcon>
           <img src={products.data.feature_icon.url} alt="Orange checklist icon" />
@@ -147,6 +182,17 @@ export const query = graphql`
               }
             }
             product_type
+            image_highlight_group {
+              highlighted_image {
+                dimensions {
+                  height
+                  width
+                }
+                url
+              }
+              image_highlight_description
+            }
+            image_highlight_heading
           }
         }
       }