start console styling

client/modules/IDE/components/Console.js

@@ -4,7 +4,7 @@ import React, { PropTypes } from 'react';
  *  How many console messages to store
  *  @type {Number}
  */
-const consoleMax = 5;
+const consoleMax = 100;
 
 class Console extends React.Component {
 
@@ -37,13 +37,20 @@ class Console extends React.Component {
     return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
   }
 
+  componentDidUpdate() {
+    this.refs.console_messages.scrollTop = this.refs.console_messages.scrollHeight;
+  }
+
   render() {
     const childrenToDisplay = this.children.slice(-consoleMax);
 
     return (
       <div ref="console" className="preview-console">
+        <h2 className="preview-console__header">console</h2>
+        <div ref="console_messages" className="preview-console__messages">
           {childrenToDisplay}
         </div>
+      </div>
     );
   }
 

client/modules/IDE/components/PreviewFrame.js

@@ -94,7 +94,8 @@ class PreviewFrame extends React.Component {
     const jsFiles = [];
     this.props.jsFiles.forEach(jsFile => {
       const newJSFile = { ...jsFile };
-      const jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
+      let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
+      jsFileStrings = jsFileStrings || [];
       jsFileStrings.forEach(jsFileString => {
         if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp)('|")$/)) {
           const filePath = jsFileString.substr(1, jsFileString.length - 2);

client/modules/IDE/pages/IDEView.js

@@ -59,6 +59,7 @@ class IDEView extends React.Component {
           indentWithSpace={this.props.indentWithSpace}
           indentWithTab={this.props.indentWithTab}
         />
+        <div className="editor-preview-container">
           <Sidebar
             files={this.props.files}
             selectedFile={this.props.selectedFile}
@@ -68,6 +69,7 @@ class IDEView extends React.Component {
             expandSidebar={this.props.expandSidebar}
             collapseSidebar={this.props.collapseSidebar}
           />
+          <div className="editor-console-container">
             <Editor
               file={this.props.selectedFile}
               updateFileContent={this.props.updateFileContent}
@@ -76,6 +78,11 @@ class IDEView extends React.Component {
               isTabIndent={this.props.preferences.isTabIndent}
               files={this.props.files}
             />
+            <Console
+              consoleEvent={this.props.ide.consoleEvent}
+              isPlaying={this.props.ide.isPlaying}
+            />
+          </div>
           <PreviewFrame
             htmlFile={this.props.htmlFile}
             jsFiles={this.props.jsFiles}
@@ -88,10 +95,7 @@ class IDEView extends React.Component {
             isPlaying={this.props.ide.isPlaying}
             dispatchConsoleEvent={this.props.dispatchConsoleEvent}
           />
-        <Console
+        </div>
-          consoleEvent={this.props.ide.consoleEvent}
-          isPlaying={this.props.ide.isPlaying}
-        />
         {(() => {
           if (this.props.ide.modalIsVisible) {
             return (

client/styles/abstracts/_variables.scss

@@ -40,5 +40,8 @@ $ide-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 $input-border-color: #979797;
 
+$console-light-background-color: #eee;
+$console-header-background-color: #d6d6d6;
+$console-header-color: #b1b1b1;
 $console-warn-color: #ffbe05;
 $console-error-color: #ff5f52;

client/styles/components/_console.scss

@@ -1,11 +1,13 @@
 .preview-console {
-	position: fixed;
+	position: absolute;
-	width:100%;
+	width: 100%;
-	height:60px;
+	height: #{150 / $base-font-size}rem;
-	right:0px;
+	right: 0;
-	bottom: 0px;
+	bottom: 0;
-	background:$dark-background-color;
+	left: 0;
-	z-index:1000;
+	background: $console-light-background-color;
+	z-index: 1000;
+	overflow: hidden;
 
 	& > {
 		position:relative;
@@ -25,3 +27,19 @@
 		color: $console-warn-color;
 	}
 }
+
+.preview-console__header {
+	background-color: $console-header-background-color;
+	color: $console-header-color;
+	font-size: #{16 / $base-font-size}rem;
+	font-weight: normal;
+	padding: #{5 / $base-font-size}rem;
+}
+
+.preview-console__messages {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	height: #{121 / $base-font-size}rem;
+
+}

client/styles/layout/_ide.scss

@@ -1,14 +1,25 @@
 .ide {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	height: 100%;
 	flex-wrap: wrap;
 }
 
-.editor-holder {
+.editor-preview-container {
+  width: 100%;
+  flex: 1 0 0;
+  display: flex;
+}
+
+.editor-console-container {
   flex: 1 0 0;
   max-width: 45%;
   height: 100%;
+  position: relative;
+}
+
+.editor-holder {
+	height: 100%;
 }
 
 .preview-frame {