Отверстал шапку и сайдбар

This commit is contained in:
SleepWalker 2016-01-04 08:02:13 +02:00
parent 4e12cb4b7a
commit 2bd0e14a00
16 changed files with 157 additions and 37 deletions

View File

@ -1,17 +1,19 @@
import React, { Component } from 'react';
import styles from './appInfo.scss';
export default class SignIn extends Component {
render() {
var { name, desc } = this.props;
var { name, description } = this.props;
return (
<div>
<div>
<h2>{name}</h2>
<div className={styles.appInfo}>
<div className={styles.logoContainer}>
<h2 className={styles.logo}>{name}</h2>
</div>
<div>
<p>
{desc}
<div className={styles.descriptionContainer}>
<p className={styles.description}>
{description}
</p>
</div>
</div>

View File

@ -0,0 +1,41 @@
@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
.appInfo {
padding: 55px 15px;
}
.logoContainer {
position: relative;
padding: 15px;
&:after {
content: '';
display: block;
position: absolute;
left: 25px;
bottom: 0;
height: 3px;
width: 40px;
background: $green;
}
}
.logo {
font-family: $robotoCondensed;
color: #fff;
font-size: 22px;
}
.descriptionContainer {
margin: 20px 0;
}
.description {
font-family: $roboto;
color: #cccccc;
font-size: 13px;
line-height: 1.7;
}

View File

@ -0,0 +1,24 @@
@import './colors.scss';
@import './fonts.scss';
.button {
display: inline-block;
height: 50px;
padding: 0 15px;
font-family: $robotoCondensed;
color: #fff;
font-size: 18px;
line-height: 50px;
text-decoration: none;
}
.blue {
composes: button;
background: $blue;
&:hover {
background: lighter($blue);
}
}

View File

@ -0,0 +1,18 @@
$green: #207e5c;
$blue: #5b9aa9;
$red: #e66c69;
$violet: #6b5b8c;
$dark_blue: #28555b;
$light_violet: #8b5d79;
$orange: #dd8650;
$light: #ebe8e1;
$black: #232323;
@function darker($color) {
@return darken($color, 4%);
}
@function lighter($color) {
@return lighten($color, 3%);
}

View File

@ -0,0 +1,4 @@
// TODO: need more abstract names
// TODO: should we host fonts from our side?
$robotoCondensed: 'Roboto Condensed', Arial, sans-serif;
$roboto: 'Roboto', Arial, sans-serif;

View File

@ -1,18 +0,0 @@
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>
);
}
}

View File

@ -0,0 +1,21 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
import messages from './Userbar.messages.js';
import styles from './userbar.scss';
export default class Userbar extends Component {
render() {
return (
<div className={styles.userbar}>
<Link to="/register" className={buttons.blue}>
<Message {...messages.register} />
</Link>
</div>
);
}
}

View File

@ -0,0 +1,2 @@
.userbar {
}

BIN
src/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 B

View File

@ -6,6 +6,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>

View File

@ -5,3 +5,21 @@ body,
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
line-height: 1;
padding: 0;
margin: 0;
}

View File

@ -9,7 +9,7 @@ export default class SignInPage extends Component {
render() {
var appInfo = {
name: 'TLauncher',
desc: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.`
description: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.`
};
return (

View File

@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router';
import UserBar from 'components/userBar/UserBar';
import Userbar from 'components/userbar/Userbar';
import styles from './root.scss';
@ -11,13 +11,11 @@ export default function RootPage(props) {
<div className={styles.root}>
<div className={styles.header}>
<div className={styles.headerContent}>
<div className={styles.logo}>
<Link to="/">
Ely.by
</Link>
</div>
<Link to="/" className={styles.logo}>
Ely.by
</Link>
<div className={styles.userbar}>
<UserBar />
<Userbar />
</div>
</div>
</div>

View File

@ -1,5 +1,8 @@
@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
.root {
background: #ebe8e1;
background: $light;
min-height: 100%;
}
@ -10,7 +13,7 @@
.header {
height: 50px;
background: #207e5c;
background: $green;
}
.headerContent {
@ -21,7 +24,11 @@
line-height: 50px;
padding: 0 20px;
display: inline-block;
background: #1a6449;
background: darker($green);
font-family: $robotoCondensed;
font-size: 33px;
color: #fff;
}
.body {
@ -40,7 +47,7 @@
left: 0;
width: 300px;
background: #232323;
background: $black;
}
.content {

View File

@ -76,6 +76,7 @@ var webpackConfig = {
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
favicon: 'src/favicon.ico',
hash: isProduction,
filename: 'index.html',
inject: 'body',