From 327ae8b6ee05d0b36daf4f1568f96df5fb17b2dd Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Fri, 22 Dec 2017 15:33:19 +0200 Subject: [PATCH 1/3] profile page and hero bug fixes --- src/components/Footer/Footer.css | 10 +++++++++- src/components/UserCard/UserCard.css | 5 +++-- src/containers/LandingPage/LandingPage.css | 8 ++++++-- src/containers/ProfilePage/ProfilePage.css | 12 +++++++++++- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 656d8113..3880a61f 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -10,6 +10,10 @@ background-color: var(--matterColorBright); @media (--viewportMedium) { + padding: 0 30px 33px 30px; + } + + @media (--viewportLarge) { padding: 0 30px 81px 30px; border-top: none; } @@ -19,6 +23,10 @@ * view from the outermost paddings*/ .topBorderWrapper { @media (--viewportMedium) { + padding-top: 41px; + } + + @media (--viewportLarge) { padding-top: 73px; border-top-style: solid; @@ -62,7 +70,7 @@ flex-direction: row; justify-content: space-between; width: 100%; - margin-bottom: 60px; + margin-bottom: 42px; @media (--viewportMedium) { margin-bottom: 0; diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index 2af3e62a..5555d3bc 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -34,10 +34,9 @@ .desktopBio { /* Preserve newlines, but collapse other whitespace */ white-space: pre-line; - margin: 18px 0 0 0; - transition: all 1s ease-in; + @apply --marketplaceH4FontStyles; @media (--viewportMedium) { margin: 18px 0 0 0; @@ -60,9 +59,11 @@ .showMore { margin-left: 5px; + @apply --marketplaceH4FontStyles; } .links { + @apply --marketplaceH4FontStyles; } .withBioMissingAbove { diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index bc466a45..3132f5f0 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -10,6 +10,7 @@ /* heroContainer gives the height for SectionHero */ /* Safari has a bug with vw padding inside flexbox. Therefore we need an extra div (container) */ +/* If you've lot of content for the hero, multiple lines of text, make sure to adjust min-heights for each media breakpoint accordingly */ .heroContainer { display: flex; flex-direction: column; @@ -19,11 +20,14 @@ padding: 0; @media (--viewportMedium) { - min-height: 80vh; + min-height: 500px; + height: 80vh; + max-height: none; } @media (--viewportLarge) { - min-height: calc(100vh - var(--topbarHeightDesktop)); + min-height: 600px; + height: calc(100vh - var(--topbarHeightDesktop)); } } diff --git a/src/containers/ProfilePage/ProfilePage.css b/src/containers/ProfilePage/ProfilePage.css index 81f883ed..26397adc 100644 --- a/src/containers/ProfilePage/ProfilePage.css +++ b/src/containers/ProfilePage/ProfilePage.css @@ -114,7 +114,8 @@ margin-bottom: 0; @media (--viewportMedium) { - margin-bottom: 0; + margin-top: 48px; + margin-bottom: 8px; } @media (--viewportLarge) { margin-top: 58px; @@ -173,11 +174,20 @@ margin: 24px 0 26px 0; } +.mobileReviews { + margin-bottom: 36px; +} + .desktopReviews { margin-top: 28px; + @media (--viewportMedium) { + margin-bottom: 48px; + } + @media (--viewportLarge) { max-width: 600px; + margin-bottom: 0; } } From 93a056ddcc8c2091fd4dbfdfade97534f7e78d71 Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Fri, 22 Dec 2017 15:42:40 +0200 Subject: [PATCH 2/3] remove the footer logo margins --- src/components/Footer/Footer.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 3880a61f..7aeb0619 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -102,8 +102,6 @@ } .organizationInfo { - margin-left: 36px; - width: 179px; } .organizationDescription { From 53fa50e3fecf90975cf2b92daa61fb67fc2e3b36 Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Fri, 22 Dec 2017 15:47:19 +0200 Subject: [PATCH 3/3] formatting push --- src/components/Footer/Footer.css | 2 +- src/components/UserCard/UserCard.css | 4 ++-- src/containers/LandingPage/LandingPage.css | 10 +++++----- src/containers/ProfilePage/ProfilePage.css | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 7aeb0619..129b41c6 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -13,7 +13,7 @@ padding: 0 30px 33px 30px; } - @media (--viewportLarge) { + @media (--viewportLarge) { padding: 0 30px 81px 30px; border-top: none; } diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index 5555d3bc..a6d58e53 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -59,11 +59,11 @@ .showMore { margin-left: 5px; - @apply --marketplaceH4FontStyles; + @apply --marketplaceH4FontStyles; } .links { - @apply --marketplaceH4FontStyles; + @apply --marketplaceH4FontStyles; } .withBioMissingAbove { diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index 3132f5f0..1dd5ca2b 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -20,14 +20,14 @@ padding: 0; @media (--viewportMedium) { - min-height: 500px; - height: 80vh; - max-height: none; + min-height: 500px; + height: 80vh; + max-height: none; } @media (--viewportLarge) { - min-height: 600px; - height: calc(100vh - var(--topbarHeightDesktop)); + min-height: 600px; + height: calc(100vh - var(--topbarHeightDesktop)); } } diff --git a/src/containers/ProfilePage/ProfilePage.css b/src/containers/ProfilePage/ProfilePage.css index 26397adc..f25bed22 100644 --- a/src/containers/ProfilePage/ProfilePage.css +++ b/src/containers/ProfilePage/ProfilePage.css @@ -114,7 +114,7 @@ margin-bottom: 0; @media (--viewportMedium) { - margin-top: 48px; + margin-top: 48px; margin-bottom: 8px; } @media (--viewportLarge) { @@ -175,14 +175,14 @@ } .mobileReviews { - margin-bottom: 36px; + margin-bottom: 36px; } .desktopReviews { margin-top: 28px; @media (--viewportMedium) { - margin-bottom: 48px; + margin-bottom: 48px; } @media (--viewportLarge) {