diff --git a/changelog.md b/changelog.md
index 3d28a718b..aa9301fce 100644
--- a/changelog.md
+++ b/changelog.md
@@ -11,6 +11,7 @@
- Fixed realtime renderer not functioning if loaded with malformed html on load (thanks u/RattiganIV re:247)
- Removed a lot of unused files in shared
- vitreum v4 now lets me use codemirror as a pure node dependacy
+- Added a new Render Warning overlay. It detects situations where the brew may not be rendering correctly (wrong browser, browser is zoomed in...) and let's the user know
### Saturday, 03/12/2016 - v2.6.0
diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 5e39bde1e..ea969c44d 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -5,6 +5,9 @@ const cx = require('classnames');
const Markdown = require('naturalcrit/markdown.js');
const ErrorBar = require('./errorBar/errorBar.jsx');
+//TODO: move to the brew renderer
+const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx')
+
const PAGE_HEIGHT = 1056;
const PPR_THRESHOLD = 50;
@@ -132,6 +135,7 @@ const BrewRenderer = React.createClass({
style={{height : this.state.height}}>
+
{this.renderPages()}
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 650f9d0cc..cc0e27b56 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -17,8 +17,6 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
const Markdown = require('naturalcrit/markdown.js');
-const Warnings = require('homebrewery/warnings/warnings.jsx')
-
const SAVE_TIMEOUT = 3000;
@@ -213,8 +211,6 @@ const EditPage = React.createClass({
return
{this.renderNavbar()}
-
-
+ Built for Chrome
+ Other browsers do not support key features this site uses.
+ ;
}
},
zoom : function(){
if(window.devicePixelRatio !== 1){
- return 'You are zoomed';
+ return
+ Your browser is zoomed.
+ This can cause content to jump columns.
+ ;
}
}
},
checkWarnings : function(){
this.setState({
warnings : _.reduce(this.warnings, (r, fn, type) => {
- const text = fn();
- if(text) r[type] = text;
+ const element = fn();
+ if(element) r[type] = element;
return r;
}, {})
})
@@ -40,17 +46,13 @@ const Warnings = React.createClass({
render: function(){
if(_.isEmpty(this.state.warnings)) return null;
- const errors = _.map(this.state.warnings, (text, idx) => {
- return {text}
- });
-
- return
+ return
-
Rendering Warnings
+
Render Warnings
If this homebrew is rendering badly if might be because of the following:
-
+
{_.values(this.state.warnings)}
}
});
-module.exports = Warnings;
+module.exports = RenderWarnings;
diff --git a/shared/homebrewery/warnings/warnings.less b/shared/homebrewery/renderWarnings/renderWarnings.less
similarity index 57%
rename from shared/homebrewery/warnings/warnings.less
rename to shared/homebrewery/renderWarnings/renderWarnings.less
index 398425273..f63d7a2ff 100644
--- a/shared/homebrewery/warnings/warnings.less
+++ b/shared/homebrewery/renderWarnings/renderWarnings.less
@@ -2,19 +2,21 @@
.warnings{
position : fixed;
display : inline-block;
+ top : @navbarHeight;
+ right : 15px;
z-index : 10001;
+ width : 350px;
padding : 20px;
padding-bottom : 10px;
- padding-left : 100px;
- right : 0px;
- top : @navbarHeight;
- background-color : @orange;
+ padding-left : 85px;
+ background-color : @yellow;
color : white;
i{
- position : absolute;
- left : 30px;
- opacity : 0.8;
- font-size : 3em;
+ position: absolute;
+ left: 24px;
+ opacity: 0.8;
+ font-size: 2.5em;
+ top: 24px;
}
small{
opacity : 0.7;
@@ -27,10 +29,14 @@
ul{
margin-top : 15px;
font-size : 0.8em;
- list-style-position : inside;
+ list-style-position : outside;
list-style-type : disc;
li{
line-height : 1.6em;
+ font-size: 0.8em;
+ em{
+ font-weight: 800;
+ }
}
}
}
\ No newline at end of file