Fixing issue#413 class feature duping entire brew

I think this might be caused by a new bug in Chrome or something since it seems to have popped up in GMBinder as well in the last couple weeks. See #683

Anyway, the error only occurs on the Class Table and Descriptive Text Box, which are also the only ones to use `border-image-repeat: round`. I changed it to `border-image-repeat: stretch` which solves the graphical issue and doesn't affect the appearance otherwise in this particular case.

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.
 

client/homebrew/editor/snippetbar/snippets/classfeature.gen.js

@@ -2,7 +2,7 @@ var _ = require('lodash');
 
 module.exports = function(classname){
 
-	classname = classname || _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
+	classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
 			'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge'])
 
 	classname = classname.toLowerCase();

client/homebrew/phbStyle/phb.style.less

@@ -415,7 +415,7 @@ body {
 	border              : initial;
 	border-style        : solid;
 	border-image-outset : 25px 17px;
-	border-image-repeat : round;
+	border-image-repeat : stretch;
 	border-image-slice  : 150 200 150 200;
 	border-image-source : @frameBorderImage;
 	border-image-width  : 47px;
@@ -423,9 +423,9 @@ body {
 		margin-bottom : 10px;
 	}
 }
-//*****************************
-// *       CLASS TABLE
-// *****************************/
+//************************************
+// *       DESCRIPTIVE TEXT BOX
+// ************************************/
 .phb .descriptive{
 	display             : block-inline;
 	margin-bottom       : 1em;
@@ -433,7 +433,7 @@ body {
 	font-family         : ScalySans;
 	border-style        : solid;
 	border-width        : 7px;
-	border-image        : @descriptiveBoxImage 12 round;
+	border-image        : @descriptiveBoxImage 12 stretch;
 	border-image-outset : 4px;
 	box-shadow          : 0px 0px 6px #faf7ea;
 	p{

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.5",
   "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;
 			}
 		}
 	}