Немного адаптивности

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

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'
+    }
+});

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

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}>
+                <div className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}>
-                    <AppInfo {...appInfo} />
+                    <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) => ({

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 {
+.hiddenSidebar {
-    margin-left: $sidebar-width;
+    composes: sidebar;
-    padding: 55px 50px;
+
-    text-align: center;
+    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;
+    }
 }

src/pages/root/root.scss

@@ -8,7 +8,7 @@ $userBarHeight: 50px;
 }
 
 .wrapper {
-    width: 756px;
+    max-width: 756px;
     margin: 0 auto;
 }