From 86ad6711941a08a7ab88a13f0ff6e183b25d40ff Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sat, 6 Feb 2016 12:47:51 +0200
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B5=D0=BC=D0=BD=D0=BE=D0=B3=D0=BE=20?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/AppInfo.jsx         | 24 ++++++++++++--
 src/components/auth/AppInfo.messages.js |  8 +++++
 src/components/auth/appInfo.scss        | 11 +++++++
 src/pages/auth/AuthPage.jsx             | 18 +++++++++--
 src/pages/auth/auth.scss                | 42 +++++++++++++++++++++----
 src/pages/root/root.scss                |  2 +-
 6 files changed, 92 insertions(+), 13 deletions(-)
 create mode 100644 src/components/auth/AppInfo.messages.js

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 (
             <div className={styles.appInfo}>
@@ -16,6 +29,11 @@ export default class SignIn extends Component {
                         {description}
                     </p>
                 </div>
+                <div className={styles.goToAuth}>
+                    <button className={buttons.green} onClick={onGoToAuth}>
+                        <Message {...messages.goToAuth} />
+                    </button>
+                </div>
             </div>
         );
     }
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 (
             <div>
-                <div className={styles.sidebar}>
-                    <AppInfo {...appInfo} />
+                <div className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}>
+                    <AppInfo {...appInfo} onGoToAuth={this.onGoToAuth} />
                 </div>
                 <div className={styles.content}>
                     <PanelTransition {...this.props} />
@@ -26,6 +32,12 @@ class AuthPage extends Component {
             </div>
         );
     }
+
+    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;
 }