Added ability to hide render wanring notification

changelog.md

@@ -1,5 +1,9 @@
 # changelog
 
+### Saturday, 22/04/217 - v2.7.4
+- Give ability to hide the render warning notification
+
+
 ### Friday, 03/03/2017 - v2.7.3
 - Increasing the range on the Partial Page Rendering for a quick-fix for it getting out of sync on long brews.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "scripts": {
     "dev": "node scripts/dev.js",
     "quick": "node scripts/quick.js",

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -3,6 +3,8 @@ const React = require('react');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+const DISMISS_KEY = 'dismiss_render_warning';
+
 const RenderWarnings = React.createClass({
 	getInitialState: function() {
 		return {
@@ -40,6 +42,9 @@ const RenderWarnings = React.createClass({
 		}
 	},
 	checkWarnings : function(){
+		const hideDismiss = localStorage.getItem(DISMISS_KEY);
+		if(hideDismiss) return this.setState({warnings : {}});
+
 		this.setState({
 			warnings : _.reduce(this.warnings, (r, fn, type) => {
 				const element = fn();
@@ -48,11 +53,16 @@ const RenderWarnings = React.createClass({
 			}, {})
 		})
 	},
+	dismiss : function(){
+		localStorage.setItem(DISMISS_KEY, true);
+		this.checkWarnings();
+	},
 	render: function(){
 		if(_.isEmpty(this.state.warnings)) return null;
 
 		return <div className='renderWarnings'>
-			<i className='fa fa-exclamation-triangle' />
+			<i className='fa fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fa fa-exclamation-triangle ohno' />
 			<h3>Render Warnings</h3>
 			<small>If this homebrew is rendering badly if might be because of the following:</small>
 			<ul>{_.values(this.state.warnings)}</ul>

shared/homebrewery/renderWarnings/renderWarnings.less

@@ -11,12 +11,22 @@
 	padding-left     : 85px;
 	background-color : @yellow;
 	color            : white;
-	i{
-		position: absolute;
-		left: 24px;
-		opacity: 0.8;
-		font-size: 2.5em;
-		top: 24px;
+	i.ohno{
+		position  : absolute;
+		top       : 24px;
+		left      : 24px;
+		opacity   : 0.8;
+		font-size : 2.5em;
+	}
+	i.dismiss{
+		position : absolute;
+		top      : 10px;
+		right    : 10px;
+		cursor   : pointer;
+		opacity  : 0.6;
+		&:hover{
+			opacity : 1;
+		}
 	}
 	small{
 		opacity   : 0.7;
@@ -32,10 +42,10 @@
 		list-style-position : outside;
 		list-style-type     : disc;
 		li{
+			font-size   : 0.8em;
 			line-height : 1.6em;
-			font-size: 0.8em;
 			em{
-				font-weight: 800;
+				font-weight : 800;
 			}
 		}
 	}