From 4fdb045f24b961ec3db6de444467f5132bfe4f7c Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 26 May 2016 17:51:17 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D0=B4=D0=BB=D1=8F=20=D1=84=D0=BE?= =?UTF-8?q?=D1=80=D0=BC=20=D0=B2=20=D0=BF=D1=80=D0=BE=D1=84=D0=B8=D0=BB?= =?UTF-8?q?=D0=B5=20=D0=92=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D1=8B=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B2=20=D0=BB=D0=BE=D0=B3?= =?UTF-8?q?=D0=B8=D0=BA=D1=83=20=D1=84=D0=BE=D1=80=D0=BC=D0=B8=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=80=D0=B0=D0=B7=D0=BD=D0=BE?= =?UTF-8?q?=D0=BD=D0=B0=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D1=85=20=D1=81=D1=82=D1=80=D0=B5=D0=BB=D0=BE=D0=BA=20?= =?UTF-8?q?=D0=9B=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0=20=D1=81=D1=82=D1=80=D0=B5?= =?UTF-8?q?=D0=BB=D0=BA=D0=B8=20"=D0=BD=D0=B0=D0=B7=D0=B0=D0=B4"=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20=D1=84=D0=BE=D1=80=D0=BC=20=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D1=84=D0=B8=D0=BB=D1=8F=20=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=B2=20=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C?= =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile/ProfileForm.intl.json | 3 ++ src/components/profile/ProfileForm.jsx | 25 ++++++++++ .../profile/changeEmail/ChangeEmail.jsx | 3 +- .../profile/changePassword/ChangePassword.jsx | 3 +- .../profile/changeUsername/ChangeUsername.jsx | 4 +- src/components/profile/profileForm.scss | 47 ++++++++++++++++--- src/components/ui/icons.scss | 24 ++++++---- src/i18n/en.json | 1 + src/i18n/ru.json | 1 + 9 files changed, 90 insertions(+), 21 deletions(-) create mode 100644 src/components/profile/ProfileForm.intl.json create mode 100644 src/components/profile/ProfileForm.jsx diff --git a/src/components/profile/ProfileForm.intl.json b/src/components/profile/ProfileForm.intl.json new file mode 100644 index 0000000..bc52a4c --- /dev/null +++ b/src/components/profile/ProfileForm.intl.json @@ -0,0 +1,3 @@ +{ + "back": "Back" +} diff --git a/src/components/profile/ProfileForm.jsx b/src/components/profile/ProfileForm.jsx new file mode 100644 index 0000000..dc2c18b --- /dev/null +++ b/src/components/profile/ProfileForm.jsx @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +import { FormattedMessage as Message } from 'react-intl'; +import { Link } from 'react-router'; + +import FormComponent from 'components/ui/form/FormComponent'; + +import styles from 'components/profile/profileForm.scss'; + +import messages from './ProfileForm.intl.json'; + +export class BackButton extends FormComponent { + static displayName = 'BackButton'; + + render() { + return ( + + + + + + + ); + } +} diff --git a/src/components/profile/changeEmail/ChangeEmail.jsx b/src/components/profile/changeEmail/ChangeEmail.jsx index 4584aef..94a1f18 100644 --- a/src/components/profile/changeEmail/ChangeEmail.jsx +++ b/src/components/profile/changeEmail/ChangeEmail.jsx @@ -7,6 +7,7 @@ import Helmet from 'react-helmet'; import { Motion, spring } from 'react-motion'; import { Input, Button, Form, FormModel } from 'components/ui/form'; +import { BackButton } from 'components/profile/ProfileForm'; import styles from 'components/profile/profileForm.scss'; import helpLinks from 'components/auth/helpLinks.scss'; import MeasureHeight from 'components/MeasureHeight'; @@ -73,7 +74,7 @@ export default class ChangeEmail extends Component { onInvalid={() => this.forceUpdate()} >
- +
diff --git a/src/components/profile/changePassword/ChangePassword.jsx b/src/components/profile/changePassword/ChangePassword.jsx index 6521c11..7d98760 100644 --- a/src/components/profile/changePassword/ChangePassword.jsx +++ b/src/components/profile/changePassword/ChangePassword.jsx @@ -5,6 +5,7 @@ import { Link } from 'react-router'; import Helmet from 'react-helmet'; import { Input, Button, Checkbox, Form, FormModel } from 'components/ui/form'; +import { BackButton } from 'components/profile/ProfileForm'; import styles from 'components/profile/profileForm.scss'; import messages from './ChangePassword.intl.json'; @@ -31,7 +32,7 @@ export default class ChangePassword extends Component { form={form} >
- +
diff --git a/src/components/profile/changeUsername/ChangeUsername.jsx b/src/components/profile/changeUsername/ChangeUsername.jsx index bf7d11d..3b65ec2 100644 --- a/src/components/profile/changeUsername/ChangeUsername.jsx +++ b/src/components/profile/changeUsername/ChangeUsername.jsx @@ -5,6 +5,7 @@ import { Link } from 'react-router'; import Helmet from 'react-helmet'; import { Input, Button, Form, FormModel } from 'components/ui/form'; +import { BackButton } from 'components/profile/ProfileForm'; import styles from 'components/profile/profileForm.scss'; import messages from './ChangeUsername.intl.json'; @@ -25,7 +26,6 @@ export default class ChangeUsername extends Component { }; } - render() { const {form, username} = this.props; @@ -34,7 +34,7 @@ export default class ChangeUsername extends Component { form={form} >
- +
diff --git a/src/components/profile/profileForm.scss b/src/components/profile/profileForm.scss index cae6aad..bccaf50 100644 --- a/src/components/profile/profileForm.scss +++ b/src/components/profile/profileForm.scss @@ -3,31 +3,38 @@ .contentWithBackButton { position: relative; - width: 400px; + max-width: 400px; margin: 0 auto; } .backButton { - composes: arrow from 'components/ui/icons.scss'; - position: absolute; left: -60px; top: 15px; width: 25px; height: 25px; padding: 15px; - - transform: rotate(90deg); - transition: .3s; + font-size: 25px; color: #ccc; - font-size: 25px; + + transition: .3s; &:hover { color: #9a9a9a; } } +.backIcon { + composes: arrowLeft from 'components/ui/icons.scss'; + + position: relative; +} + +.backText { + display: none; +} + .form { background: #fff; overflow: hidden; // disable margin collapsing @@ -75,3 +82,29 @@ line-height: 1.5; margin-top: 25px; } + +@media (max-width: 525px) { + .contentWithBackButton .title { + padding-top: 23px; + } + + .backButton { + top: 29px; + left: 27px; + padding: 0; + margin: 0; + width: auto; + height: auto; + z-index: 1; + + font-size: 14px; + } + + .backIcon { + bottom: 1px; + } + + .backText { + display: inline; + } +} diff --git a/src/components/ui/icons.scss b/src/components/ui/icons.scss index 611ba69..3e9f9c0 100644 --- a/src/components/ui/icons.scss +++ b/src/components/ui/icons.scss @@ -1,20 +1,24 @@ @import '~icons.font.json'; -.arrowLeft { - composes: arrow; - - display: inline-block; - transform: rotate(90deg); - - font-size: 24px; +// По умолчанию стрелка смотрит вниз, это просто алиас +.arrowBottom { + @extend .arrow; } .arrowTop { - composes: arrow; + @extend .arrow; transform: rotate(180deg); } -.arrowBottom { - composes: arrow; +.arrowRight { + @extend .arrow; + + transform: rotate(270deg); +} + +.arrowLeft { + @extend .arrow; + + transform: rotate(90deg); } diff --git a/src/i18n/en.json b/src/i18n/en.json index 3fbbf93..b2d00a9 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -76,6 +76,7 @@ "components.langMenu.siteLanguage": "Site language", "components.profile.accountDescription": "Ely.by account allows you to get access to many Minecraft resources. Please, take care of your account safety. Use secure password and change it regularly.", "components.profile.accountPreferencesTitle": "Ely.by account preferences", + "components.profile.back": "Back", "components.profile.changeEmail.alreadyReceivedCode": "Already received code", "components.profile.changeEmail.changeEmailButton": "Change E‑mail", "components.profile.changeEmail.changeEmailDescription": "To change current account E‑mail you must first verify that you own the current address and then confirm the new one.", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 15e06e4..5db4948 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -76,6 +76,7 @@ "components.langMenu.siteLanguage": "Язык сайта", "components.profile.accountDescription": "Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft. Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.", "components.profile.accountPreferencesTitle": "Настройки аккаунта Ely.by", + "components.profile.back": "Назад", "components.profile.changeEmail.alreadyReceivedCode": "Я уже получил код", "components.profile.changeEmail.changeEmailButton": "Сменить E‑mail", "components.profile.changeEmail.changeEmailDescription": "Для смены E‑mail адреса аккаунта сперва необходимо подтвердить владение текущим адресом, а за тем привязать новый.",