Skip to content

Commit

Permalink
Bootstrap dashboard template integrated
Browse files Browse the repository at this point in the history 
http://getbootstrap.com/examples/dashboard/
  • Loading branch information
@jsdmc
jsdmc committed Oct 6, 2015
1 parent 58cac82 commit a55c325
Show file tree
Hide file tree
Showing 7 changed files with 319 additions and 33 deletions.
2 changes: 1 addition & 1 deletion src/components/SmartLink/SmartLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const mapStateToProps = (state) => ({ routerState: state.router });
class SmartLink extends Component {
render() {
// Load styles object and use generated class names.
// Sinse the are unique (specified in webpack config) - you can be sure you will not breake global styles
// Sinse the are unique by default (specified in webpack config) - you can be sure you will not breake global styles
const styles = require('./SmartLink.scss');

const { title, url, routerState } = this.props;
Expand Down
3 changes: 1 addition & 2 deletions src/components/SmartLink/SmartLink.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.activeLink{
text-decoration: underline;
color: #4383D8;
font-size: 26px;
font-size: 20px;
}
60 changes: 44 additions & 16 deletions src/containers/CoreLayout.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { Component, PropTypes } from 'react';
import { Grid, Row, Col, } from 'react-bootstrap';
import { SmartLink } from '../components';
import '../styles/main.scss';

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

render() {
return (
<Grid className="some-class">
<Row>
<h2>HELLO</h2>
</Row>
<Row>
<Col md={1} xs={4}>
<ul className="nav nav-pills nav-stacked">
<SmartLink url='/counter' title='Counter' />
<SmartLink url='/autoCounter' title='AutoCounter' />
<SmartLink url='/movies' title='Movies page' />
const navTop = () => (
<nav className="navbar navbar-inverse navbar-fixed-top">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">React-Redux-Router-CRUD-boilerplate</a>
</div>
<div id="navbar" className="navbar-collapse collapse">
<ul className="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
</Col>
<Col md={11} xs={8}>{this.props.children}</Col>
</Row>
</Grid>
<form className="navbar-form navbar-right">
<input type="text" className="form-control" placeholder="Search..." />
</form>
</div>
</div>
</nav>
);

return (
<div>
{ navTop() }
<div className="container-fluid">
<div className="row">
<div className="col-sm-3 col-md-2 sidebar">
<ul className="nav nav-sidebar">
<SmartLink url='/counter' title='Counter' />
<SmartLink url='/autoCounter' title='AutoCounter' />
<SmartLink url='/movies' title='Movies page' />
</ul>
</div>
<div className="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{this.props.children}
</div>
</div>
</div>
</div>
);
}
}
161 changes: 155 additions & 6 deletions src/containers/MoviesPage/MoviesPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,163 @@
import React, { Component } from 'react';
import { Grid, Row } from 'react-bootstrap';

export default class MoviesPage extends Component {
render() {
return (
<Grid>
<Row>
<h2>MOVIES PAGE</h2>
</Row>
</Grid>
<div>
<h1 className="page-header">Dashboard</h1>

<div className="row placeholders">
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail" />
<h4>Label</h4>
<span className="text-muted">Something else</span>
</div>
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail" />
<h4>Label</h4>
<span className="text-muted">Something else</span>
</div>
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail" />
<h4>Label</h4>
<span className="text-muted">Something else</span>
</div>
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail" />
<h4>Label</h4>
<span className="text-muted">Something else</span>
</div>
</div>

<h2 className="sub-header">Section title</h2>
<div className="table-responsive">
<table className="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>className</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
}
117 changes: 113 additions & 4 deletions src/styles/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,114 @@
// Settings go here
// local class (will be prefixed with hash)
.some-class{
margin: 10px;
}

// Base styles taken from 'dashboard.css'
// http://getbootstrap.com/examples/dashboard/
/*
* Base structure
*/

// Wrap into global scope.
// Because by default local scope is set and each class have unique name, so we need to avoid this
// if we want our example to look the same as dashboard example
:global {
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}


/*
* Global add-ons
*/

.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}

/*
* Sidebar
*/

/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}

/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}


/*
* Main content
*/

.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}


/*
* Placeholder dashboard ideas
*/

.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
}
4 changes: 0 additions & 4 deletions src/styles/main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
@import 'base';
@import 'vendor/normalize';

//global class - will not have prefix
:global(.some-class){
padding: 10px;
}
body{
background-color: #EEEAF5;
}
Expand Down
Loading

0 comments on commit a55c325

Please sign in to comment.