Adding a non-chrome warning

client/homebrew/navbar/navbar.jsx

@@ -4,6 +4,29 @@ var _ = require('lodash');
 var Nav = require('naturalcrit/nav/nav.jsx');
 
 var Navbar = React.createClass({
+	getInitialState: function() {
+		return {
+			showNonChromeWarning : false
+		};
+	},
+
+	componentDidMount: function() {
+		var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+		this.setState({
+			showNonChromeWarning : !isChrome
+		})
+	},
+
+	renderChromeWarning : function(){
+		if(!this.state.showNonChromeWarning) return;
+		return <Nav.item className='warning' icon='fa-exclamation-triangle'>
+			Optimized for Chrome
+			<div className='dropdown'>
+				If you are experiencing rendering issues, use Chrome instead
+			</div>
+		</Nav.item>
+	},
+
 	render : function(){
 		return <Nav.base>
 			<Nav.section>
@@ -11,7 +34,9 @@ var Navbar = React.createClass({
 				<Nav.item href='/' className='homebrewLogo'>
 					<div>The Homebrewery</div>
 				</Nav.item>
-				<Nav.item>v2.2.4</Nav.item>
+				<Nav.item>v2.2.5</Nav.item>
+
+				{this.renderChromeWarning()}
 			</Nav.section>
 			{this.props.children}
 		</Nav.base>

client/homebrew/navbar/navbar.less

@@ -66,7 +66,7 @@
 				.animate(background-color);
 				position         : relative;
 				display          : block;
-				box-sizing       : border-box;;
+				box-sizing       : border-box;
 				padding          : 13px 5px;
 				background-color : #333;
 				color            : white;
@@ -92,4 +92,25 @@
 			}
 		}
 	}
+	.warning.navItem{
+		position         : relative;
+		background-color : @orange;
+		color            : white;
+		&:hover>.dropdown{
+			visibility : visible;
+		}
+		.dropdown{
+			position         : absolute;
+			display          : block;
+			top              : 28px;
+			left             : 0px;
+			visibility       : hidden;
+			z-index          : 10000;
+			box-sizing       : border-box;
+			width            : 100%;
+			padding          : 13px 5px;
+			background-color : #333;
+			text-align       : center;
+		}
+	}
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "scripts": {
     "postinstall": "gulp prod",
     "start": "node server.js"