Skip to content
This repository was archived by the owner on Aug 24, 2019. It is now read-only.

Commit d892d7c

Browse files
lisonglisong
committed
use bootstrap
1 parent ba98561 commit d892d7c

File tree

17 files changed

+217
-235
lines changed

17 files changed

+217
-235
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"babel-polyfill": "^6.22.0",
1717
"bluebird": "^3.4.7",
1818
"body-parser": "^1.16.0",
19+
"bootstrap": "^3.3.7",
1920
"buffer": "^5.0.5",
2021
"classnames": "^2.2.5",
2122
"cookie-parser": "^1.4.3",
@@ -35,6 +36,7 @@
3536
"pretty-error": "^2.0.2",
3637
"query-string": "^4.3.1",
3738
"react": "^15.4.2",
39+
"react-bootstrap": "^0.30.7",
3840
"react-dom": "^15.4.2",
3941
"react-redux": "^5.0.2",
4042
"redux": "^3.6.0",

‎src/components/Footer/Footer.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
@import '../variables.css';
22

33
.root {
4-
background: #333;
5-
color: #fff;
4+
position: absolute;
5+
/*bottom: 0;*/
6+
width: 100%;
7+
/* Set the fixed height of the footer here */
8+
height: 60px;
9+
background-color: #222;
10+
border-color: #080808;
611
}
712

813
.container {
@@ -16,11 +21,6 @@
1621
color: rgba(255, 255, 255, 0.5);
1722
}
1823

19-
.textMuted {
20-
composes: text;
21-
color: rgba(255, 255, 255, 0.3);
22-
}
23-
2424
.spacer {
2525
color: rgba(255, 255, 255, 0.3);
2626
}

‎src/components/Footer/Footer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import Link from '../Link';
66

77
function Footer() {
88
return (
9-
<div className={s.root}>
9+
<footer className={s.root}>
1010
<div className={s.container}>
1111
<span className={s.text}>© CodePush Server</span>
1212
<span className={s.spacer}>·</span>
1313
<Link className={s.link} to="/">Home</Link>
1414
<span className={s.spacer}>·</span>
1515
<a className={s.link} target="_blank" href="https://github.com/lisong/code-push-server/issues/new">Report an issue</a>
1616
</div>
17-
</div>
17+
</footer>
1818
);
1919
}
2020

‎src/components/Header/Header.css‎

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,8 @@
11

22
@import '../variables.css';
33

4-
:root {
5-
--brand-color: #61dafb;
6-
}
7-
8-
.root {
9-
background: #333;
10-
color: #fff;
11-
}
12-
13-
.container {
14-
margin: 0 auto;
15-
padding: 20px 0;
16-
max-width: var(--max-content-width);
17-
}
18-
194
.brand {
205
color: color(var(--brand-color) lightness(+10%));
216
text-decoration: none;
227
font-size: 1.75em; /* ~28px */
238
}
24-
25-
.brandTxt {
26-
margin-left: 10px;
27-
}
28-
29-
.nav {
30-
float: right;
31-
margin-top: 6px;
32-
}
33-
34-
.banner {
35-
text-align: center;
36-
}
37-
38-
.bannerTitle {
39-
margin: 0;
40-
padding: 10px;
41-
font-weight: normal;
42-
font-size: 4em;
43-
line-height: 1em;
44-
}
45-
46-
.bannerDesc {
47-
padding: 0;
48-
color: rgba(255, 255, 255, 0.5);
49-
font-size: 1.25em;
50-
margin: 0;
51-
}

‎src/components/Header/Header.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11

22
import React, {PropTypes, Component} from 'react';
33
import withStyles from 'isomorphic-style-loader/lib/withStyles';
4+
import _ from 'lodash';
5+
import {
6+
Navbar,
7+
} from 'react-bootstrap';
48
import s from './Header.css';
59
import Link from '../Link';
610
import Navigation from '../Navigation';
7-
import logoUrl from './logo-small.png';
11+
812

913
class Header extends Component {
1014
static propTypes = {
@@ -19,19 +23,17 @@ class Header extends Component {
1923

2024
render() {
2125
return (
22-
<div className={s.root}>
23-
<div className={s.container}>
24-
{
25-
!this.props.noNav ?
26-
<Navigation isAuth={this.props.isAuth} className={s.nav} />
27-
: null
28-
}
26+
<Navbar style={{fontWeight:400}} inverse collapseOnSelect>
27+
<Navbar.Header>
28+
<Navbar.Brand>
2929
<Link className={s.brand} to="/">
30-
<img src={logoUrl} width="38" height="38" alt="React" />
31-
<span className={s.brandTxt}>CodePush Server</span>
30+
<span>CodePush Server</span>
3231
</Link>
33-
</div>
34-
</div>
32+
</Navbar.Brand>
33+
<Navbar.Toggle />
34+
</Navbar.Header>
35+
{_.get(this.props, 'noNav') !== true ? <Navigation isAuth={_.get(this.props, 'isAuth')}/> : null}
36+
</Navbar>
3537
);
3638
}
3739
}

‎src/components/Html.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ class Html extends React.Component {
4242
<meta name="description" content={description} />
4343
<meta name="viewport" content="width=device-width, initial-scale=1" />
4444
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
45+
<link rel="stylesheet" href="/css/bootstrap.min.css" />
4546
{styles.map(style =>
4647
<style
4748
key={style.id}

‎src/components/Layout/Layout.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ html {
2323
font-size: 1em; /* ~16px; */
2424
font-family: var(--font-family-base);
2525
line-height: 1.375; /* ~22px */
26+
height: 100%;
2627
}
2728

2829
a {

‎src/components/Login/Login.css‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/components/Login/Login.js‎

Lines changed: 66 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import React, { PropTypes, Component } from 'react';
22
import _ from 'lodash';
33
import withStyles from 'isomorphic-style-loader/lib/withStyles';
4-
import s from './Login.css';
4+
import {
5+
Col,
6+
ControlLabel,
7+
Form,
8+
FormGroup,
9+
FormControl,
10+
Checkbox,
11+
Button,
12+
} from 'react-bootstrap';
513
import Link from '../Link';
6-
import Button from '../Button';
714

815
class Login extends Component {
916
static propTypes = {
@@ -36,61 +43,75 @@ class Login extends Component {
3643
}
3744
this.props.submit();
3845
}
46+
3947
setInputAccount(event) {
4048
this.props.accountInputChange(event.target.value);
4149
}
50+
4251
setInputPassword(event) {
4352
this.props.passwordInputChange(event.target.value);
4453
}
54+
4555
render() {
4656
return (
47-
<div className={s.root}>
48-
<div className={s.container}>
49-
<h1>登录</h1>
50-
<div className={s.formGroup}>
51-
<label className={s.label} htmlFor="usernameOrEmail">
52-
请输入邮箱地址:
53-
</label>
54-
<input
55-
className={s.input}
56-
onChange={this.setInputAccount}
57-
id="usernameOrEmail"
58-
type="text"
59-
value={this.props.account}
60-
placeholder="请输入邮箱地址"
61-
autoFocus
57+
<Form style={{ height:600 }} horizontal>
58+
<br/>
59+
<FormGroup>
60+
<Col smOffset={3}>
61+
<h1>请登录</h1>
62+
</Col>
63+
</FormGroup>
64+
<FormGroup controlId="formHorizontalEmail">
65+
<Col componentClass={ControlLabel} sm={3}>
66+
邮箱地址
67+
</Col>
68+
<Col sm={4}>
69+
<FormControl
70+
onChange={this.setInputAccount}
71+
value={this.props.account}
72+
type="email"
73+
placeholder="请输入邮箱地址"
74+
autoFocus
6275
/>
63-
</div>
64-
<div className={s.formGroup}>
65-
<label className={s.label} htmlFor="password">
66-
请输入登录密码:
67-
</label>
68-
<input
69-
className={s.input}
70-
onChange={this.setInputPassword}
71-
id="password"
72-
type="password"
73-
value={this.props.password}
74-
placeholder="请输入登录密码"
76+
</Col>
77+
</FormGroup>
78+
79+
<FormGroup controlId="formHorizontalPassword">
80+
<Col componentClass={ControlLabel} sm={3}>
81+
登录密码
82+
</Col>
83+
<Col sm={4}>
84+
<FormControl
85+
onChange={this.setInputPassword}
86+
value={this.props.password}
87+
type="password"
88+
placeholder="请输入登录密码"
7589
/>
76-
</div>
77-
<div className={s.formGroup}>
78-
<p className={s.errorTips}>{_.get(this.props, 'error.errorMessage')}</p>
79-
</div>
80-
<div className={s.formGroup}>
90+
</Col>
91+
</FormGroup>
92+
<FormGroup>
93+
<Col smOffset={3} sm={4} style={{ color:'red' }} >
94+
{_.get(this.props, 'error.errorMessage')}
95+
</Col>
96+
</FormGroup>
97+
<FormGroup>
98+
<Col smOffset={3} sm={2}>
8199
<Button
82-
style={this.props.isFetching ? { backgroundColor:'grey' } : null }
83100
onClick={this.submit}
84-
value="登录"
85-
/>
86-
</div>
87-
<div className={s.registerText}>
88-
<span style={{ float:'left' }}>没有账号?</span>
89-
<Link className={s.registerLink} to="/register">立即注册</Link>
90-
</div>
91-
</div>
92-
</div>
101+
disabled={this.props.isFetching}
102+
>
103+
登录
104+
</Button>
105+
</Col>
106+
</FormGroup>
107+
<FormGroup>
108+
<Col smOffset={3} sm={4}>
109+
<span style={{ marginRight:"20px" }}>还没有账号?</span>
110+
<Link to="/register">立即注册</Link>
111+
</Col>
112+
</FormGroup>
113+
</Form>
93114
);
94115
}
95116
}
96-
export default withStyles(s)(Login);
117+
export default Login;

0 commit comments

Comments
 (0)