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 адреса аккаунта сперва необходимо подтвердить владение текущим адресом, а за тем привязать новый.",