diff --git a/src/components/auth/AppInfo.jsx b/src/components/auth/AppInfo.jsx new file mode 100644 index 0000000..4e40bf7 --- /dev/null +++ b/src/components/auth/AppInfo.jsx @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; + +export default class SignIn extends Component { + render() { + var { name, desc } = this.props; + + return ( +
+
+

{name}

+
+
+

+ {desc} +

+
+
+ ); + } +} diff --git a/src/components/auth/SignIn.jsx b/src/components/auth/SignIn.jsx new file mode 100644 index 0000000..80b7f83 --- /dev/null +++ b/src/components/auth/SignIn.jsx @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; + +// 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) + +export default class SignIn extends Component { + render() { + return ( +
+ Hello World +
+ ); + } +} diff --git a/src/components/userBar/UserBar.jsx b/src/components/userBar/UserBar.jsx new file mode 100644 index 0000000..187e6ac --- /dev/null +++ b/src/components/userBar/UserBar.jsx @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; + +import { Link } from 'react-router'; +import { FormattedMessage as Message } from 'react-intl'; + +import messages from './UserBar.messages.js'; + +export default class UserBar extends Component { + render() { + return ( +
+ + + +
+ ); + } +} diff --git a/src/components/userBar/UserBar.messages.js b/src/components/userBar/UserBar.messages.js new file mode 100644 index 0000000..5974e7d --- /dev/null +++ b/src/components/userBar/UserBar.messages.js @@ -0,0 +1,8 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + register: { + id: 'register', + defaultMessage: 'Join' + } +}); diff --git a/src/index.html b/src/index.html index b1fdd9a..2bc28d4 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ -
+
diff --git a/src/index.js b/src/index.js index b05bd16..5e0e58a 100644 --- a/src/index.js +++ b/src/index.js @@ -20,6 +20,8 @@ import { IntlProvider } from 'react-intl'; import reducers from 'reducers'; import routes from 'routes'; +import 'index.scss'; + const reducer = combineReducers({ ...reducers, routing: routeReducer diff --git a/src/index.scss b/src/index.scss index fb273bb..95c0939 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,3 +1,7 @@ -.testClass { - background: #f00; +html, +body, +:global(.app) { + height: 100%; + margin: 0; + padding: 0; } diff --git a/src/pages/auth/SignInPage.jsx b/src/pages/auth/SignInPage.jsx new file mode 100644 index 0000000..e6ee1df --- /dev/null +++ b/src/pages/auth/SignInPage.jsx @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; + +import SignIn from 'components/auth/SignIn'; +import AppInfo from 'components/auth/AppInfo'; + +import styles from './auth.scss'; + +export default class SignInPage extends Component { + render() { + var appInfo = { + name: 'TLauncher', + desc: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.` + }; + + return ( +
+
+ +
+
+ +
+
+ ); + } +} diff --git a/src/pages/auth/auth.scss b/src/pages/auth/auth.scss new file mode 100644 index 0000000..fba0c34 --- /dev/null +++ b/src/pages/auth/auth.scss @@ -0,0 +1,13 @@ +.sidebar { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 300px; + + background: #232323; +} + +.content { + margin-left: 300px; +} diff --git a/src/pages/index/IndexPage.jsx b/src/pages/index/IndexPage.jsx new file mode 100644 index 0000000..18a5422 --- /dev/null +++ b/src/pages/index/IndexPage.jsx @@ -0,0 +1,11 @@ +import React, { Component } from 'react'; + +import SignInPage from 'pages/auth/SignInPage'; + +export default class IndexPage extends Component { + render() { + return ( + + ); + } +} diff --git a/src/pages/root/RootPage.jsx b/src/pages/root/RootPage.jsx new file mode 100644 index 0000000..943b6c7 --- /dev/null +++ b/src/pages/root/RootPage.jsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import { Link } from 'react-router'; + +import UserBar from 'components/userBar/UserBar'; + +import styles from './root.scss'; + +export default function RootPage(props) { + return ( +
+
+
+
+ + Ely.by + +
+
+ +
+
+
+
+ {props.children} +
+
+ ); +} diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss new file mode 100644 index 0000000..f74d01e --- /dev/null +++ b/src/pages/root/root.scss @@ -0,0 +1,52 @@ +.root { + background: #ebe8e1; + min-height: 100%; +} + +.wrapper { + width: 736px; + margin: 0 auto; +} + +.header { + height: 50px; + background: #207e5c; +} + +.headerContent { + composes: wrapper; +} + +.logo { + line-height: 50px; + padding: 0 20px; + display: inline-block; + background: #1a6449; +} + +.body { + composes: wrapper; + position: absolute; + top: 50px; + left: 0; + right: 0; + bottom: 0; +} + +.sidebar { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 300px; + + background: #232323; +} + +.content { + margin-left: 300px; +} + +.userbar { + float: right; +} diff --git a/src/routes.js b/src/routes.js index e9a8d43..15edb42 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,47 +1,13 @@ import React from 'react'; import { Route, IndexRoute } from 'react-router'; -import { Link } from 'react-router'; -import { FormattedMessage } from 'react-intl'; - -import styles from 'index.scss'; - -function CoreLayout(props) { - return ( -
- - - {props.children} -
- ); -} - -function HomeView() { - return ( -
- Home! - Auth -
- ); -} - -function AuthView() { - return ( -
- Auth! - Home -
- ); -} +import RootPage from 'pages/root/RootPage'; +import IndexPage from 'pages/index/IndexPage'; +import SignInPage from 'pages/auth/SignInPage'; export default ( - - - + + + );