Added a quick build task and created the warnings component

client/homebrew/navbar/navbar.jsx

@@ -6,19 +6,20 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = React.createClass({
 	getInitialState: function() {
 		return {
-			showNonChromeWarning : false,
+			//showNonChromeWarning : false,
 			ver : '0.0.0'
 		};
 	},
 
 	componentDidMount: function() {
-		const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+		//const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
 		this.setState({
-			showNonChromeWarning : !isChrome,
+			//showNonChromeWarning : !isChrome,
 			ver : window.version
 		})
 	},
 
+/*
 	renderChromeWarning : function(){
 		if(!this.state.showNonChromeWarning) return;
 		return <Nav.item className='warning' icon='fa-exclamation-triangle'>
@@ -28,7 +29,7 @@ const Navbar = React.createClass({
 			</div>
 		</Nav.item>
 	},
-
+*/
 	render : function(){
 		return <Nav.base>
 			<Nav.section>
@@ -38,7 +39,7 @@ const Navbar = React.createClass({
 				</Nav.item>
 				<Nav.item>{`v${this.state.ver}`}</Nav.item>
 
-				{this.renderChromeWarning()}
+				{/*this.renderChromeWarning()*/}
 			</Nav.section>
 			{this.props.children}
 		</Nav.base>

client/homebrew/navbar/navbar.less

@@ -1,4 +1,4 @@
-
+@navbarHeight : 28px;
 .homebrew nav{
 	.homebrewLogo{
 		.animate(color);

client/homebrew/pages/editPage/editPage.jsx

@@ -17,6 +17,8 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const Markdown = require('naturalcrit/markdown.js');
 
+const Warnings = require('homebrewery/warnings/warnings.jsx')
+
 const SAVE_TIMEOUT = 3000;
 
 
@@ -211,6 +213,8 @@ const EditPage = React.createClass({
 		return <div className='editPage page'>
 			{this.renderNavbar()}
 
+			<Warnings />
+
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor

package.json

@@ -4,6 +4,7 @@
   "version": "2.7.0",
   "scripts": {
     "dev": "node scripts/dev.js",
+    "quick": "node scripts/quick.js",
     "build": "node scripts/build.js",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production&& npm run build",

scripts/dev.js

@@ -11,13 +11,7 @@ const Proj = require('./project.json');
 
 Promise.resolve()
 	.then(jsx('homebrew', './client/homebrew/homebrew.jsx', Proj.libs, ['shared']))
-	.then(() => {
-		console.log('here2');
-	})
 	.then(less('homebrew', './shared'))
-	.then(() => {
-		console.log('here?');
-	})
 	.then(assets(Proj.assets, ['./shared', './client']))
 	.then(livereload())
 	.then(server('./server.js', ['server']))

scripts/quick.js

@@ -0,0 +1,17 @@
+const label = 'quick';
+console.time(label);
+
+const jsx   = require('vitreum/steps/jsx.js').partial;
+const less  = require('vitreum/steps/less.js').partial;
+const server = require('vitreum/steps/server.watch.js').partial;
+
+const Proj = require('./project.json');
+
+Promise.resolve()
+	.then(jsx('homebrew', './client/homebrew/homebrew.jsx', Proj.libs, ['./shared']))
+	.then(less('homebrew', ['./shared']))
+	.then(jsx('admin', './client/admin/admin.jsx', Proj.libs, ['./shared']))
+	.then(less('admin', ['./shared']))
+	.then(server('./server.js', ['server']))
+	.then(console.timeEnd.bind(console, label))
+	.catch(console.error);

shared/homebrewery/warnings/warnings.jsx

@@ -0,0 +1,56 @@
+
+const React = require('react');
+const _     = require('lodash');
+const cx    = require('classnames');
+
+const Warnings = React.createClass({
+	getInitialState: function() {
+		return {
+			warnings: {}
+		};
+	},
+	componentDidMount: function() {
+		this.checkWarnings();
+
+		//TODO: Setup event for window zoom
+
+	},
+	warnings : {
+		chrome : function(){
+			const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+			if(isChrome){
+				return 'OPtimized for Chrome';
+			}
+		},
+		zoom : function(){
+			if(window.devicePixelRatio !== 1){
+				return 'You are zoomed';
+			}
+		}
+	},
+	checkWarnings : function(){
+		this.setState({
+			warnings : _.reduce(this.warnings, (r, fn, type) => {
+				const text = fn();
+				if(text) r[type] = text;
+				return r;
+			}, {})
+		})
+	},
+	render: function(){
+		if(_.isEmpty(this.state.warnings)) return null;
+
+		const errors = _.map(this.state.warnings, (text, idx) => {
+			return <li key={idx}>{text}</li>
+		});
+
+		return <div className='warnings'>
+			<i className='fa fa-exclamation-triangle' />
+			<h3>Rendering Warnings</h3>
+			<small>If this homebrew is rendering badly if might be because of the following:</small>
+			<ul>{errors}</ul>
+		</div>
+	}
+});
+
+module.exports = Warnings;

shared/homebrewery/warnings/warnings.less

@@ -0,0 +1,36 @@
+
+.warnings{
+	position         : fixed;
+	display          : inline-block;
+	z-index          : 10001;
+	padding          : 20px;
+	padding-bottom   : 10px;
+	padding-left     : 100px;
+	right : 0px;
+	top : @navbarHeight;
+	background-color : @orange;
+	color            : white;
+	i{
+		position  : absolute;
+		left      : 30px;
+		opacity   : 0.8;
+		font-size : 3em;
+	}
+	small{
+		opacity   : 0.7;
+		font-size : 0.6em;
+	}
+	h3{
+		font-size   : 1.1em;
+		font-weight : 800;
+	}
+	ul{
+		margin-top          : 15px;
+		font-size           : 0.8em;
+		list-style-position : inside;
+		list-style-type     : disc;
+		li{
+			line-height : 1.6em;
+		}
+	}
+}