Merge pull request #536 from sharetribe/landing-page-component-boundaries

Landing page component boundaries

src/components/SectionHowItWorks/SectionHowItWorks.css

@@ -1,60 +1,8 @@
 @import '../../marketplace.css';
 
-.root {
-  padding: 0 40px;
-  background-color: var(--matterColorLight);
-
-  @media (--viewportMedium) {
-    padding: 0 30px;
-    background-color: var(--matterColorBright);
-  }
-}
-
-/* A div for specifying the area for a section specific background color */
-.section {
-  /* prevent inner div margin from collapsing and ending up outside this div */
-  overflow: auto;
-
-  background-color: var(--matterColorLight);
-
-  @media (--viewportMedium) {
-    border-radius: 4px 4px 0 0;
-  }
-}
-
-.contentWrapper {
-  @media (--viewportMedium) {
-    max-width: 1052px;
-    margin: 0 auto;
-  }
-}
-
-/* Draw the red bar on top of the section */
-.contentWrapper:before {
-  content: '';
-  display: block;
-  width: 109px;
-  height: 6px;
-  background: var(--marketplaceColor);
-
-  @media (--viewportMedium) {
-    width: 192px;
-    height: 8px;
-  }
-}
-
-.content {
-  margin-top: 37px;
-  margin-bottom: 53px;
-
-  @media (--viewportMedium) {
-    margin-top: 81px;
-    margin-bottom: 86px;
-  }
-}
-
 .title {
   @apply --marketplaceH1FontStyles;
+  margin-top: 0;
 }
 
 .steps {
@@ -63,13 +11,13 @@
 
   @media (--viewportMedium) {
     flex-direction: row;
-    margin-top: 0;
   }
 }
 
 .step {
   @media (--viewportMedium) {
-    margin-right: 76px;
+    width: 324px;
+    margin-right: 40px;
   }
 }
 
@@ -80,12 +28,18 @@
 }
 
 .stepTitle {
+  margin-top: 18px;
+  margin-bottom: 18px;
+
   @media (--viewportMedium) {
+    margin-top: 21px;
     margin-bottom: 18px;
   }
 }
 
 .createListingLink {
+  margin-top: 36px;
+
   @media (--viewportMedium) {
     margin-top: 52px;
   }

src/components/SectionHowItWorks/SectionHowItWorks.js

@@ -13,51 +13,45 @@ const SectionHowItWorks = props => {
   const classes = classNames(rootClassName || css.root, className);
   return (
     <div className={classes}>
-      <div className={css.section}>
-        <div className={css.contentWrapper}>
-          <div className={css.content}>
-            <div className={css.title}>
-              <FormattedMessage id="SectionHowItWorks.titleLineOne" />
-              <br />
-              <FormattedMessage id="SectionHowItWorks.titleLineTwo" />
-            </div>
+      <div className={css.title}>
+        <FormattedMessage id="SectionHowItWorks.titleLineOne" />
+        <br />
+        <FormattedMessage id="SectionHowItWorks.titleLineTwo" />
+      </div>
 
-            <div className={css.steps}>
-              <div className={css.step}>
-                <h2 className={css.stepTitle}>
-                  <FormattedMessage id="SectionHowItWorks.part1Title" />
-                </h2>
-                <p>
-                  <FormattedMessage id="SectionHowItWorks.part1Text" />
-                </p>
-              </div>
-
-              <div className={css.step}>
-                <h2 className={css.stepTitle}>
-                  <FormattedMessage id="SectionHowItWorks.part2Title" />
-                </h2>
-                <p>
-                  <FormattedMessage id="SectionHowItWorks.part2Text" />
-                </p>
-              </div>
-
-              <div className={css.step}>
-                <h2 className={css.stepTitle}>
-                  <FormattedMessage id="SectionHowItWorks.part3Title" />
-                </h2>
-                <p>
-                  <FormattedMessage id="SectionHowItWorks.part3Text" />
-                </p>
-              </div>
-            </div>
-
-            <div className={css.createListingLink}>
-              <NamedLink name="NewListingPage">
-                <FormattedMessage id="SectionHowItWorks.createListingLink" />
-              </NamedLink>
-            </div>
-          </div>
+      <div className={css.steps}>
+        <div className={css.step}>
+          <h2 className={css.stepTitle}>
+            <FormattedMessage id="SectionHowItWorks.part1Title" />
+          </h2>
+          <p>
+            <FormattedMessage id="SectionHowItWorks.part1Text" />
+          </p>
         </div>
+
+        <div className={css.step}>
+          <h2 className={css.stepTitle}>
+            <FormattedMessage id="SectionHowItWorks.part2Title" />
+          </h2>
+          <p>
+            <FormattedMessage id="SectionHowItWorks.part2Text" />
+          </p>
+        </div>
+
+        <div className={css.step}>
+          <h2 className={css.stepTitle}>
+            <FormattedMessage id="SectionHowItWorks.part3Title" />
+          </h2>
+          <p>
+            <FormattedMessage id="SectionHowItWorks.part3Text" />
+          </p>
+        </div>
+      </div>
+
+      <div className={css.createListingLink}>
+        <NamedLink name="NewListingPage">
+          <FormattedMessage id="SectionHowItWorks.createListingLink" />
+        </NamedLink>
       </div>
     </div>
   );

src/components/SectionLocations/SectionLocations.css

@@ -1,29 +1,6 @@
 @import '../../marketplace.css';
 
-.root {
-  padding: 40px 24px;
-
-  @media (--viewportMedium) {
-    padding: 87px 36px;
-  }
-}
-
-.content {
-  @media (--viewportMedium) {
-    max-width: 1052px;
-    margin: 0 auto;
-  }
-}
-
-.title_h1 {
-  margin-top: 0;
-  @media (--viewportMedium) {
-    margin-bottom: 23px;
-  }
-}
-
 .title {
-  /* Font style */
   @apply --marketplaceH1FontStyles;
 
   margin-top: 0;
@@ -51,29 +28,28 @@
 
 .location {
   width: 100%;
-  margin-bottom: 27px;
+  margin-top: 25px;
 
   /* Remove link's hover effect */
   &:hover {
     text-decoration: none;
   }
-}
 
-.location:nth-of-type(1) {
   @media (--viewportMedium) {
-    margin-right: 20px;
+    margin-top: 0;
   }
 }
 
-.location:nth-of-type(2) {
+.location {
   @media (--viewportMedium) {
-    margin: 0 20px;
+    margin-right: 40px;
+    margin-bottom: 0;
   }
 }
 
-.location:nth-of-type(3) {
+.location:last-of-type {
   @media (--viewportMedium) {
-    margin-left: 20px;
+    margin-right: 0;
   }
 }
 
@@ -115,7 +91,12 @@
 .linkText {
   @apply --marketplaceH2FontStyles;
   color: var(--matterColor);
+  margin-top: 15px;
   margin-bottom: 0;
+
+  @media (--viewportMedium) {
+    margin-top: 21px;
+  }
 }
 
 .locationName {

src/components/SectionLocations/SectionLocations.js

@@ -37,32 +37,30 @@ const SectionLocations = props => {
 
   return (
     <div className={classes}>
-      <div className={css.content}>
-        <div className={css.title}>
-          <FormattedMessage id="SectionLocations.title" />
-        </div>
-        <div className={css.paragraph}>
-          <p>
-            <FormattedMessage id="SectionLocations.subtitle" />
-          </p>
-        </div>
-        <div className={css.locations}>
-          {locationLink(
-            'Helsinki',
-            helsinkiImage,
-            '?address=Helsinki%2C%20Finland&bounds=60.2978389%2C25.254484899999966%2C59.9224887%2C24.782875800000056&country=FI&origin=60.16985569999999%2C24.93837910000002'
-          )}
-          {locationLink(
-            'Rovaniemi',
-            rovaniemiImage,
-            '?address=Rovaniemi%2C%20Finland&bounds=67.18452510000002%2C27.32667850000007%2C66.1553745%2C24.736871199999996&country=FI&origin=66.50394779999999%2C25.729390599999988'
-          )}
-          {locationLink(
-            'Ruka',
-            rukaImage,
-            '?address=Ruka%2C%20Finland&bounds=66.1704578%2C29.14246849999995%2C66.1614402%2C29.110453699999994&country=FI&origin=66.16594940000002%2C29.12646110000003'
-          )}
-        </div>
+      <div className={css.title}>
+        <FormattedMessage id="SectionLocations.title" />
+      </div>
+      <div className={css.paragraph}>
+        <p>
+          <FormattedMessage id="SectionLocations.subtitle" />
+        </p>
+      </div>
+      <div className={css.locations}>
+        {locationLink(
+          'Helsinki',
+          helsinkiImage,
+          '?address=Helsinki%2C%20Finland&bounds=60.2978389%2C25.254484899999966%2C59.9224887%2C24.782875800000056&country=FI&origin=60.16985569999999%2C24.93837910000002'
+        )}
+        {locationLink(
+          'Rovaniemi',
+          rovaniemiImage,
+          '?address=Rovaniemi%2C%20Finland&bounds=67.18452510000002%2C27.32667850000007%2C66.1553745%2C24.736871199999996&country=FI&origin=66.50394779999999%2C25.729390599999988'
+        )}
+        {locationLink(
+          'Ruka',
+          rukaImage,
+          '?address=Ruka%2C%20Finland&bounds=66.1704578%2C29.14246849999995%2C66.1614402%2C29.110453699999994&country=FI&origin=66.16594940000002%2C29.12646110000003'
+        )}
       </div>
     </div>
   );

src/containers/LandingPage/LandingPage.css

@@ -1,5 +1,10 @@
 @import '../../marketplace.css';
 
+:root {
+  --sectionMarginTop: 94px;
+  --sectionMarginTopMobile: 40px;
+}
+
 .root {
 }
 
@@ -32,3 +37,60 @@
     border-radius: 4px;
   }
 }
+
+.sections {
+  margin: 0;
+
+  @media (--viewportMedium) {
+    padding: 1px 30px 0 30px;
+  }
+}
+
+.section {
+  overflow: auto;
+}
+
+/* Square corners for the last section if it's even */
+.section:nth-of-type(2n):last-of-type {
+  @media (--viewportMedium) {
+    border-radius: 4px 4px 0 0;
+  }
+}
+
+/* Every other section has a light background */
+.section:nth-of-type(2n) {
+  background-color: var(--matterColorLight);
+  @media (--viewportMedium) {
+    border-radius: 4px;
+  }
+}
+
+.sectionContent {
+  margin: var(--sectionMarginTopMobile) 24px 51px 24px;
+
+  @media (--viewportMedium) {
+    max-width: 1052px;
+    margin: var(--sectionMarginTop) auto 93px auto;
+  }
+}
+
+/* A red top bar on top of light sections */
+.section:nth-of-type(2n) .sectionContent:before {
+  background: var(--marketplaceColor);
+  content: '';
+  display: block;
+  width: 109px;
+  height: 6px;
+
+  /* Place the bar on top of .sectionContent top margin */
+  position: relative;
+  top: calc(-1 * var(--sectionMarginTopMobile));
+
+  @media (--viewportMedium) {
+    width: 192px;
+    height: 8px;
+
+    /* Place the bar on top of .sectionContent top margin */
+    top: calc(-1 * var(--sectionMarginTop));
+  }
+}

src/containers/LandingPage/LandingPage.js

@@ -59,8 +59,18 @@ export const LandingPageComponent = props => {
           <div className={css.heroContainer}>
             <SectionHero className={css.hero} history={history} location={location} />
           </div>
-          <SectionLocations />
-          <SectionHowItWorks />
+          <ul className={css.sections}>
+            <li className={css.section}>
+              <div className={css.sectionContent}>
+                <SectionLocations />
+              </div>
+            </li>
+            <li className={css.section}>
+              <div className={css.sectionContent}>
+                <SectionHowItWorks />
+              </div>
+            </li>
+          </ul>
         </LayoutWrapperMain>
         <LayoutWrapperFooter>
           <Footer />

src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap

@@ -66,14 +66,24 @@ exports[`LandingPage matches snapshot 1`] = `
           rootClassName={null}
         />
       </div>
-      <SectionLocations
-        className={null}
-        rootClassName={null}
-      />
-      <SectionHowItWorks
-        className={null}
-        rootClassName={null}
-      />
+      <ul>
+        <li>
+          <div>
+            <SectionLocations
+              className={null}
+              rootClassName={null}
+            />
+          </div>
+        </li>
+        <li>
+          <div>
+            <SectionHowItWorks
+              className={null}
+              rootClassName={null}
+            />
+          </div>
+        </li>
+      </ul>
     </LayoutWrapperMain>
     <LayoutWrapperFooter
       className={null}