Page container is now doign partial rendering, need to clean up the stlying though

client/homebrew/editor/editor.less

@@ -4,6 +4,7 @@
 	height     : 100%;
 	min-height : 100%;
 	width      : 100%;
+	margin-top: 25px;
 	display: flex;
 	  flex-direction: column;
 	.textIcons{

client/homebrew/homebrew.less

@@ -16,9 +16,10 @@ html,body, #reactContainer{
 	.paneSplit{
 		width : 100%;
 		height: 100vh;
-		padding-top: 25px;
+		//padding-top: 25px;
 		position: relative;
 		box-sizing: border-box;
+		overflow: hidden;
 
 		.leftPane, .rightPane{
 			display: inline-block;
@@ -26,6 +27,7 @@ html,body, #reactContainer{
 			position: relative;
 			height: 100%;
 			min-height: 100%;
+			//margin-top: 25px;
 		}
 
 		.leftPane{
@@ -34,8 +36,9 @@ html,body, #reactContainer{
 		.rightPane{
 			width : 60%;
 			height: 100%;
+			//overflow-y: scroll;
 
-			overflow-y: scroll;
+			overflow: hidden;
 		}
 
 	}

client/homebrew/pageContainer/pageContainer.jsx

@@ -4,23 +4,52 @@ var cx = require('classnames');
 
 var Markdown = require('marked');
 
+var PAGE_HEIGHT = 1056 + 30;
+
 var PageContainer = React.createClass({
 	getDefaultProps: function() {
 		return {
 			text : ""
 		};
 	},
+	getInitialState: function() {
+		return {
+			scrollPosition: 0
+		};
+	},
+
+	handleScroll : function(e){
+		this.setState({
+			scrollPosition : e.target.scrollTop
+		});
+	},
+
+	getViewablePageIndex : function(){
+		return Math.floor(this.state.scrollPosition / PAGE_HEIGHT);
+	},
+
+	renderDummyPage : function(key){
+		return <div className='phb' key={key}>
+			yo dawg
+		</div>
+	},
 
 	renderPages : function(){
+		var currentIndex = this.getViewablePageIndex();
 		return _.map(this.props.text.split('\\page'), (pageText, index) => {
-			return <div className='phb' dangerouslySetInnerHTML={{__html:Markdown(pageText)}} key={index} />
+			if(currentIndex - 1 == index || currentIndex == index || currentIndex + 1 == index){
+				return <div className='phb' dangerouslySetInnerHTML={{__html:Markdown(pageText)}} key={index} />
+			}else{
+				return this.renderDummyPage(index);
+			}
 		})
 	},
 
 	render : function(){
-		var self = this;
+		return <div className="pageContainer" onScroll={this.handleScroll}>
-		return <div className="pageContainer">
+			<div className='pages'>
-			{this.renderPages()}
+				{this.renderPages()}
+			</div>
 		</div>;
 	}
 });

client/homebrew/pageContainer/pageContainer.less

@@ -1,12 +1,19 @@
 @import (less) './client/homebrew/phbStyle/phb.style.less';
 
 .pageContainer{
-	padding          : 30px 0px;
 	background-color : @steel;
-	&>.phb{
+	margin-top: 25px;
-		margin-right  : auto;
+	overflow-y: scroll;
-		margin-bottom : 30px;
+	height : 100%;
-		margin-left   : auto;
+	.pages{
-		box-shadow    : 1px 4px 14px #000;
+		padding          : 30px 0px;
+
+		&>.phb{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
 	}
+
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "naturalCrit",
   "description": "A super rad project!",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "scripts": {
     "postinstall": "gulp prod",
     "start": "node server.js"