diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css index e5680104..3816caf5 100644 --- a/src/containers/Topbar/Topbar.css +++ b/src/containers/Topbar/Topbar.css @@ -57,3 +57,20 @@ .rootSearchIcon { stroke: var(--matterColor); } + +.searchContainer { + position: relative; + height: 100%; +} + +.mobileHelp { + color: var(--matterColorAnti); + margin: 0 24px; + + /* Absolute position to prevent changing search form positioning */ + position: absolute; + top: 115px; + + /* Pull text behind search suggestions */ + z-index: -1; +} diff --git a/src/containers/Topbar/Topbar.js b/src/containers/Topbar/Topbar.js index 253c9e13..23b4bc50 100644 --- a/src/containers/Topbar/Topbar.js +++ b/src/containers/Topbar/Topbar.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react'; import { compose } from 'redux'; import { connect } from 'react-redux'; -import { intlShape, injectIntl } from 'react-intl'; +import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; import { pickBy } from 'lodash'; import { logout, authenticationInProgress } from '../../ducks/Auth.duck'; import { FlatButton, Modal, NamedLink, TopbarDesktop, TopbarMobileMenu } from '../../components'; @@ -158,11 +158,16 @@ class TopbarComponent extends Component { onClose={this.handleMobileSearchClose} togglePageClassNames={togglePageClassNames} > - +
+ +

+ +

+
); diff --git a/src/translations/en.json b/src/translations/en.json index 88f57e10..2901038b 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -185,6 +185,7 @@ "StripePaymentForm.submitPaymentInfo": "Send request", "Topbar.logoIcon": "Go to homepage", "Topbar.menuIcon": "Open menu", + "Topbar.mobileSearchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district – \"Sörnäinen\".", "Topbar.searchIcon": "Open search", "TopbarDesktop.createListing": "+ Add your sauna", "TopbarDesktop.inbox": "Inbox", @@ -201,5 +202,6 @@ "TopbarMobileMenu.signupOrLogin": "{signup} or {login}", "TopbarMobileMenu.unauthorizedGreeting": "Hello there,{lineBreak}would you like to {signupOrLogin}?", "TopbarSearchForm.placeholder": "Search saunas...", + "TopbarSearchForm.placeholder": "Search saunas...", "TopbarSearchForm.searchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district \"Sörnäinen\"." }