diff --git a/src/components/SectionHero/SectionHero.css b/src/components/SectionHero/SectionHero.css index 14c3478e..c5eb07c9 100644 --- a/src/components/SectionHero/SectionHero.css +++ b/src/components/SectionHero/SectionHero.css @@ -47,15 +47,27 @@ height: 100%; /* Text positioning is done with paddings */ - padding: 0 24px 0 24px; +} - @media (--viewportMedium) { - padding: 0 0 0 7.5vw; - } +.heroContent { + margin: 0 24px 0 24px; - @media (--viewportLarge) { - padding: 0 0 0 15vw; - } + @media (--viewportMedium) { + margin: 0 7.5vw 0 7.5vw; + } + + /* Special viewport for adjusting the heroContent's placement */ + + @media only screen and (min-width: 1025px) and (max-width: 1366px) { + padding: 0 36px 0 36px; + } + + @media only screen and (min-width: 1367px) { + margin: 0 auto; + max-width: calc(1052px + 36px + 36px); + width: 100%; + padding: 0 36px 0 36px; + } } .heroMainTitle { @@ -85,39 +97,14 @@ } } -.mobileSearchButton { - border-radius: 4px; - flex-shrink: 0; - +.heroButton { + @apply --marketplaceButtonStyles; @apply --SectionHero_animation; - animation-delay: 0.8s; - @media (--viewportMedium) { - display: none; - } -} - -.searchIcon { - vertical-align: top; - stroke: var(--matterColorLight); - width: 16px; - height: 16px; - margin-top: 5px; - margin-right: 10px; -} - -.desktopSearchForm { - display: none; - background-color: var(--matterColorLight); - border-bottom: 4px solid var(--marketplaceColor); - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - - @apply --SectionHero_animation; animation-delay: 0.8s; @media (--viewportMedium) { display: block; - width: 400px; + width: 260px; } } diff --git a/src/components/SectionHero/SectionHero.js b/src/components/SectionHero/SectionHero.js index dd27ef9d..7d3e5e16 100644 --- a/src/components/SectionHero/SectionHero.js +++ b/src/components/SectionHero/SectionHero.js @@ -1,66 +1,45 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { string } from 'prop-types'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { stringify } from '../../util/urlHelpers'; -import { createResourceLocatorString } from '../../util/routes'; -import routeConfiguration from '../../routeConfiguration'; -import { IconSearch, Button } from '../../components'; -import { LocationSearchForm } from '../../forms'; -import config from '../../config'; +import { NamedLink } from '../../components'; import css from './SectionHero.css'; const SectionHero = props => { - const { rootClassName, className, history, location } = props; - - const handleMobileSearchClick = () => { - const params = { mobilesearch: 'open' }; - const path = `${location.pathname}?${stringify(params)}`; - history.push(path); - }; - - const handleSearchSubmit = values => { - const { search, selectedPlace } = values.location; - const { origin, bounds } = selectedPlace; - const originMaybe = config.sortSearchByDistance ? { origin } : {}; - const searchParams = { ...originMaybe, address: search, bounds }; - history.push(createResourceLocatorString('SearchPage', routeConfiguration(), {}, searchParams)); - }; + const { rootClassName, className } = props; const classes = classNames(rootClassName || css.root, className); return (
-

- -

-

- -

- - +
+

+ +

+

+ +

+ + + +
); }; SectionHero.defaultProps = { rootClassName: null, className: null }; -const { string, shape, func } = PropTypes; - SectionHero.propTypes = { rootClassName: string, className: string, - - history: shape({ - push: func.isRequired, - }).isRequired, - location: shape({ - search: string.isRequired, - }).isRequired, }; export default SectionHero; diff --git a/src/components/SectionLocations/SectionLocations.css b/src/components/SectionLocations/SectionLocations.css index b97ee921..e4f06141 100644 --- a/src/components/SectionLocations/SectionLocations.css +++ b/src/components/SectionLocations/SectionLocations.css @@ -11,10 +11,6 @@ } } -.paragraph { - max-width: 672px; -} - .locations { display: flex; flex-direction: column; diff --git a/src/components/SectionLocations/SectionLocations.js b/src/components/SectionLocations/SectionLocations.js index e86aa5d1..1d13f246 100644 --- a/src/components/SectionLocations/SectionLocations.js +++ b/src/components/SectionLocations/SectionLocations.js @@ -40,11 +40,6 @@ const SectionLocations = props => {
-
-

- -

-
{locationLink( 'Helsinki', diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css index f0e7cd8e..b99cb1f0 100644 --- a/src/containers/LandingPage/LandingPage.css +++ b/src/containers/LandingPage/LandingPage.css @@ -31,13 +31,14 @@ @media (--viewportMedium) { min-height: 500px; - height: 80vh; + height: 70vh; max-height: none; } @media (--viewportLarge) { + max-height: 800px; min-height: 600px; - height: calc(100vh - var(--topbarHeightDesktop)); + height: calc(70vh - var(--topbarHeightDesktop)); } } @@ -94,6 +95,11 @@ } } +.sectionContentFirstChild { + composes: sectionContent; + margin-top: 3vh; +} + /* A bar on top of light sections */ .section:nth-of-type(2n) .sectionContent:before { background: var(--marketplaceColor); diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index bbea0d38..bd6b1055 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/src/containers/LandingPage/LandingPage.js @@ -63,7 +63,7 @@ export const LandingPageComponent = props => {