Skip to content

Commit 3adfe1e

Browse files
marcodearaujomarcodearaujo
committed
Refactoring layout
1 parent 93d126b commit 3adfe1e

File tree

5 files changed

+84
-72
lines changed

5 files changed

+84
-72
lines changed

‎app/App.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,11 @@ import HomeComponent from 'components/Home/HomeComponent';
77
import ClientComponent from 'components/Client/ClientComponent';
88

99
ReactDOM.render(
10-
<section className="hero is-fullheight is-primary">
11-
<Router history={hashHistory} >
12-
<Route path="/" component={iClientComponent} >
13-
<IndexRoute component={HomeComponent} />
14-
<Route path="client" component={ClientComponent} />
15-
</Route>
16-
</Router>
17-
</section>,
10+
<Router history={hashHistory} >
11+
<Route path="/" component={iClientComponent} >
12+
<IndexRoute component={HomeComponent} />
13+
<Route path="client" component={ClientComponent} />
14+
</Route>
15+
</Router>,
1816
document.getElementById('app')
1917
);

‎app/components/Home/HomeComponent.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ class HomeComponent extends React.Component{
88
this.context.router.push("/");
99
}
1010
return (
11-
<h3>Welcome!</h3>
11+
<div className="hero-body">
12+
<div className="container">
13+
<div className="is-half is-offset-one-quarter">
14+
<h1 className="title has-text-centered is-1">Welcome to IClient</h1>
15+
</div>
16+
</div>
17+
</div>
1218
);
1319
}
1420
}

‎app/components/Login/LoginComponent.js‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -25,48 +25,50 @@ class LoginComponent extends React.Component{
2525

2626
render() {
2727
return (
28-
<div className="hero-body">
29-
<div className="container">
30-
<div className="columns is-vcentered">
31-
<div className="column is-4 is-offset-4">
32-
<h1 className="title has-text-centered">
33-
IClient
34-
</h1>
35-
<form onSubmit={this.handleSubmit}>
36-
<div className="box">
37-
<label className="label">Username</label>
38-
<p className="control">
39-
<input
40-
ref='username'
41-
className="input"
42-
type="text"
43-
placeholder="Ex: jsmith"
44-
/>
45-
</p>
46-
<label className="label">Password</label>
47-
<p className="control">
48-
<input
49-
ref='password'
50-
className="input"
51-
type="password"
52-
placeholder="●●●●●●●"
53-
/>
54-
</p>
55-
<hr />
56-
<p className="control">
57-
<button className="button is-primary">Login</button>
58-
</p>
59-
<p className="has-text-centered">
60-
<a href="register.html">Register an Account</a>
61-
|
62-
<a href="#">Forgot password</a>
63-
</p>
64-
</div>
65-
</form>
28+
<section className="hero is-fullheight is-primary">
29+
<div className="hero-body">
30+
<div className="container">
31+
<div className="columns is-vcentered">
32+
<div className="column is-4 is-offset-4">
33+
<h1 className="title has-text-centered">
34+
IClient
35+
</h1>
36+
<form onSubmit={this.handleSubmit}>
37+
<div className="box">
38+
<label className="label">Username</label>
39+
<p className="control">
40+
<input
41+
ref='username'
42+
className="input"
43+
type="text"
44+
placeholder="Ex: jsmith"
45+
/>
46+
</p>
47+
<label className="label">Password</label>
48+
<p className="control">
49+
<input
50+
ref='password'
51+
className="input"
52+
type="password"
53+
placeholder="●●●●●●●"
54+
/>
55+
</p>
56+
<hr />
57+
<p className="control">
58+
<button className="button is-primary">Login</button>
59+
</p>
60+
<p className="has-text-centered">
61+
<a href="register.html">Register an Account</a>
62+
|
63+
<a href="#">Forgot password</a>
64+
</p>
65+
</div>
66+
</form>
67+
</div>
6668
</div>
6769
</div>
6870
</div>
69-
</div>
71+
</section>
7072
);
7173
}
7274
}

‎app/components/Menu/Menu.js‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,27 @@ class Menu extends React.Component{
1515

1616
handleView() {
1717
return (
18-
<div>
19-
<nav className="nav has-shadow" id="top">
20-
<div className="container">
21-
<div className="nav-left">
22-
<a className="nav-item" href="../index.html">IClient</a>
23-
</div>
24-
<span className="nav-toggle">
25-
<span></span>
26-
<span></span>
27-
<span></span>
18+
<nav className="nav has-shadow" id="top">
19+
<div className="container">
20+
<div className="nav-left">
21+
<a className="nav-item" href="../index.html">IClient</a>
22+
</div>
23+
<span className="nav-toggle">
24+
<span></span>
25+
<span></span>
26+
<span></span>
27+
</span>
28+
<div className="nav-right nav-menu">
29+
<Link to="/" className="nav-item is-tab is-active">Home</Link>
30+
<Link to="/client" className="nav-item is-tab">Client</Link>
31+
<Link to="/area" className="nav-item is-tab">Area</Link>
32+
<span className="nav-item">
33+
<a className="button" onClick={this.handleLogout}>Logout</a>
34+
<a className="button is-info">Sign up </a>
2835
</span>
29-
<div className="nav-right nav-menu">
30-
<Link to="/" className="nav-item is-tab is-active">Home</Link>
31-
<Link to="/client" className="nav-item is-tab">Client</Link>
32-
<Link to="/area" className="nav-item is-tab">Area</Link>
33-
<span className="nav-item">
34-
<a className="button" onClick={this.handleLogout}>Logout</a>
35-
<a className="button is-info">Sign up </a>
36-
</span>
37-
</div>
3836
</div>
39-
</nav>
40-
<div className="content">
41-
{this.props.children}
4237
</div>
43-
</div>
38+
</nav>
4439
);
4540
}
4641

‎app/components/iClient/iClientComponent.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,21 @@ import MenuComponent from 'components/Menu/Menu';
77
class iClientComponent extends React.Component{
88
constructor(props) {
99
super(props);
10+
this.handleView = this.handleView.bind(this);
1011
}
1112

13+
handleView() {
14+
return (
15+
<div>
16+
<MenuComponent />
17+
<section className="hero is-fullheight is-primary">
18+
{this.props.children}
19+
</section>
20+
</div>
21+
);
22+
}
1223
render() {
13-
let view = <MenuComponent children={this.props.children} />;
24+
let view = this.handleView();
1425

1526
if (!localStorage.token) {
1627
view = <LoginComponent />;

0 commit comments

Comments
 (0)