From e2c8471ce2ab5e84007959d10c7d1fcad239ce81 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sat, 16 Dec 2017 03:36:39 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20placeholder=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=D0=B0=20=D1=8F?=
 =?UTF-8?q?=D0=B7=D1=8B=D0=BA=D0=B0=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20=D0=B0=D0=B2=D1=82=D0=BE=D1=84=D0=BE=D0=BA=D1=83?=
 =?UTF-8?q?=D1=81=20=D0=BF=D1=80=D0=B8=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B?=
 =?UTF-8?q?=D1=82=D0=B8=D0=B8=20=D0=BF=D0=BE=D0=BF=D0=B0=D0=BF=D0=B0=20?=
 =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B0?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B0=D1=82=D0=B5=D0=BB=D1=8F=20=D1=8F=D0=B7?=
 =?UTF-8?q?=D1=8B=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../languageSwitcher/LanguageSwitcher.js      | 21 ++++++++++---------
 .../languageSwitcher/languageSwitcher.scss    | 12 ++++++++++-
 yarn.lock                                     |  4 ++++
 3 files changed, 26 insertions(+), 11 deletions(-)

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={
-                                    <Message {...messages.startTyping}>
-                                        {(placeholder) => (
-                                            {placeholder}
-                                        )}
-                                    </Message>
-                                }
+                                placeholder={this.context.intl.formatMessage(messages.startTyping)}
                                 onChange={this.onFilterUpdate()}
                                 onKeyPress={this.onFilterKeyPress()}
+                                autoFocus
                             />
                             <span className={styles.searchIcon} />
                         </div>
@@ -89,7 +90,7 @@ class LanguageSwitcher extends Component {
                                 <div className={styles.improveTranslatesText}>
                                     <Message {...messages.improveTranslatesDescription} values={{
                                         articleLink: (
-                                            <a href="#">
+                                            <a href={improveTranslationUrl} target="_blank">
                                                 <Message {...messages.improveTranslatesArticleLink} />
                                             </a>
                                         )
@@ -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"