Built a new pane split component

client/homebrew/homePage/homePage.jsx

@@ -9,7 +9,7 @@ var Editor = require('../editor/editor.jsx');
 //var WelcomeText = require('./welcomeMessage.js');
 
 
-
+var SplitPane = require('../splitPane/splitPane.jsx');
 
 var Nav = require('naturalCrit/nav/nav.jsx');
 
@@ -58,7 +58,7 @@ var HomePage = React.createClass({
 
 	render : function(){
 		return(
-			<div className='homePage'>
+			<div className='homePage page'>
 
 				<Navbar>
 					<Nav.item
@@ -75,16 +75,26 @@ var HomePage = React.createClass({
 					</Nav.item>
 				</Navbar>
 
+				<div className='content'>
+
+					<SplitPane>
+						<div className='woo'>
+							one
+						</div>
+
+						<div className='cool'>
+							two
+						</div>
+
+
+					</SplitPane>
+
+
 
-				<div className='paneSplit'>
-					<div className='leftPane'>
-						<Editor text={this.state.text} onChange={this.handleTextChange} />
-					</div>
-					<div className='rightPane'>
-						<PageContainer text={this.state.text} />
-					</div>
 				</div>
 
+
+
 				<a href='/homebrew/new' className='floatingNewButton'>
 					Create your own <i className='fa fa-magic' />
 				</a>
@@ -94,3 +104,28 @@ var HomePage = React.createClass({
 });
 
 module.exports = HomePage;
+
+
+/*
+	<div className='temp'>
+		test
+
+			<div className='woo' />
+
+	</div>
+*/
+
+
+/*
+
+<div className='paneSplit'>
+	<div className='leftPane'>
+		<Editor text={this.state.text} onChange={this.handleTextChange} />
+	</div>
+	<div className='rightPane'>
+		<PageContainer text={this.state.text} />
+	</div>
+</div>
+
+
+*/

client/homebrew/homePage/homePage.less

@@ -1,5 +1,7 @@
 
 .homePage{
+
+
 	position : relative;
 	a.floatingNewButton{
 		.animate(background-color);

client/homebrew/homebrew.less

@@ -5,13 +5,61 @@
 @import 'naturalCrit/styles/tooltip.less';
 
 html,body, #reactContainer{
-	min-height: 100%;
+	min-height: 100vh;
+	height: 100vh;
+	margin: 0;
 	font-family      : 'Open Sans', sans-serif;
+	//overflow: hidden;
 }
 
 .homebrew{
 	background-color: @steel;
-	height : 100%;
+
+	height: 100%;
+
+	.page{
+		height : 100%;
+		display: flex;
+		flex-direction: column;
+
+
+		nav{
+			//height : 22px;
+		}
+
+		.content{
+			background-color: red;
+			flex: auto;
+			//position: relative;
+
+
+
+			.woo{
+				background-color: @red;
+			}
+			.cool{
+				background-color: @green;
+				height : 500px;
+			}
+
+
+			.temp{
+				flex: auto;
+				overflow-y: scroll;
+
+				.woo{
+					width:  50px;
+					height : 2000px;
+					background-color: green;
+
+				}
+
+			}
+		}
+	}
+
+
+
 
 	.paneSplit{
 		width : 100%;

client/homebrew/navbar/navbar.less

@@ -6,8 +6,8 @@
 		font-size: 12px;
 
 		div{
-			margin-top: 3px;
-			margin-bottom: -3px;
+			margin-top: 2px;
+			margin-bottom: -2px;
 		}
 
 		color : white;

client/homebrew/pageContainer/pageContainer.less

@@ -2,9 +2,11 @@
 
 .pageContainer{
 	background-color : @steel;
-	margin-top: 25px;
 	overflow-y: scroll;
-	height : 100%;
+
+height :100%;
+
+
 	.pages{
 		padding          : 30px 0px;
 

client/homebrew/splitPane/splitPane.jsx

@@ -0,0 +1,76 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var SplitPane = React.createClass({
+
+	getInitialState: function() {
+		return {
+			storageKey : 'naturalcrit-pane-split-test',
+			size : null,
+			isDragging : false
+		};
+	},
+
+	componentDidMount: function() {
+		var paneSize = window.localStorage.getItem(this.props.storageKey);
+		if(paneSize){
+			this.setState({
+				size : paneSize
+			})
+		}
+	},
+
+	handleUp : function(){
+		this.setState({ isDragging : false })
+	},
+	handleDown : function(){
+		this.setState({ isDragging : true })
+	},
+	handleMove : function(e){
+		if(!this.state.isDragging) return;
+		this.setState({
+			size : e.pageX
+		});
+		window.localStorage.setItem(this.props.storageKey, e.pageX);
+	},
+
+	renderDivider : function(){
+		return <div
+			className='divider'
+			onMouseDown={this.handleDown}
+		/>
+	},
+
+	render : function(){
+		return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
+			<Pane width={this.state.size}>{this.props.children[0]}</Pane>
+			{this.renderDivider()}
+			<Pane>{this.props.children[1]}</Pane>
+		</div>
+	}
+});
+
+var Pane = React.createClass({
+	getDefaultProps: function() {
+		return {
+			width : null
+		};
+	},
+	render : function(){
+		var styles = {};
+		if(this.props.width){
+			styles = {
+				flex : 'none',
+				width : this.props.width + 'px'
+			}
+		}
+
+		return <div className={cx('pane', this.props.className)} style={styles}>
+			{this.props.children}
+		</div>
+	}
+});
+
+
+module.exports = SplitPane;

client/homebrew/splitPane/splitPane.less

@@ -0,0 +1,16 @@
+
+.splitPane{
+	position       : relative;
+	display        : flex;
+	height         : 100%;
+	outline        : none;
+	flex-direction : row;
+	.pane{
+		flex : 1;
+	}
+	.divider{
+		width            : 5px;
+		cursor           : ew-resize;
+		background-color : black;
+	}
+}

shared/naturalCrit/nav/nav.jsx

@@ -6,7 +6,9 @@ var Nav = {
 	base : React.createClass({
 		render : function(){
 			return <nav>
-				{this.props.children}
+				<div className='navContent'>
+					{this.props.children}
+				</div>
 			</nav>
 		}
 	}),

shared/naturalCrit/nav/nav.less

@@ -8,9 +8,13 @@
 	src         : url('/assets/naturalCrit/logo/CODE Bold.otf');
 }
 nav{
-	display          : flex;
 	background-color : #333;
-	justify-content  : space-between;
+
+	.navContent{
+		display          : flex;
+
+		justify-content  : space-between;
+	}
 	.navSection{
 		display     : flex;
 		align-items : center;
@@ -51,7 +55,7 @@ nav{
 	}
 	.navItem{
 		.animate(background-color);
-		padding          : 5px 8px;
+		padding          : 8px 12px;
 		cursor           : pointer;
 		background-color : #333;
 		font-size        : 12px;