From f3290d8de8ae08b702e20e94318bcbed18356e8c Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Thu, 2 Nov 2017 23:10:57 +0200 Subject: [PATCH 1/7] Remove an unused class --- src/components/SectionLocations/SectionLocations.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/SectionLocations/SectionLocations.css b/src/components/SectionLocations/SectionLocations.css index 1fddd900..d702d6ac 100644 --- a/src/components/SectionLocations/SectionLocations.css +++ b/src/components/SectionLocations/SectionLocations.css @@ -15,13 +15,6 @@ } } -.title_h1 { - margin-top: 0; - @media (--viewportMedium) { - margin-bottom: 23px; - } -} - .title { /* Font style */ @apply --marketplaceH1FontStyles; From 4150d3cb488ffb20534ba88c31f07c7a79cb33fc Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Fri, 3 Nov 2017 17:17:37 +0200 Subject: [PATCH 2/7] Fix section column margins --- .../SectionHowItWorks/SectionHowItWorks.css | 3 ++- .../SectionLocations/SectionLocations.css | 15 +++++---------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.css b/src/components/SectionHowItWorks/SectionHowItWorks.css index 6375a78b..7dc4c63c 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.css +++ b/src/components/SectionHowItWorks/SectionHowItWorks.css @@ -69,7 +69,8 @@ .step { @media (--viewportMedium) { - margin-right: 76px; + width: 324px; + margin-right: 40px; } } diff --git a/src/components/SectionLocations/SectionLocations.css b/src/components/SectionLocations/SectionLocations.css index d702d6ac..b9f47ddc 100644 --- a/src/components/SectionLocations/SectionLocations.css +++ b/src/components/SectionLocations/SectionLocations.css @@ -52,21 +52,16 @@ } } -.location:nth-of-type(1) { +.location { @media (--viewportMedium) { - margin-right: 20px; + margin-right: 40px; + margin-bottom: 0; } } -.location:nth-of-type(2) { +.location:last-of-type { @media (--viewportMedium) { - margin: 0 20px; - } -} - -.location:nth-of-type(3) { - @media (--viewportMedium) { - margin-left: 20px; + margin-right: 0; } } From 46456d5fc31c6be6e02cddf11d3ff3b7de652b1d Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Fri, 3 Nov 2017 14:41:17 +0200 Subject: [PATCH 3/7] Change section component boundaries --- .../SectionHowItWorks/SectionHowItWorks.css | 56 +------------ .../SectionHowItWorks/SectionHowItWorks.js | 80 +++++++++---------- .../SectionLocations/SectionLocations.css | 16 ---- .../SectionLocations/SectionLocations.js | 50 ++++++------ src/containers/LandingPage/LandingPage.css | 62 ++++++++++++++ src/containers/LandingPage/LandingPage.js | 14 +++- .../__snapshots__/LandingPage.test.js.snap | 26 ++++-- 7 files changed, 156 insertions(+), 148 deletions(-) diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.css b/src/components/SectionHowItWorks/SectionHowItWorks.css index 7dc4c63c..47639b19 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.css +++ b/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 { @@ -87,6 +35,8 @@ } .createListingLink { + margin-top: 36px; + @media (--viewportMedium) { margin-top: 52px; } diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.js b/src/components/SectionHowItWorks/SectionHowItWorks.js index 87c8f5cc..770fa08c 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.js +++ b/src/components/SectionHowItWorks/SectionHowItWorks.js @@ -13,51 +13,45 @@ const SectionHowItWorks = props => { const classes = classNames(rootClassName || css.root, className); return (
-
-
-
-
- -
- -
+
+ +
+ +
-
-
-

- -

-

- -

-
- -
-

- -

-

- -

-
- -
-

- -

-

- -

-
-
- -
- - - -
-
+
+
+

+ +

+

+ +

+ +
+

+ +

+

+ +

+
+ +
+

+ +

+

+ +

+
+
+ +
+ + +
); diff --git a/src/components/SectionLocations/SectionLocations.css b/src/components/SectionLocations/SectionLocations.css index b9f47ddc..59c8b1c3 100644 --- a/src/components/SectionLocations/SectionLocations.css +++ b/src/components/SectionLocations/SectionLocations.css @@ -1,22 +1,6 @@ @import '../../marketplace.css'; -.root { - padding: 40px 24px; - - @media (--viewportMedium) { - padding: 87px 36px; - } -} - -.content { - @media (--viewportMedium) { - max-width: 1052px; - margin: 0 auto; - } -} - .title { - /* Font style */ @apply --marketplaceH1FontStyles; margin-top: 0; diff --git a/src/components/SectionLocations/SectionLocations.js b/src/components/SectionLocations/SectionLocations.js index c6d31c5d..ea0c3a13 100644 --- a/src/components/SectionLocations/SectionLocations.js +++ b/src/components/SectionLocations/SectionLocations.js @@ -37,32 +37,30 @@ const SectionLocations = props => { return (
-
-
- -
-
-

- -

-
-
- {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' - )} -
+
+ +
+
+

+ +

+
+
+ {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' + )}
); diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index a9706a7d..2b4ba9aa 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/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: 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 50px 24px; + + @media (--viewportMedium) { + max-width: 1052px; + margin: var(--sectionMarginTop) 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: -var(--sectionMarginTopMobile); + + @media (--viewportMedium) { + width: 192px; + height: 8px; + + /* Place the bar on top of .sectionContent top margin */ + top: -var(--sectionMarginTop); + } +} diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index 1301b796..b6186e9c 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/src/containers/LandingPage/LandingPage.js @@ -61,8 +61,18 @@ export const LandingPageComponent = props => {
- - +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
diff --git a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap index 50f54864..7aa98828 100644 --- a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap +++ b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap @@ -67,14 +67,24 @@ exports[`LandingPage matches snapshot 1`] = ` rootClassName={null} />
- - +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
Date: Fri, 3 Nov 2017 17:29:36 +0200 Subject: [PATCH 4/7] Fix baseline alignment --- .../SectionHowItWorks/SectionHowItWorks.css | 4 ++++ src/components/SectionLocations/SectionLocations.css | 11 ++++++++++- src/containers/LandingPage/LandingPage.css | 4 ++-- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.css b/src/components/SectionHowItWorks/SectionHowItWorks.css index 47639b19..e68c2c53 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.css +++ b/src/components/SectionHowItWorks/SectionHowItWorks.css @@ -29,7 +29,11 @@ } .stepTitle { + margin-top: 18px; + margin-bottom: 18px; + @media (--viewportMedium) { + margin-top: 21px; margin-bottom: 18px; } } diff --git a/src/components/SectionLocations/SectionLocations.css b/src/components/SectionLocations/SectionLocations.css index 59c8b1c3..3af03050 100644 --- a/src/components/SectionLocations/SectionLocations.css +++ b/src/components/SectionLocations/SectionLocations.css @@ -28,12 +28,16 @@ .location { width: 100%; - margin-bottom: 27px; + margin-top: 25px; /* Remove link's hover effect */ &:hover { text-decoration: none; } + + @media (--viewportMedium) { + margin-top: 0; + } } .location { @@ -88,7 +92,12 @@ .linkText { @apply --marketplaceH2FontStyles; color: var(--matterColor); + margin-top: 15px; margin-bottom: 0; + + @media (--viewportMedium) { + margin-top: 21px; + } } .locationName { diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index 2b4ba9aa..8ef4dfbe 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -66,11 +66,11 @@ } .sectionContent { - margin: var(--sectionMarginTopMobile) 24px 50px 24px; + margin: var(--sectionMarginTopMobile) 24px 51px 24px; @media (--viewportMedium) { max-width: 1052px; - margin: var(--sectionMarginTop) auto; + margin: var(--sectionMarginTop) auto 93px auto; } } From 75ef591777d261ab6e48adb1e734eb09e030271e Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 7 Nov 2017 10:09:31 +0200 Subject: [PATCH 5/7] Remove a useless margin-top declaration --- src/components/SectionHowItWorks/SectionHowItWorks.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.css b/src/components/SectionHowItWorks/SectionHowItWorks.css index e68c2c53..e57521f6 100644 --- a/src/components/SectionHowItWorks/SectionHowItWorks.css +++ b/src/components/SectionHowItWorks/SectionHowItWorks.css @@ -11,7 +11,6 @@ @media (--viewportMedium) { flex-direction: row; - margin-top: 0; } } From f5cd73680d75fa4f7c7612ab24713115f42680d3 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 7 Nov 2017 11:33:42 +0200 Subject: [PATCH 6/7] Change negative top positioning for top bar Use the clac function instead of just using a minus sign in front of the top margin variable for clarity. --- src/containers/LandingPage/LandingPage.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index 8ef4dfbe..f61af474 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -84,13 +84,13 @@ /* Place the bar on top of .sectionContent top margin */ position: relative; - top: -var(--sectionMarginTopMobile); + top: calc(-1 * var(--sectionMarginTopMobile)); @media (--viewportMedium) { width: 192px; height: 8px; /* Place the bar on top of .sectionContent top margin */ - top: -var(--sectionMarginTop); + top: calc(-1 * var(--sectionMarginTop)); } } From 62919c652cf1319e40013a881cf9b6a5018de7b9 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 7 Nov 2017 11:37:17 +0200 Subject: [PATCH 7/7] Fix baseline alignment --- src/containers/LandingPage/LandingPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index f61af474..d5223e09 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -42,7 +42,7 @@ margin: 0; @media (--viewportMedium) { - padding: 0 30px; + padding: 1px 30px 0 30px; } }