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;
}