diff --git a/src/components/languageSwitcher/LanguageSwitcher.js b/src/components/languageSwitcher/LanguageSwitcher.js index 9a0a15f..807bc34 100644 --- a/src/components/languageSwitcher/LanguageSwitcher.js +++ b/src/components/languageSwitcher/LanguageSwitcher.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { FormattedMessage as Message } from 'react-intl'; +import { FormattedMessage as Message, intlShape } from 'react-intl'; import { requireLocaleFlag } from 'functions'; import LANGS from 'i18n/index.json'; @@ -13,6 +13,8 @@ import icons from 'components/ui/icons.scss'; import styles from './languageSwitcher.scss'; import messages from './languageSwitcher.intl.json'; +const improveTranslationUrl = 'http://ely.by/erickskrauch/posts/174943'; + class LanguageSwitcher extends Component { static displayName = 'LanguageSwitcher'; @@ -22,6 +24,10 @@ class LanguageSwitcher extends Component { changeLang: PropTypes.func, }; + static contextTypes = { + intl: intlShape.isRequired, + }; + state = { items: [], filter: '', @@ -56,15 +62,10 @@ class LanguageSwitcher extends Component { formStyles.lightTextField, formStyles.greenTextField )} - placeholder={ - - {(placeholder) => ( - {placeholder} - )} - - } + placeholder={this.context.intl.formatMessage(messages.startTyping)} onChange={this.onFilterUpdate()} onKeyPress={this.onFilterKeyPress()} + autoFocus /> @@ -89,7 +90,7 @@ class LanguageSwitcher extends Component {
+ ) @@ -184,7 +185,7 @@ class LanguageSwitcher extends Component { this.changeLang(locales[0]); }; - }; + } } import { connect } from 'react-redux'; diff --git a/src/components/languageSwitcher/languageSwitcher.scss b/src/components/languageSwitcher/languageSwitcher.scss index b36e093..0246940 100644 --- a/src/components/languageSwitcher/languageSwitcher.scss +++ b/src/components/languageSwitcher/languageSwitcher.scss @@ -13,7 +13,11 @@ display: flex; flex-direction: column; - max-height: 550px; + max-height: calc(100vh - 132px); + + @media screen and (min-height: 630px) { + max-height: 500px; + } } .searchBox { @@ -135,6 +139,12 @@ $languageListBorderStyle: 1px solid #eee; padding: 10px; display: flex; flex-shrink: 0; + + @media screen and (max-height: 455px) { + & { + display: none; + } + } } .improveTranslatesIcon { diff --git a/yarn.lock b/yarn.lock index 960a01c..bd14905 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2799,6 +2799,10 @@ find-up@^1.0.0: path-exists "^2.0.0" pinkie-promise "^2.0.0" +flag-icon-css@^2.8.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-2.9.0.tgz#5793c15244e3c63ae36631478a758a3fc29c86be" + flat-cache@^1.2.1: version "1.3.0" resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"