ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-27 07:20:23 +05:30
Code Issues Packages Projects Releases Wiki Activity

Базовый лейаут

Browse Source
This commit is contained in:
SleepWalker 2016-01-03 23:18:42 +02:00
parent 0a750b8cfa
commit 4e12cb4b7a
13 changed files with 205 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/auth/AppInfo.jsx Normal file
View File

@ -0,0 +1,20 @@
import React, { Component } from 'react';
export default class SignIn extends Component {
render() {
var { name, desc } = this.props;
return (
<div>
<div>
<h2>{name}</h2>
</div>
<div>
<p>
{desc}
</p>
</div>
</div>
);
}
}

13
src/components/auth/SignIn.jsx Normal file
View File

@ -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 (
<div>
Hello World
</div>
);
}
}

18
src/components/userBar/UserBar.jsx Normal file
View File

@ -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 (
<div>
<Link to="/register">
<Message {...messages.register} />
</Link>
</div>
);
}
}

8
src/components/userBar/UserBar.messages.js Normal file
View File

@ -0,0 +1,8 @@
import { defineMessages } from 'react-intl';
export default defineMessages({
register: {
id: 'register',
defaultMessage: 'Join'
}
});

2
src/index.html
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app" class="app"></div>
</body> </body>
</html> </html>

2
src/index.js
View File

@ -20,6 +20,8 @@ import { IntlProvider } from 'react-intl';
import reducers from 'reducers'; import reducers from 'reducers';
import routes from 'routes'; import routes from 'routes';
import 'index.scss';
const reducer = combineReducers({ const reducer = combineReducers({
...reducers, ...reducers,
routing: routeReducer routing: routeReducer

8
src/index.scss
View File

@ -1,3 +1,7 @@
.testClass { html,
background: #f00; body,
:global(.app) {
height: 100%;
margin: 0;
padding: 0;
} }

26
src/pages/auth/SignInPage.jsx Normal file
View File

@ -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 (
<div>
<div className={styles.sidebar}>
<AppInfo {...appInfo} />
</div>
<div className={styles.content}>
<SignIn />
</div>
</div>
);
}
}

13
src/pages/auth/auth.scss Normal file
View File

@ -0,0 +1,13 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #232323;
}
.content {
margin-left: 300px;
}

11
src/pages/index/IndexPage.jsx Normal file
View File

@ -0,0 +1,11 @@
import React, { Component } from 'react';
import SignInPage from 'pages/auth/SignInPage';
export default class IndexPage extends Component {
render() {
return (
<SignInPage />
);
}
}

29
src/pages/root/RootPage.jsx Normal file
View File

@ -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 (
<div className={styles.root}>
<div className={styles.header}>
<div className={styles.headerContent}>
<div className={styles.logo}>
<Link to="/">
Ely.by
</Link>
</div>
<div className={styles.userbar}>
<UserBar />
</div>
</div>
</div>
<div className={styles.body}>
{props.children}
</div>
</div>
);
}

52
src/pages/root/root.scss Normal file
View File

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

46
src/routes.js
View File

@ -1,47 +1,13 @@
import React from 'react'; import React from 'react';
import { Route, IndexRoute } from 'react-router'; import { Route, IndexRoute } from 'react-router';
import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl'; import RootPage from 'pages/root/RootPage';
import IndexPage from 'pages/index/IndexPage';
import styles from 'index.scss'; import SignInPage from 'pages/auth/SignInPage';
function CoreLayout(props) {
return (
<div>
<FormattedMessage
id="greeting"
description="Welcome greeting to the user"
defaultMessage="Hello, {name}! How are you today?"
values={{name: 'World'}}
/>
{props.children}
</div>
);
}
function HomeView() {
return (
<div>
Home!
<Link className={styles.testClass} to="/auth">Auth</Link>
</div>
);
}
function AuthView() {
return (
<div>
Auth!
<Link to="/">Home</Link>
</div>
);
}
export default ( export default (
<Route path="/" component={CoreLayout}> <Route path="/" component={RootPage}>
<IndexRoute component={HomeView} /> <IndexRoute component={IndexPage} />
<Route path="/auth" component={AuthView} /> <Route path="/signin" component={SignInPage} />
</Route> </Route>
); );