Split pane scrolling is FINALLY working

client/homebrew/editor/editor.less

@@ -4,9 +4,8 @@
 	height     : 100%;
 	min-height : 100%;
 	width      : 100%;
-	margin-top: 25px;
-	display: flex;
-	  flex-direction: column;
+	//display: flex;
+	//flex-direction: column;
 	.textIcons{
 		display        : inline-block;
 		vertical-align : top;

client/homebrew/homePage/homePage.jsx

@@ -59,7 +59,6 @@ var HomePage = React.createClass({
 	render : function(){
 		return(
 			<div className='homePage page'>
-
 				<Navbar>
 					<Nav.item
 						href='/homebrew/changelog'
@@ -76,25 +75,12 @@ var HomePage = React.createClass({
 				</Navbar>
 
 				<div className='content'>
-
 					<SplitPane>
-						<div className='woo'>
-							one
-						</div>
-
-						<div className='cool'>
-							two
-						</div>
-
-
+						<Editor text={this.state.text} onChange={this.handleTextChange} />
+						<PageContainer text={this.state.text} />
 					</SplitPane>
-
-
-
 				</div>
 
-
-
 				<a href='/homebrew/new' className='floatingNewButton'>
 					Create your own <i className='fa fa-magic' />
 				</a>
@@ -106,26 +92,16 @@ 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>
+/* Test code
+<div className='content'>
+	<SplitPane>
+		<div className='woo'>
+			one
+		</div>
+		<div className='temp'>
+			yo
+			<div className='tooBig' />
+		</div>
+	</SplitPane>
 </div>
-
-
 */

client/homebrew/homebrew.less

@@ -23,44 +23,41 @@ html,body, #reactContainer{
 		flex-direction: column;
 
 
-		nav{
-			//height : 22px;
-		}
-
 		.content{
-			background-color: red;
 			flex: auto;
-			//position: relative;
+			position: relative;
+			height: calc(~"100% - 29px");
 
+			//overflow-y: scroll;
 
+			.pane{
+
+			}
 
 			.woo{
 				background-color: @red;
 			}
-			.cool{
-				background-color: @green;
-				height : 500px;
-			}
-
-
 			.temp{
-				flex: auto;
-				overflow-y: scroll;
+				background-color: @green;
+				//max-height : 100%;
+				//height : 100%;
+				//overflow: scroll;
 
-				.woo{
-					width:  50px;
-					height : 2000px;
-					background-color: green;
+				.tooBig{
+					background-color: @purple;
+					width : 50px;
+					height : 5000px;
 
 				}
-
 			}
+
+
 		}
 	}
 
 
 
-
+/*
 	.paneSplit{
 		width : 100%;
 		height: 100vh;
@@ -90,4 +87,5 @@ html,body, #reactContainer{
 		}
 
 	}
+	*/
 }

client/homebrew/pageContainer/pageContainer.less

@@ -2,9 +2,9 @@
 
 .pageContainer{
 	background-color : @steel;
-	overflow-y: scroll;
+//	overflow-y: scroll;
 
-height :100%;
+//height :100%;
 
 
 	.pages{

client/homebrew/splitPane/splitPane.jsx

@@ -3,15 +3,13 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var SplitPane = React.createClass({
-
 	getInitialState: function() {
 		return {
-			storageKey : 'naturalcrit-pane-split-test',
+			storageKey : 'naturalcrit-pane-split',
 			size : null,
 			isDragging : false
 		};
 	},
-
 	componentDidMount: function() {
 		var paneSize = window.localStorage.getItem(this.props.storageKey);
 		if(paneSize){
@@ -22,10 +20,11 @@ var SplitPane = React.createClass({
 	},
 
 	handleUp : function(){
-		this.setState({ isDragging : false })
+		this.setState({ isDragging : false });
 	},
 	handleDown : function(){
-		this.setState({ isDragging : true })
+		this.setState({ isDragging : true });
+		this.unFocus()
 	},
 	handleMove : function(e){
 		if(!this.state.isDragging) return;
@@ -35,6 +34,14 @@ var SplitPane = React.createClass({
 		window.localStorage.setItem(this.props.storageKey, e.pageX);
 	},
 
+	unFocus : function() {
+		if(document.selection){
+				document.selection.empty();
+		}else{
+			window.getSelection().removeAllRanges();
+		}
+	},
+
 	renderDivider : function(){
 		return <div
 			className='divider'
@@ -44,9 +51,9 @@ var SplitPane = React.createClass({
 
 	render : function(){
 		return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
-			<Pane width={this.state.size}>{this.props.children[0]}</Pane>
+			<Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane>
 			{this.renderDivider()}
-			<Pane>{this.props.children[1]}</Pane>
+			<Pane ref='pane2'>{this.props.children[1]}</Pane>
 		</div>
 	}
 });
@@ -65,7 +72,6 @@ var Pane = React.createClass({
 				width : this.props.width + 'px'
 			}
 		}
-
 		return <div className={cx('pane', this.props.className)} style={styles}>
 			{this.props.children}
 		</div>

client/homebrew/splitPane/splitPane.less

@@ -7,6 +7,7 @@
 	flex-direction : row;
 	.pane{
 		flex : 1;
+		overflow-x: hidden;
 	}
 	.divider{
 		width            : 5px;

shared/naturalCrit/nav/nav.less

@@ -9,11 +9,9 @@
 }
 nav{
 	background-color : #333;
-
 	.navContent{
-		display          : flex;
-
-		justify-content  : space-between;
+		display         : flex;
+		justify-content : space-between;
 	}
 	.navSection{
 		display     : flex;
@@ -26,13 +24,10 @@ nav{
 		margin-left     : 8px;
 		color           : white;
 		text-decoration : none;
-
 		&:hover{
 			.name{ color : @orange; }
 			svg{ fill : @orange }
 		}
-
-
 		svg{
 			height       : 13px;
 			margin-right : 0.2em;
@@ -58,11 +53,14 @@ nav{
 		padding          : 8px 12px;
 		cursor           : pointer;
 		background-color : #333;
-		font-size        : 12px;
+		font-size        : 10px;
+		font-weight      : 800;
 		color            : white;
-		text-decoration: none;
+		text-decoration  : none;
+		text-transform   : uppercase;
 		i{
 			margin-left : 5px;
+			font-size   : 13px;
 		}
 		&.tealLight:hover{ background-color : @tealLight };
 		&.teal:hover{ background-color : @teal };
@@ -85,7 +83,6 @@ nav{
 		&.greyLight:hover{ background-color : @greyLight };
 		&.grey:hover{ background-color : @grey };
 	}
-
 	.navSection + .navSection .navItem{
 		border-left : 1px solid #666;
 	}

todo.md

@@ -1,14 +1,16 @@
 # The Homebrewery
 
 ## v1.5 todo
-- Make statusbar un-fixed
-- Simplify the panel css to remove the current issues
+X Make statusbar un-fixed
+X Simplify the panel css to remove the current issues
+- Build new `BrewRenderer`, clean support for partial rendering
+- Add `infoBox` to BrewRenderer to show views, and current pages
+- Add in markdown editor
 - Add bleed snippet (bump)
 - Add the '/new' page and force save to reduce database size
-! Add pagniation and query to the homebrew api
-! Update the admin page with pagnition and a query box
-! Test the old/small brew filtering for deleteion
-- Make the status bar take children? Or just give it a string of booleans. Just simplify it
+X Add pagniation and query to the homebrew api
+X Update the admin page with pagnition and a query box
+X Test the old/small brew filtering for deleteion
 - Partial rendering kills style tags on unrendered pages. Detect if pages have style tags and render them.
 - Add in the link of Pateron?