Snippets done

client/homebrew/editor/editor.jsx

@@ -24,7 +24,10 @@ var Editor = React.createClass({
 		};
 	},
 
-	cursorPosition : null,
+	cursorPosition : {
+		line : 0,
+		ch : 0
+	},
 
 
 	componentDidMount: function() {
@@ -41,7 +44,6 @@ var Editor = React.createClass({
 	},
 
 	handleSnippetClick : function(injectText){
-		if(!this.cursorPosition) return;
 		var lines = this.props.value.split('\n');
 		lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
 

client/homebrew/editor/editor.less

@@ -9,9 +9,9 @@
 		align-items      : center;
 		.snippetGroup{
 			.animate(background-color);
-			margin        : 0px 10px;
+			margin        : 0px 8px;
-			padding       : 5px;
+			padding       : 3px;
-			font-size     : 15px;
+			font-size     : 13px;
 			border-radius : 5px;
 			&:hover, &.selected{
 				background-color : #999;
@@ -20,7 +20,7 @@
 				line-height : 20px;
 				.groupName{
 					margin-left : 6px;
-					font-size   : 12px;
+					font-size   : 10px;
 				}
 			}
 			&:hover{
@@ -39,6 +39,11 @@
 					padding   : 10px;
 					cursor    : pointer;
 					font-size : 13px;
+					//font-weight: 800;
+					//text-transform: uppercase;
+					i{
+						margin-right: 8px;
+					}
 					&:hover{
 						background-color : #999;
 					}

client/homebrew/editor/snippets/snippets.js

@@ -5,184 +5,61 @@ var ClassFeatureGen = require('./classfeature.gen.js');
 var FullClassGen = require('./fullclass.gen.js');
 
 
-/* Snippet Categories
-
-	- editor
-	- Tables
-	- PHB
-	- document
-	- print
-
-*/
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 module.exports = [
-	/*
-	{
-		tooltip : 'Full Class',
-		icon : 'fa-user',
-		snippet : FullClassGen,
-	},
-	*/
-	{
-		tooltip : 'Spell',
-		icon : 'fa-magic',
-		snippet : SpellGen,
-	},
-	{
-		tooltip : 'Class Feature',
-		icon : 'fa-trophy',
-		snippet : ClassFeatureGen,
-	},
-	{
-		tooltip : 'Note',
-		icon : 'fa-sticky-note',
-		snippet : function(){
-			return [
-				"> ##### Time to Drop Knowledge",
-				"> Use notes to point out some interesting information. ",
-				"> ",
-				"> **Tables and lists** both work within a note."
-			].join('\n');
-		},
-	},
-	{
-		tooltip : 'Table',
-		icon : 'fa-th-list',
-		snippet : function(){
-			return [
-				"##### Cookie Tastiness",
-				"| Tastiness | Cookie Type |",
-				"|:----:|:-------------|",
-				"| -5  | Raisin |",
-				"| 8th  | Chocolate Chip |",
-				"| 11th | 2 or lower |",
-				"| 14th | 3 or lower |",
-				"| 17th | 4 or lower |\n\n",
-			].join('\n');
-		},
-	},
-	{
-		tooltip : 'Monster Stat Block',
-		icon : 'fa-bug',
-		snippet : MonsterBlockGen.half,
-	},
-	{
-		tooltip : 'Wide Monster Stat Block',
-		icon : 'fa-bullseye',
-		snippet : MonsterBlockGen.full,
-	},
-	{
-		tooltip : "Class Table",
-		icon : 'fa-table',
-		snippet : ClassTableGen.full,
-	},
-	{
-		tooltip : "Half Class Table",
-		icon : 'fa-list-alt',
-		snippet : ClassTableGen.half,
-	},
-	{
-		tooltip : "Column Break",
-		icon : 'fa-columns',
-		snippet : function(){
-			return "```\n```\n\n";
-		}
-	},
-	{
-		tooltip : "New Page",
-		icon : 'fa-file-text',
-		snippet : function(){
-			return "\\page\n\n";
-		}
-	},
-	{
-		tooltip : "Vertical Spacing",
-		icon : 'fa-arrows-v',
-		snippet : function(){
-			return "<div style='margin-top:140px'></div>\n\n";
-		}
-	},
-	{
-		tooltip : "Insert Image",
-		icon : 'fa-image',
-		snippet : function(){
-			return "<img src='https://i.imgur.com/RJ6S6eY.gif' style='position:absolute;bottom:-10px;right:-60px;' />";
-		}
-	},
 
-	{
-		tooltip : "Page number & Footnote",
-		icon : 'fa-book',
-		snippet : function(){
-			return "<div class='pageNumber'>1</div>\n<div class='footnote'>PART 1 | FANCINESS</div>\n\n";
-		}
-	},
-
-	{
-		tooltip : "Ink Friendly",
-		icon : 'fa-print',
-		snippet : function(){
-			return "<style>\n  .phb{ background : white;}\n  .phb img{ display : none;}\n  .phb hr+blockquote{background : white;}\n</style>\n\n";
-		}
-	},
-
-	{
-		tooltip : "A4 Page Size",
-		icon : 'fa-file',
-		snippet : function(){
-			return '<style>\n.phb{\n    width : 210mm;\n    height : 297mm;\n}\n</style>';
-		}
-	}
-
-]
-
-
-
-
-
-module.exports = [
 	{
 		groupName : 'Editor',
 		icon : 'fa-pencil',
 		snippets : [
 			{
-				name : 'Spell',
+				name : "Column Break",
-				icon : 'fa-magic',
+				icon : 'fa-columns',
-				gen : SpellGen
+				gen : "```\n```\n\n"
 			},
 			{
-				name : 'Test',
+				name : "New Page",
-				icon : 'fa-rocket',
+				icon : 'fa-file-text',
-				gen : function(){ return "TEST"}
+				gen : "\\page\n\n"
-			}
+			},
-		]
-	},
-	{
-		groupName : 'Tables',
-		icon : 'fa-table',
-		snippets : [
 			{
-				name : 'Spell',
+				name : "Vertical Spacing",
-				icon : 'fa-magic',
+				icon : 'fa-arrows-v',
-				gen : SpellGen
+				gen : "<div style='margin-top:140px'></div>\n\n"
-			}
+			},
+			{
+				name : "Image",
+				icon : 'fa-image',
+				gen : [
+					"<img ",
+					"  src='https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg' ",
+					"  style='width:325px' />",
+					"Credit: Kyounghwan Kim"
+				].join('\n')
+			},
+			{
+				name : "Background Image",
+				icon : 'fa-tree',
+				gen : [
+					"<img ",
+					"  src='http://i.imgur.com/hMna6G0.png' ",
+					"  style='position:absolute; top:50px; right:30px; width:280px' />"
+				].join('\n')
+			},
+
+			{
+				name : "Page Number",
+				icon : 'fa-bookmark',
+				gen : "<div class='pageNumber'>1</div>\n<div class='footnote'>PART 1 | FANCINESS</div>\n\n"
+			},
+
+
 		]
 	},
+
+
+	/************************* PHB ********************/
+
 	{
 		groupName : 'PHB',
 		icon : 'fa-book',
@@ -190,11 +67,109 @@ module.exports = [
 			{
 				name : 'Spell',
 				icon : 'fa-magic',
-				gen : SpellGen
+				gen : SpellGen,
+			},
+			{
+				name : 'Class Feature',
+				icon : 'fa-trophy',
+				gen : ClassFeatureGen,
+			},
+			{
+				name : 'Note',
+				icon : 'fa-sticky-note',
+				gen : function(){
+					return [
+						"> ##### Time to Drop Knowledge",
+						"> Use notes to point out some interesting information. ",
+						"> ",
+						"> **Tables and lists** both work within a note."
+					].join('\n');
+				},
+			},
+			{
+				name : 'Monster Stat Block',
+				icon : 'fa-bug',
+				gen : MonsterBlockGen.half,
+			},
+			{
+				name : 'Wide Monster Stat Block',
+				icon : 'fa-paw',
+				gen : MonsterBlockGen.full,
 			}
 		]
 	},
 
+
+
+	/*********************  TABLES *********************/
+
+	{
+		groupName : 'Tables',
+		icon : 'fa-table',
+		snippets : [
+			{
+				name : "Class Table",
+				icon : 'fa-table',
+				gen : ClassTableGen.full,
+			},
+			{
+				name : "Half Class Table",
+				icon : 'fa-list-alt',
+				gen : ClassTableGen.half,
+			},
+			{
+				name : 'Table',
+				icon : 'fa-th-list',
+				gen : function(){
+					return [
+						"##### Cookie Tastiness",
+						"| Tastiness | Cookie Type |",
+						"|:----:|:-------------|",
+						"| -5  | Raisin |",
+						"| 8th  | Chocolate Chip |",
+						"| 11th | 2 or lower |",
+						"| 14th | 3 or lower |",
+						"| 17th | 4 or lower |\n\n",
+					].join('\n');
+				},
+			}
+		]
+	},
+
+
+
+
+	/**************** PRINT *************/
+
+	{
+		groupName : 'Print',
+		icon : 'fa-print',
+		snippets : [
+			{
+				name : "A4 PageSize",
+				icon : 'fa-file',
+				gen : ['<style>',
+					'  .phb{',
+					'    width : 210mm;',
+					'    height : 297mm;',
+					'  }',
+					'</style>'
+				].join('\n')
+			},
+			{
+				name : "Ink Friendly",
+				icon : 'fa-print',
+				gen : ['<style>',
+					'  .phb{ background : white;}',
+					'  .phb img{ display : none;}',
+					'  .phb hr+blockquote{background : white;}',
+					'</style>',
+					''
+				].join('\n')
+			},
+		]
+	},
+
 ]
 
 

client/homebrew/homebrew.less

@@ -1,34 +1,26 @@
+
 @import 'naturalcrit/styles/reset.less';
 //@import 'naturalcrit/styles/elements.less';
 @import 'naturalcrit/styles/animations.less';
 @import 'naturalcrit/styles/colors.less';
 @import 'naturalcrit/styles/tooltip.less';
-
 html,body, #reactContainer{
-	min-height: 100vh;
+	height      : 100vh;
-	height: 100vh;
+	min-height  : 100vh;
-	margin: 0;
+	margin      : 0;
-	font-family      : 'Open Sans', sans-serif;
+	font-family : 'Open Sans', sans-serif;
 }
-
 .homebrew{
-	background-color: @steel;
+	height           : 100%;
-
+	background-color : @steel;
-	height: 100%;
-
 	.page{
-		height : 100%;
+		display        : flex;
-		display: flex;
+		height         : 100%;
-		flex-direction: column;
+		flex-direction : column;
-
-
 		.content{
-			flex: auto;
+			position : relative;
-			position: relative;
+			height   : calc(~"100% - 29px"); //Navbar height
-			height: calc(~"100% - 29px"); //Navbar height
+			flex     : auto;
 		}
 	}
-
-
-
 }

client/homebrew/pages/editPage/editPage.jsx

@@ -3,7 +3,6 @@ var _ = require('lodash');
 var cx = require('classnames');
 var request = require("superagent");
 
-
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
 
@@ -18,16 +17,6 @@ var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 
-
-
-
-var Statusbar = require('../../statusbar/statusbar.jsx');
-var PageContainer = require('../../pageContainer/pageContainer.jsx');
-var Editor = require('../../editor/editor.jsx');
-
-
-
-
 const SAVE_TIMEOUT = 3000;
 
 
@@ -146,10 +135,8 @@ var EditPage = React.createClass({
 	renderSaveButton : function(){
 
 		if(this.state.isSaving){
-
+			return <Nav.item icon="fa-spinner fa-spin">saving...</Nav.item>
-					return <Nav.item icon="fa-spinner fa-spin">saving...</Nav.item>
+		}
-
-				}
 
 
 		if(!this.state.isPending && !this.state.isSaving){

client/homebrew/pages/newPage/newPage.jsx

@@ -18,7 +18,7 @@ const KEY = 'naturalCrit-homebrew-new';
 var NewPage = React.createClass({
 	getInitialState: function() {
 		return {
-			title : 'EDIT ME',
+			title : 'My Awesome Brew v99.99',
 			text: '',
 			isSaving : false
 		};

todo.md

@@ -19,6 +19,7 @@ X Add in a localstorage fallback on the `/new` page, clear it when they save
 X Rename `/client/naturalCrit` -> `/client/main`
 - Move snippets into their new groups
 - Replace pseudo-elements with encoded images
+- Make hybrid editor and brewRenderer (with resize listeners)
 
 ## v1.6
 - Add in brew title, use for metadata?