mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-29 05:00:43 +10:00
replace location search with a browse button
This commit is contained in:
Janne Koivistoinen
parent
5bd4873f25
commit
1263f5db3a
9 changed files with 68 additions and 104 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={classes}>
|
||||
<h1 className={css.heroMainTitle}>
|
||||
<FormattedMessage id="SectionHero.title" />
|
||||
</h1>
|
||||
<h2 className={css.heroSubTitle}>
|
||||
<FormattedMessage id="SectionHero.subTitle" />
|
||||
</h2>
|
||||
<Button className={css.mobileSearchButton} onClick={handleMobileSearchClick}>
|
||||
<IconSearch rootClassName={css.searchIcon} />
|
||||
<FormattedMessage id="SectionHero.mobileSearchButtonText" />
|
||||
</Button>
|
||||
<LocationSearchForm className={css.desktopSearchForm} onSubmit={handleSearchSubmit} />
|
||||
<div className={css.heroContent}>
|
||||
<h1 className={css.heroMainTitle}>
|
||||
<FormattedMessage id="SectionHero.title" />
|
||||
</h1>
|
||||
<h2 className={css.heroSubTitle}>
|
||||
<FormattedMessage id="SectionHero.subTitle" />
|
||||
</h2>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
's?address=Finland&bounds=70.0922932%2C31.5870999%2C59.693623%2C20.456500199999937',
|
||||
}}
|
||||
className={css.heroButton}
|
||||
>
|
||||
<FormattedMessage id="SectionHero.browseButton" />
|
||||
</NamedLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
max-width: 672px;
|
||||
}
|
||||
|
||||
.locations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -40,11 +40,6 @@ const SectionLocations = props => {
|
|||
<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',
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export const LandingPageComponent = props => {
|
|||
</div>
|
||||
<ul className={css.sections}>
|
||||
<li className={css.section}>
|
||||
<div className={css.sectionContent}>
|
||||
<div className={css.sectionContentFirstChild}>
|
||||
<SectionLocations />
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -177,8 +177,8 @@
|
|||
margin: 0;
|
||||
|
||||
/* Padding is only for <a> elements where button styles are applied,
|
||||
buttons elements should have zero padding */
|
||||
padding: 20px 0 0 0;
|
||||
buttons elements should have zero padding */
|
||||
padding: 16px 0 0 0;
|
||||
|
||||
/* Borders */
|
||||
border: none;
|
||||
|
|
@ -212,6 +212,7 @@
|
|||
|
||||
@media (--viewportMedium) {
|
||||
min-height: 65px;
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
}
|
||||
--marketplaceButtonStylesPrimary {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
margin-bottom: 31px;
|
||||
}
|
||||
|
||||
@media (min-width: 1441px) {
|
||||
@media (min-width: 1681px) {
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
letter-spacing: -2px;
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
font-weight: var(--fontWeightBold);
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.5px;
|
||||
letter-spacing: -1px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 6px */
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
font-size: 48px;
|
||||
font-weight: var(--fontWeightSemiBold);
|
||||
line-height: 56px;
|
||||
letter-spacing: -1px;
|
||||
letter-spacing: -2px;
|
||||
/* margin-top + n * line-height + margin-bottom => x * 8px */
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
|
|
|
|||
|
|
@ -556,20 +556,20 @@
|
|||
"SearchResultsPanel.nextPage": "Next page",
|
||||
"SearchResultsPanel.previousPage": "Previous page",
|
||||
"SectionHero.mobileSearchButtonText": "Search saunas",
|
||||
"SectionHero.subTitle": "The largest online community to rent saunas in Finland.",
|
||||
"SectionHero.title": "Book saunas everywhere.",
|
||||
"SectionHowItWorks.createListingLink": "PS. You can also become a Saunatime host in just a few clicks.",
|
||||
"SectionHowItWorks.part1Text": "Start by searching for a location. Once you find a sauna you like, simply check the availability, book it, and make a secure payment right away.",
|
||||
"SectionHowItWorks.part1Title": "1. Browse and book",
|
||||
"SectionHowItWorks.part2Text": "Meet your host on the chosen date and enjoy a home sauna experience. We'll handle the payment to the host after your experience.",
|
||||
"SectionHowItWorks.part2Title": "2. Have a great bath",
|
||||
"SectionHowItWorks.part3Text": "If you enjoyed the experience, let others know by reviewing your sauna host. Help others know where to go.",
|
||||
"SectionHowItWorks.part3Title": "3. Review the host",
|
||||
"SectionHero.subTitle": "The largest online community to rent saunas in Finland.",
|
||||
"SectionHero.browseButton": "Browse saunas",
|
||||
"SectionLocations.title": "Explore exotic locations in Finland",
|
||||
"SectionHowItWorks.createListingLink": "PS. You can also become a Saunatime host in just a few clicks!",
|
||||
"SectionHowItWorks.titleLineOne": "The sauna ritual",
|
||||
"SectionHowItWorks.titleLineTwo": "(or how Saunatime works).",
|
||||
"SectionHowItWorks.part1Title": "1. Browse and book",
|
||||
"SectionHowItWorks.part1Text": "Start by searching for a location. Once you find a sauna you like, simply check the availability, book it, and make a secure payment right away.",
|
||||
"SectionHowItWorks.part2Title": "2. Have a great bath",
|
||||
"SectionHowItWorks.part2Text": "Meet your host on the chosen date and enjoy a home sauna experience. We'll handle the payment to the host after your experience.",
|
||||
"SectionHowItWorks.part3Title": "3. Review the host",
|
||||
"SectionHowItWorks.part3Text": "If you enjoyed the experience, let others know by reviewing your sauna host. Help others know where to go.",
|
||||
"SectionLocations.listingsInLocation": "Saunas in {location}",
|
||||
"SectionLocations.subtitle": "We have more than 1000 saunas around Finland. Here are some of our most popular locations.",
|
||||
"SectionLocations.title": "We have wooden saunas, electric saunas, and even tent saunas.",
|
||||
"SelectMultipleFilter.labelSelected": "{labelText} • {count}",
|
||||
"SelectMultipleFilterForm.cancel": "Cancel",
|
||||
"SelectMultipleFilterForm.clear": "Clear",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue