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: -
      {errors}
    +
      {_.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