diff --git a/src/components/auth/AppInfo.jsx b/src/components/auth/AppInfo.jsx index f4f8297..c987088 100644 --- a/src/components/auth/AppInfo.jsx +++ b/src/components/auth/AppInfo.jsx @@ -1,10 +1,23 @@ -import React, { Component } from 'react'; +import React, { Component, PropTypes } from 'react'; + +import { FormattedMessage as Message } from 'react-intl'; + +import buttons from 'components/ui/buttons.scss'; import styles from './appInfo.scss'; +import messages from './AppInfo.messages'; + +export default class AppInfo extends Component { + static displayName = 'AppInfo'; + + static propTypes = { + name: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + onGoToAuth: PropTypes.func.isRequired + }; -export default class SignIn extends Component { render() { - var { name, description } = this.props; + var { name, description, onGoToAuth } = this.props; return (
@@ -16,6 +29,11 @@ export default class SignIn extends Component { {description}

+
+ +
); } diff --git a/src/components/auth/AppInfo.messages.js b/src/components/auth/AppInfo.messages.js new file mode 100644 index 0000000..be07f29 --- /dev/null +++ b/src/components/auth/AppInfo.messages.js @@ -0,0 +1,8 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + goToAuth: { + id: 'goToAuth', + defaultMessage: 'Go to auth' + } +}); diff --git a/src/components/auth/appInfo.scss b/src/components/auth/appInfo.scss index a6a9537..9bf6d03 100644 --- a/src/components/auth/appInfo.scss +++ b/src/components/auth/appInfo.scss @@ -2,6 +2,8 @@ @import '~components/ui/fonts.scss'; .appInfo { + max-width: 270px; + margin: 0 auto; padding: 55px 25px; } @@ -39,3 +41,12 @@ font-size: 13px; line-height: 1.7; } + +.goToAuth { +} + +@media (min-width: 720px) { + .goToAuth { + display: none; + } +} diff --git a/src/pages/auth/AuthPage.jsx b/src/pages/auth/AuthPage.jsx index 657c07f..cb7d145 100644 --- a/src/pages/auth/AuthPage.jsx +++ b/src/pages/auth/AuthPage.jsx @@ -7,9 +7,15 @@ import PanelTransition from 'components/auth/PanelTransition'; import styles from './auth.scss'; class AuthPage extends Component { - displayName = 'AuthPage'; + static displayName = 'AuthPage'; + + state = { + isSidebarHidden: false + }; render() { + var {isSidebarHidden} = this.state; + var appInfo = { name: 'TLauncher', description: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.` @@ -17,8 +23,8 @@ class AuthPage extends Component { return (
-
- +
+
@@ -26,6 +32,12 @@ class AuthPage extends Component {
); } + + onGoToAuth = () => { + this.setState({ + isSidebarHidden: true + }); + }; } export default connect((state) => ({ diff --git a/src/pages/auth/auth.scss b/src/pages/auth/auth.scss index 6e02776..e89ec4b 100644 --- a/src/pages/auth/auth.scss +++ b/src/pages/auth/auth.scss @@ -4,16 +4,46 @@ $sidebar-width: 320px; .sidebar { position: absolute; - top: 50px; bottom: 0; + right: 0; left: 0; - width: $sidebar-width; + top: 50px; + z-index: 1; background: $black; } -.content { - margin-left: $sidebar-width; - padding: 55px 50px; - text-align: center; +.hiddenSidebar { + composes: sidebar; + + display: none; +} + +.content { + text-align: center; + max-width: 340px; + margin: 0 auto; +} + +@media (min-width: 350px) { + .content { + padding: 55px 0; + } +} + +@media (min-width: 720px) { + .content { + padding: 55px 50px; + margin-left: $sidebar-width; + } + + .sidebar { + right: auto; + + width: $sidebar-width; + } + + .hiddenSidebar { + display: block; + } } diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss index c30d969..09ac7c5 100644 --- a/src/pages/root/root.scss +++ b/src/pages/root/root.scss @@ -8,7 +8,7 @@ $userBarHeight: 50px; } .wrapper { - width: 756px; + max-width: 756px; margin: 0 auto; }