Various playground fixes (#186)

* fix exampleMenu ul/li css reset

* shrink header and playground toolbar when short on height

* fix #123 - capture and display playground warnings

Author: glennsl

src/components/Header.js

@@ -10,19 +10,41 @@ export default ({inverted}) => (
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: '10px 10px',
+    padding: 10,
     paddingLeft: '2em',
     // height: 100,
+    '@media(max-height: 770px)': {
+      paddingLeft: '1em'
+    },
     '@media(max-width: 400px)': {
       paddingLeft: 10,
       height: 'auto',
-    }
+    },
   }}>
-    <div style={{alignSelf: 'flex-start' }} >
-      <Link to="/" style={{textDecoration: 'none', color: 'currentColor'}} >
-        <img style={{display: 'block', width: 50, maxWidth: 50, margin: 0, border: `2px solid ${gray}`, boxSizing: 'content-box'}} src={icon} width={50} alt="Reason"/>
+    <div style={{alignSelf: 'flex-start' }}>
+      <Link to="/" style={styles.link}>
+        <img css={styles.logo} src={icon} width={50} alt="Reason"/>
       </Link>
     </div>
     <HeaderNav />
   </div>
 )
+
+const styles = {
+  logo: {
+    display: 'block',
+    width: 50,
+    maxWidth: 50,
+    margin: 0,
+    border: `2px solid ${gray}`,
+    boxSizing: 'content-box',
+
+    '@media(max-height: 770px)': {
+      width: 28
+    }
+  },
+  link: {
+    textDecoration: 'none',
+    color: 'currentColor'
+  }
+};

src/components/HeaderNav.js

@@ -56,6 +56,9 @@ const styles = {
     '@media(max-width: 550px)': {
       padding: '0 5px',
       fontSize: '.9em',
+    },
+    '@media(max-height: 770px)': {
+      fontSize: '.9em',
     }
   }, 
   linkContainer: {

src/pages/try.js

@@ -467,13 +467,23 @@ export default class Try extends Component {
     });
   }
 
+  compile = (code) => {
+    const _consoleError = console.error;
+    let warning = '';
+    console.error = (...args) => args.forEach(argument => warning += argument + `\n`);
+    const res = JSON.parse(window.ocaml.compile(code));
+    console.error = _consoleError;
+    return [res, warning || null];
+  } 
+
   tryCompiling = debounce((reason, ocaml) => {
     try {
-      const res = JSON.parse(window.ocaml.compile(ocaml))
+      const [res, warning] = this.compile(ocaml);
       if (res.js_code) {
         this.setState(_ => ({
           js: res.js_code,
           jsIsLatest: true,
+          compileWarning: warning
         }))
         if (this.state.autoEvaluate) {
             this.evalJs(res.js_code);
@@ -483,6 +493,7 @@ export default class Try extends Component {
         this.errorTimerId = setTimeout(
           () => this.setState(_ => ({
             compileError: res,
+            compileWarning: null,
             js: '',
           })),
           errorTimeout
@@ -492,6 +503,7 @@ export default class Try extends Component {
       this.errorTimerId = setTimeout(
         () => this.setState(_ => ({
           compileError: err,
+          compileWarning: null,
           js: '',
         })),
         errorTimeout
@@ -500,6 +512,7 @@ export default class Try extends Component {
     this.setState(_ => {
       return {
         compileError: null,
+        compileWarning: null,
         jsIsLatest: false,
         output: [],
       }
@@ -530,11 +543,20 @@ export default class Try extends Component {
   }
 
   render() {
-    const { reason, ocaml, js, reasonSyntaxError, compileError, ocamlSyntaxError, jsError } = this.state
+    const {
+      reason,
+      ocaml,
+      js,
+      reasonSyntaxError,
+      compileError,
+      compileWarning,
+      ocamlSyntaxError,
+      jsError
+    } = this.state;
     const codemirrorStyles = [
       styles.codemirror,
       isSafari && styles.codemirrorSafari,
-    ]
+    ];
     return (
       <div css={styles.container}>
         <Helmet>
@@ -611,6 +633,12 @@ export default class Try extends Component {
                       : compileError.message}
                   </div>
                 </div>}
+              {compileWarning &&
+                <div css={styles.warning}>
+                  <div css={styles.errorBody}>
+                    {compileWarning}
+                  </div>
+                </div>}
             </div>
           </div>
           <div css={styles.column}>
@@ -674,6 +702,10 @@ const styles = {
     backgroundColor: '#faa',
     padding: '10px 20px',
   },
+  warning: {
+    backgroundColor: '#fff8dc',
+    padding: '10px 20px',
+  },
 
   container: {
     position: 'absolute',
@@ -754,7 +786,11 @@ const styles = {
     '&:hover, &:hover button': {
       color: accent,
       cursor: 'pointer'
-    }
+    },
+
+    '@media(max-height: 770px)': {
+      padding: '.5em 1em',
+    },
   },
 
   shareButton: {
@@ -841,8 +877,12 @@ const styles = {
     width: '25vw',
     boxShadow: '1px 1px 1px rgba(0, 0, 0, .2)',
     borderTop: '1px solid #d6d4d4',
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
 
     '& li': {
+      margin: 0,
       padding: '.5em 2em',
 
       '&:first-child': {