Skip to content

Commit a55c325

Browse files
jsdmcjsdmc
committedOct 6, 2015
Bootstrap dashboard template integrated
http://getbootstrap.com/examples/dashboard/
1 parent 58cac82 commit a55c325

File tree

7 files changed

+319
-33
lines changed

7 files changed

+319
-33
lines changed
 

‎src/components/SmartLink/SmartLink.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const mapStateToProps = (state) => ({ routerState: state.router });
1111
class SmartLink extends Component {
1212
render() {
1313
// Load styles object and use generated class names.
14-
// Sinse the are unique (specified in webpack config) - you can be sure you will not breake global styles
14+
// Sinse the are unique by default (specified in webpack config) - you can be sure you will not breake global styles
1515
const styles = require('./SmartLink.scss');
1616

1717
const { title, url, routerState } = this.props;

‎src/components/SmartLink/SmartLink.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.activeLink{
22
text-decoration: underline;
3-
color: #4383D8;
4-
font-size: 26px;
3+
font-size: 20px;
54
}

‎src/containers/CoreLayout.js

+44-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { Component, PropTypes } from 'react';
2-
import { Grid, Row, Col, } from 'react-bootstrap';
32
import { SmartLink } from '../components';
43
import '../styles/main.scss';
54

@@ -10,22 +9,51 @@ export default class CoreLayout extends Component {
109
}
1110

1211
render() {
13-
return (
14-
<Grid className="some-class">
15-
<Row>
16-
<h2>HELLO</h2>
17-
</Row>
18-
<Row>
19-
<Col md={1} xs={4}>
20-
<ul className="nav nav-pills nav-stacked">
21-
<SmartLink url='/counter' title='Counter' />
22-
<SmartLink url='/autoCounter' title='AutoCounter' />
23-
<SmartLink url='/movies' title='Movies page' />
12+
const navTop = () => (
13+
<nav className="navbar navbar-inverse navbar-fixed-top">
14+
<div className="container-fluid">
15+
<div className="navbar-header">
16+
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
17+
<span className="sr-only">Toggle navigation</span>
18+
<span className="icon-bar"></span>
19+
<span className="icon-bar"></span>
20+
<span className="icon-bar"></span>
21+
</button>
22+
<a className="navbar-brand" href="#">React-Redux-Router-CRUD-boilerplate</a>
23+
</div>
24+
<div id="navbar" className="navbar-collapse collapse">
25+
<ul className="nav navbar-nav navbar-right">
26+
<li><a href="#">Dashboard</a></li>
27+
<li><a href="#">Settings</a></li>
28+
<li><a href="#">Profile</a></li>
29+
<li><a href="#">Help</a></li>
2430
</ul>
25-
</Col>
26-
<Col md={11} xs={8}>{this.props.children}</Col>
27-
</Row>
28-
</Grid>
31+
<form className="navbar-form navbar-right">
32+
<input type="text" className="form-control" placeholder="Search..." />
33+
</form>
34+
</div>
35+
</div>
36+
</nav>
37+
);
38+
39+
return (
40+
<div>
41+
{ navTop() }
42+
<div className="container-fluid">
43+
<div className="row">
44+
<div className="col-sm-3 col-md-2 sidebar">
45+
<ul className="nav nav-sidebar">
46+
<SmartLink url='/counter' title='Counter' />
47+
<SmartLink url='/autoCounter' title='AutoCounter' />
48+
<SmartLink url='/movies' title='Movies page' />
49+
</ul>
50+
</div>
51+
<div className="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
52+
{this.props.children}
53+
</div>
54+
</div>
55+
</div>
56+
</div>
2957
);
3058
}
3159
}

‎src/containers/MoviesPage/MoviesPage.js

+155-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,163 @@
11
import React, { Component } from 'react';
2-
import { Grid, Row } from 'react-bootstrap';
32

43
export default class MoviesPage extends Component {
54
render() {
65
return (
7-
<Grid>
8-
<Row>
9-
<h2>MOVIES PAGE</h2>
10-
</Row>
11-
</Grid>
6+
<div>
7+
<h1 className="page-header">Dashboard</h1>
8+
9+
<div className="row placeholders">
10+
<div className="col-xs-6 col-sm-3 placeholder">
11+
<img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail" />
12+
<h4>Label</h4>
13+
<span className="text-muted">Something else</span>
14+
</div>
15+
<div className="col-xs-6 col-sm-3 placeholder">
16+
<img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail" />
17+
<h4>Label</h4>
18+
<span className="text-muted">Something else</span>
19+
</div>
20+
<div className="col-xs-6 col-sm-3 placeholder">
21+
<img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail" />
22+
<h4>Label</h4>
23+
<span className="text-muted">Something else</span>
24+
</div>
25+
<div className="col-xs-6 col-sm-3 placeholder">
26+
<img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail" />
27+
<h4>Label</h4>
28+
<span className="text-muted">Something else</span>
29+
</div>
30+
</div>
31+
32+
<h2 className="sub-header">Section title</h2>
33+
<div className="table-responsive">
34+
<table className="table table-striped">
35+
<thead>
36+
<tr>
37+
<th>#</th>
38+
<th>Header</th>
39+
<th>Header</th>
40+
<th>Header</th>
41+
<th>Header</th>
42+
</tr>
43+
</thead>
44+
<tbody>
45+
<tr>
46+
<td>1,001</td>
47+
<td>Lorem</td>
48+
<td>ipsum</td>
49+
<td>dolor</td>
50+
<td>sit</td>
51+
</tr>
52+
<tr>
53+
<td>1,002</td>
54+
<td>amet</td>
55+
<td>consectetur</td>
56+
<td>adipiscing</td>
57+
<td>elit</td>
58+
</tr>
59+
<tr>
60+
<td>1,003</td>
61+
<td>Integer</td>
62+
<td>nec</td>
63+
<td>odio</td>
64+
<td>Praesent</td>
65+
</tr>
66+
<tr>
67+
<td>1,003</td>
68+
<td>libero</td>
69+
<td>Sed</td>
70+
<td>cursus</td>
71+
<td>ante</td>
72+
</tr>
73+
<tr>
74+
<td>1,004</td>
75+
<td>dapibus</td>
76+
<td>diam</td>
77+
<td>Sed</td>
78+
<td>nisi</td>
79+
</tr>
80+
<tr>
81+
<td>1,005</td>
82+
<td>Nulla</td>
83+
<td>quis</td>
84+
<td>sem</td>
85+
<td>at</td>
86+
</tr>
87+
<tr>
88+
<td>1,006</td>
89+
<td>nibh</td>
90+
<td>elementum</td>
91+
<td>imperdiet</td>
92+
<td>Duis</td>
93+
</tr>
94+
<tr>
95+
<td>1,007</td>
96+
<td>sagittis</td>
97+
<td>ipsum</td>
98+
<td>Praesent</td>
99+
<td>mauris</td>
100+
</tr>
101+
<tr>
102+
<td>1,008</td>
103+
<td>Fusce</td>
104+
<td>nec</td>
105+
<td>tellus</td>
106+
<td>sed</td>
107+
</tr>
108+
<tr>
109+
<td>1,009</td>
110+
<td>augue</td>
111+
<td>semper</td>
112+
<td>porta</td>
113+
<td>Mauris</td>
114+
</tr>
115+
<tr>
116+
<td>1,010</td>
117+
<td>massa</td>
118+
<td>Vestibulum</td>
119+
<td>lacinia</td>
120+
<td>arcu</td>
121+
</tr>
122+
<tr>
123+
<td>1,011</td>
124+
<td>eget</td>
125+
<td>nulla</td>
126+
<td>className</td>
127+
<td>aptent</td>
128+
</tr>
129+
<tr>
130+
<td>1,012</td>
131+
<td>taciti</td>
132+
<td>sociosqu</td>
133+
<td>ad</td>
134+
<td>litora</td>
135+
</tr>
136+
<tr>
137+
<td>1,013</td>
138+
<td>torquent</td>
139+
<td>per</td>
140+
<td>conubia</td>
141+
<td>nostra</td>
142+
</tr>
143+
<tr>
144+
<td>1,014</td>
145+
<td>per</td>
146+
<td>inceptos</td>
147+
<td>himenaeos</td>
148+
<td>Curabitur</td>
149+
</tr>
150+
<tr>
151+
<td>1,015</td>
152+
<td>sodales</td>
153+
<td>ligula</td>
154+
<td>in</td>
155+
<td>libero</td>
156+
</tr>
157+
</tbody>
158+
</table>
159+
</div>
160+
</div>
12161
);
13162
}
14163
}

‎src/styles/_base.scss

+113-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,114 @@
11
// Settings go here
2-
// local class (will be prefixed with hash)
3-
.some-class{
4-
margin: 10px;
5-
}
2+
3+
// Base styles taken from 'dashboard.css'
4+
// http://getbootstrap.com/examples/dashboard/
5+
/*
6+
* Base structure
7+
*/
8+
9+
// Wrap into global scope.
10+
// Because by default local scope is set and each class have unique name, so we need to avoid this
11+
// if we want our example to look the same as dashboard example
12+
:global {
13+
/* Move down content because we have a fixed navbar that is 50px tall */
14+
body {
15+
padding-top: 50px;
16+
}
17+
18+
19+
/*
20+
* Global add-ons
21+
*/
22+
23+
.sub-header {
24+
padding-bottom: 10px;
25+
border-bottom: 1px solid #eee;
26+
}
27+
28+
/*
29+
* Top navigation
30+
* Hide default border to remove 1px line.
31+
*/
32+
.navbar-fixed-top {
33+
border: 0;
34+
}
35+
36+
/*
37+
* Sidebar
38+
*/
39+
40+
/* Hide for mobile, show later */
41+
.sidebar {
42+
display: none;
43+
}
44+
@media (min-width: 768px) {
45+
.sidebar {
46+
position: fixed;
47+
top: 51px;
48+
bottom: 0;
49+
left: 0;
50+
z-index: 1000;
51+
display: block;
52+
padding: 20px;
53+
overflow-x: hidden;
54+
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
55+
background-color: #f5f5f5;
56+
border-right: 1px solid #eee;
57+
}
58+
}
59+
60+
/* Sidebar navigation */
61+
.nav-sidebar {
62+
margin-right: -21px; /* 20px padding + 1px border */
63+
margin-bottom: 20px;
64+
margin-left: -20px;
65+
}
66+
.nav-sidebar > li > a {
67+
padding-right: 20px;
68+
padding-left: 20px;
69+
}
70+
.nav-sidebar > .active > a,
71+
.nav-sidebar > .active > a:hover,
72+
.nav-sidebar > .active > a:focus {
73+
color: #fff;
74+
background-color: #428bca;
75+
}
76+
77+
78+
/*
79+
* Main content
80+
*/
81+
82+
.main {
83+
padding: 20px;
84+
}
85+
@media (min-width: 768px) {
86+
.main {
87+
padding-right: 40px;
88+
padding-left: 40px;
89+
}
90+
}
91+
.main .page-header {
92+
margin-top: 0;
93+
}
94+
95+
96+
/*
97+
* Placeholder dashboard ideas
98+
*/
99+
100+
.placeholders {
101+
margin-bottom: 30px;
102+
text-align: center;
103+
}
104+
.placeholders h4 {
105+
margin-bottom: 0;
106+
}
107+
.placeholder {
108+
margin-bottom: 20px;
109+
}
110+
.placeholder img {
111+
display: inline-block;
112+
border-radius: 50%;
113+
}
114+
}

‎src/styles/main.scss

-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
@import 'base';
22
@import 'vendor/normalize';
33

4-
//global class - will not have prefix
5-
:global(.some-class){
6-
padding: 10px;
7-
}
84
body{
95
background-color: #EEEAF5;
106
}

‎webpack.config.dev.js

+5
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ module.exports = {
4242
{
4343
test: /\.scss$/,
4444
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
45+
// The query parameter modules enables the CSS Modules spec. (css-loader?modules)
46+
// https://github.com/css-modules/css-modules
47+
// This enables Local scoped CSS by default. (You can switch it off with :global(...) or :global for selectors and/or rules.)
48+
// https://github.com/css-modules/css-modules
49+
4550
// Used without Extract text plugin for reloading purpose
4651
// now index.html has "styles.css" entry which is empty in dev mode. But it's ok)
4752
// loader: ExtractTextPlugin.extract('style', 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap')

0 commit comments

Comments
 (0)
Please sign in to comment.