Merge branch 'v1_4'

changelog.md

@@ -1,5 +1,10 @@
 # changelog
 
+### Wednesday, 06/04/2016 - v1.4
+* Pages will now partially render. This should greatly speed up *very* large homebrews. The Homebreery will figure out which page you should be looking at and render that page, the page before, and the page after.
+* Zooming should be fixed. I've changed the font size units to be cm, which match the units of the page. Zooming in and out now look much better.
+
+
 ### Monday, 29/02/2016 - v1.3.1
 * Removng the changelog button from the Share page
 * Added a A4 page size snippet (thanks 	guppy42!)

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/homePage/welcome_msg.txt

@@ -33,17 +33,11 @@ Anyone with the *share url* will be able to access a read-only version of your h
 ```
 ```
 
-## New Things in v1.3!
+## New Things in v1.4!
 What's new in the latest update? Check out the full changelog [here](/homebrew/changelog)
 
-* **PDF Exporting works!** Check out the following note block to see how
+* **Partial Page Rendering** Only renders the page you're looking at. If you have a very large brew, you'll love this.
-* **Changelog Page** will track all the updates I've made
+* **Improved Zoom** Zooming in and out on the browser is now way nicer looking. Go get the bird's eye view!
-* **Delete brew** butotn has been added to the edit page
-* **Wide Monster Stat Blocks** have been added with a snippet
-* **Single Column Class Tables** have been added with a snippet
-* **Improvements to stlying** to get it closer to PHB stlying
-* **Better Firefox Compatibility**, although Chrome still works best.
-
 
 
 >##### PDF Exporting

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;
+		}
 	}
+
 }

client/homebrew/phbStyle/phb.style.less

@@ -47,7 +47,7 @@
 	background-color  : @background;
 	background-image  : @backgroundImage;
 	font-family       : BookSanity;
-	font-size         : 9pt;
+	font-size         : 0.317cm;
 	text-rendering    : optimizeLegibility;
 	page-break-before : always;
 	page-break-after  : always;
@@ -107,7 +107,7 @@
 	}
 	h1{
 		column-span         : all;
-		font-size           : 28pt;
+		font-size           : 0.987cm;
 		-webkit-column-span : all;
 		-moz-column-span    : all;
 		&+p::first-letter{
@@ -119,20 +119,20 @@
 		}
 	}
 	h2{
-		font-size : 20pt;
+		font-size : 0.705cm;
 	}
 	h3{
-		font-size     : 15pt;
+		font-size     : 0.529cm;
 		border-bottom : 2px solid @headerUnderline;
 	}
 	h4{
 		margin-bottom : 0.00em;
-		font-size     : 12pt;
+		font-size     : 0.458cm;
 	}
 	h5{
 		margin-bottom : 0.2em;
 		font-family   : ScalySansSmallCaps;
-		font-size     : 13pt;
+		font-size     : 0.423cm;
 		font-weight   : 900;
 	}
 	//*****************************
@@ -176,7 +176,7 @@
 		border-bottom    : 2px black solid;
 		box-shadow       : 1px 4px 14px #888;
 		p, ul{
-			font-size   : 10pt;
+			font-size         : 0.352cm;
 			line-height : 1.1em;
 		}
 	}
@@ -203,7 +203,7 @@
 		ul{
 			.useSansSerif();
 			padding-left    : 1em;
-			font-size       : 10pt;
+			font-size         : 0.352cm;
 			color           : @headerText;
 			text-indent     : -1em;
 			list-style-type : none;

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"