So much polish

client/homebrew/editPage/editPage.jsx

@@ -11,8 +11,6 @@ var request = require("superagent");
 var EditPage = React.createClass({
 	getDefaultProps: function() {
 		return {
-			//text : "",
-			pending : false,
 			id : null,
 			entry : {
 				text : "",
@@ -27,10 +25,19 @@ var EditPage = React.createClass({
 	getInitialState: function() {
 		return {
 			text: this.props.entry.text,
-			pending : false
+			pending : false,
+			lastUpdated : this.props.entry.updatedAt
 		};
 	},
 
+	componentDidMount: function() {
+		var self = this;
+		window.onbeforeunload = function(){
+			if(!self.state.pending) return;
+			return "You have unsaved changes!";
+		}
+	},
+
 	handleTextChange : function(text){
 		this.setState({
 			text : text,
@@ -45,17 +52,18 @@ var EditPage = React.createClass({
 			.send({text : this.state.text})
 			.end((err, res) => {
 				this.setState({
-					pending : false
+					pending : false,
+					lastUpdated : res.body.updatedAt
 				})
 			})
 	}, 1500),
 
 	render : function(){
-
 		return <div className='editPage'>
 			<Statusbar
 				editId={this.props.entry.editId}
 				shareId={this.props.entry.shareId}
+				lastUpdated={this.state.lastUpdated}
 				isPending={this.state.pending} />
 
 			<div className='paneSplit'>
@@ -66,9 +74,6 @@ var EditPage = React.createClass({
 					<PHB text={this.state.text} />
 				</div>
 			</div>
-
-
-
 		</div>
 	}
 });

client/homebrew/editPage/editPage.less

@@ -1,24 +1,5 @@
 .editPage{
 
-	.paneSplit{
-		width : 100%;
-		max-height: 100%;
-		.leftPane, .rightPane{
-			display: inline-block;
-			vertical-align: top;
-			position: relative;
-			min-height: 100%;
-		}
 
-		.leftPane{
-			width : 40%;
-		}
-		.rightPane{
-			width : 60%;
-
-			overflow-y: scroll;
-		}
-
-	}
 
 }

client/homebrew/editor/editor.jsx

@@ -55,6 +55,11 @@ var Icons = [
 		icon : 'fa-arrows-v',
 		snippet : "<div style='margin-top:140px'></div>\n\n",
 		tooltip : "Vertical Spacing"
+	},
+	{
+		icon : 'fa-image',
+		snippet : "<img />",
+		tooltip : "Insert Image"
 	}
 
 
@@ -68,6 +73,10 @@ var Editor = React.createClass({
 		};
 	},
 
+	componentDidMount: function() {
+		this.refs.textarea.focus();
+	},
+
 	handleTextChange : function(e){
 		this.props.onChange(e.target.value);
 	},

client/homebrew/editor/editor.less

@@ -4,11 +4,13 @@
 	height     : 100%;
 	min-height : 100%;
 	width      : 100%;
+	display: flex;
+	  flex-direction: column;
 	.textIcons{
-		position       : absolute;
 		display        : inline-block;
 		vertical-align : top;
 		.icon{
+			display     : inline-block;
 			height      : 30px;
 			width       : 30px;
 			cursor      : pointer;
@@ -26,10 +28,13 @@
 		}
 	}
 	textarea{
-		display    : inline-block;
+		box-sizing : border-box;
 		resize     : none;
 		overflow-y : scroll;
 		height     : 100%;
 		width      : 100%;
+		padding    : 10px;
+		border     : none;
+		outline: none;
 	}
 }

client/homebrew/homePage/homePage.jsx

@@ -12,7 +12,7 @@ var HomePage = React.createClass({
 
 	getInitialState: function() {
 		return {
-			text: "# Welcome"
+			text: "# Welcome \n Katie help me decide what should go here."
 		};
 	},
 
@@ -38,8 +38,18 @@ var HomePage = React.createClass({
 		return(
 			<div className='homePage'>
 				<Statusbar />
-				<Editor text={this.state.text} onChange={this.handleTextChange} />
+				<div className='paneSplit'>
-				<PHB text={this.state.text} />
+					<div className='leftPane'>
+						<Editor text={this.state.text} onChange={this.handleTextChange} />
+					</div>
+					<div className='rightPane'>
+						<PHB text={this.state.text} />
+					</div>
+				</div>
+
+				<a href='/homebrew/new' className='floatingNewButton'>
+					Create your own <i className='fa fa-magic' />
+				</a>
 			</div>
 		);
 	}

client/homebrew/homePage/homePage.less

@@ -1,3 +1,20 @@
-.homePage{
 
+.homePage{
+	position : relative;
+	a.floatingNewButton{
+		.animate(background-color);
+		position         : absolute;
+		display          : block;
+		right            : 70px;
+		bottom           : 70px;
+		padding          : 1em;
+		background-color : @orange;
+		font-size        : 1.5em;
+		color            : white;
+		text-decoration  : none;
+		box-shadow       : 3px 3px 15px black;
+		&:hover{
+			background-color : darken(@orange, 20%);
+		}
+	}
 }

client/homebrew/homebrew.less

@@ -12,4 +12,31 @@ html,body, #reactContainer{
 .homebrew{
 	background-color: @steel;
 	height : 100%;
+
+	.paneSplit{
+		width : 100%;
+		height: 100vh;
+		padding-top: 25px;
+		position: relative;
+		box-sizing: border-box;
+
+		.leftPane, .rightPane{
+			display: inline-block;
+			vertical-align: top;
+			position: relative;
+			height: 100%;
+			min-height: 100%;
+		}
+
+		.leftPane{
+			width : 40%;
+		}
+		.rightPane{
+			width : 60%;
+			height: 100%;
+
+			overflow-y: scroll;
+		}
+
+	}
 }

client/homebrew/phb/phb.less

@@ -1,11 +1,12 @@
 
 .pbhPages{
 	background-color: @steel;
-	padding : 40px 0px;
+	padding : 30px 0px;
 	&>.phb{
 		box-shadow       : 1px 4px 14px #000;
 		margin-left: auto;
 		margin-right: auto;
+		margin-bottom: 30px;
 	}
 }
 @font-face {
@@ -72,7 +73,7 @@
 	position : relative;
 	overflow: hidden;
 
-	//Accents
+	//Page Accents
 	&:after{
 		content : "";
 		position: absolute;
@@ -85,8 +86,8 @@
 		background-image     : url('/assets/homebrew/assets/accent.png');
 	}
 
-
+	//Avoid breaking up
-	p,ul,blockquote{
+	p,ul,blockquote,table{
 		-webkit-column-break-inside : avoid;
 		-moz-column-break-inside    : avoid;
 		-o-column-break-inside      : avoid;
@@ -338,7 +339,7 @@
 		&+p{
 			&::first-letter{
 				float: left;
-				margin-top: 0.3em;
+				margin-top: 0.4em;
 				margin-bottom: 0.4em;
 				font-family: Solbera;
 				font-size: 10em;

client/homebrew/sharePage/sharePage.jsx

@@ -24,9 +24,8 @@ var SharePage = React.createClass({
 		return(
 			<div className='sharePage'>
 				<Statusbar
-					shareId={this.props.entry.shareId}
+					lastUpdated={this.props.entry.updatedAt}
-					/>
+				/>
-
 
 				<PHB text={this.props.entry.text} />
 			</div>

client/homebrew/statusbar/statusbar.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
+var Moment = require('moment');
 
 var Logo = require('naturalCrit/logo/logo.jsx');
 
@@ -14,6 +15,8 @@ var Statusbar = React.createClass({
 			shareId : null,
 			isPending : false,
 
+			lastUpdated : null,
+
 			info : null
 		};
 	},
@@ -23,8 +26,11 @@ var Statusbar = React.createClass({
 	},
 
 	renderInfo : function(){
-		//render last update?
+		if(!this.props.lastUpdated) return null;
-		//number of times viewed?
+
+		return <div className='lastUpdated'>
+			Last updated: {Moment(this.props.lastUpdated).fromNow()}
+		</div>
 	},
 
 	renderNewButton  : function(){
@@ -36,6 +42,8 @@ var Statusbar = React.createClass({
 	},
 
 	renderEdit : function(){
+		return null;
+
 		if(!this.props.editId) return null;
 
 		return <div className='editField' key='edit' onClick={this.selectInputText.bind(this, 'edit')}>
@@ -47,10 +55,9 @@ var Statusbar = React.createClass({
 	renderShare : function(){
 		if(!this.props.shareId) return null;
 
-		return <div className='shareField' key='share' onClick={this.selectInputText.bind(this, 'share')}>
+		return <a className='shareField' key='share' href={'/homebrew/share/' + this.props.shareId} target="_blank">
-			<span>Share Link</span>
+			Share Link <i className='fa fa-external-link' />
-			<input type='text' readOnly value={'/homebrew/share/' + this.props.shareId} ref='share'/>
+		</a>
-		</div>
 	},
 
 	renderStatus : function(){
@@ -71,17 +78,16 @@ var Statusbar = React.createClass({
 			<Logo />
 
 			<div className='left'>
-				<div className='toolName'>
+				<a href='/homebrew' className='toolName'>
-					Home<i className='fa fa-beer fa-flip-horizontal' /><small>rewery</small>
+					The Home<i className='fa fa-beer fa-flip-horizontal' /><small>rewery</small>
-				</div>
+				</a>
 
 			</div>
 
 			<div className='controls right'>
 				{this.renderStatus()}
-				{this.renderEdit()}
+				{this.renderInfo()}
 				{this.renderShare()}
-
 				{this.renderNewButton()}
 			</div>
 		</div>

client/homebrew/statusbar/statusbar.less

@@ -1,18 +1,26 @@
 
 .statusbar{
-	height           : 1.0em;
+	height           : 25px;
 	background-color : black;
 	font-size        : 24px;
+	position: fixed;
+	width :100%;
+	z-index : 1000;
 	color            : white;
 	line-height      : 1.0em;
 	border-bottom    : 1px solid @grey;
 	.logo{
 		display        : inline-block;
 		vertical-align : middle;
-		margin-right   : 40px;
+		margin-right   : 20px;
+		margin-top: -5px;
+		svg{
+			margin-top: -6px;
+		}
 	}
 	.left{
 		display : inline-block;
+		vertical-align: top;
 	}
 	.right{
 		float : right;
@@ -20,8 +28,11 @@
 	.toolName{
 		vertical-align : middle;
 		font-family    : CodeBold;
+		text-decoration: none;
+		color: white;
+		display: block;
 		font-size      : 16px;
-		line-height    : 100%;
+		line-height    : 30px;
 		small{
 			font-family : CodeBold;
 		}
@@ -44,10 +55,17 @@
 			color           : white;
 			text-decoration : none;
 			&:hover{
-				background-color : rgba(255,0,0,0.4);
+				background-color : fade(@green, 70%);
 			}
 		}
-		.editField, .shareField{
+		.shareField{
+			color           : white;
+			text-decoration : none;
+			cursor : pointer;
+			.animate(background-color);
+			&:hover{
+				background-color : fade(@teal, 70%);
+			}
 			span{
 				margin-right : 10px;
 			}

gulpfile.js

@@ -27,6 +27,8 @@ var gulp = vitreumTasks(gulp, {
 		"classnames",
 		"jsoneditor",
 
+		"moment",
+
 		"superagent",
 
 		"marked",

package.json

@@ -17,6 +17,7 @@
     "jsoneditor": "^4.2.1",
     "lodash": "^3.10.1",
     "marked": "^0.3.5",
+    "moment": "^2.11.0",
     "mongoose": "^4.3.3",
     "pico-flux": "^1.1.0",
     "pico-router": "^1.0.0",

server/homebrew.api.js

@@ -46,12 +46,12 @@ module.exports = function(app){
 	//Updating
 	app.put('/homebrew/update/:id', function(req, res){
 		HomebrewModel.find({editId : req.params.id}, function(err, objs){
-			if(!objs.length || err) return res.send(400);
+			if(!objs.length || err) return res.status(404).send("Can not find homebrew with that id");
 			var resEntry = objs[0];
 			resEntry.text = req.body.text;
 			resEntry.save(function(err, obj){
-				if(!err) return res.sendStatus(500);
+				if(err) return res.status(500).send("Error while saving");
-				return res.send(200);
+				return res.status(200).send(obj);
 			})
 		});
 	});

shared/naturalCrit/logo/logo.jsx

@@ -2,14 +2,14 @@ var React = require('react');
 
 var Logo = React.createClass({
 	render : function(){
-		return <div className='logo' {... this.props}>
+		return <a className='logo' {... this.props} href='/'>
 			<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"><path d="M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116  c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262  c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358  c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976  c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0  s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083  c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113  c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223  c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562  c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223  C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004  c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002  l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008  c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082  c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076  c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043  c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303  c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035  c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017  c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048  c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026  c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202  L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75  L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645  z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649  l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393  l-38.263,6.959L46.631,69.09z"></path></svg>
 
 			<span className='name'>
 				Natural<span className='crit'>Crit</span>
 			</span>
 
-		</div>
+		</a>
 	}
 });
 

shared/naturalCrit/logo/logo.less

@@ -9,6 +9,9 @@
 
 
 .logo{
+	color : white;
+	text-decoration: none;
+	display: block;
 
 	svg{
 		vertical-align : middle;