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,12 +37,19 @@ 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">
-        {childrenToDisplay}
+        <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,39 +59,43 @@ class IDEView extends React.Component {
           indentWithSpace={this.props.indentWithSpace}
           indentWithTab={this.props.indentWithTab}
         />
-        <Sidebar
-          files={this.props.files}
-          selectedFile={this.props.selectedFile}
-          setSelectedFile={this.props.setSelectedFile}
-          newFile={this.props.newFile}
-          isExpanded={this.props.ide.sidebarIsExpanded}
-          expandSidebar={this.props.expandSidebar}
-          collapseSidebar={this.props.collapseSidebar}
-        />
-        <Editor
-          file={this.props.selectedFile}
-          updateFileContent={this.props.updateFileContent}
-          fontSize={this.props.preferences.fontSize}
-          indentationAmount={this.props.preferences.indentationAmount}
-          isTabIndent={this.props.preferences.isTabIndent}
-          files={this.props.files}
-        />
-        <PreviewFrame
-          htmlFile={this.props.htmlFile}
-          jsFiles={this.props.jsFiles}
-          cssFiles={this.props.cssFiles}
-          files={this.props.files}
-          content={this.props.selectedFile.content}
-          head={
-            <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-          }
-          isPlaying={this.props.ide.isPlaying}
-          dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-        />
-        <Console
-          consoleEvent={this.props.ide.consoleEvent}
-          isPlaying={this.props.ide.isPlaying}
-        />
+        <div className="editor-preview-container">
+          <Sidebar
+            files={this.props.files}
+            selectedFile={this.props.selectedFile}
+            setSelectedFile={this.props.setSelectedFile}
+            newFile={this.props.newFile}
+            isExpanded={this.props.ide.sidebarIsExpanded}
+            expandSidebar={this.props.expandSidebar}
+            collapseSidebar={this.props.collapseSidebar}
+          />
+          <div className="editor-console-container">
+            <Editor
+              file={this.props.selectedFile}
+              updateFileContent={this.props.updateFileContent}
+              fontSize={this.props.preferences.fontSize}
+              indentationAmount={this.props.preferences.indentationAmount}
+              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}
+            cssFiles={this.props.cssFiles}
+            files={this.props.files}
+            content={this.props.selectedFile.content}
+            head={
+              <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+            }
+            isPlaying={this.props.ide.isPlaying}
+            dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+          />
+        </div>
         {(() => {
           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;
-	width:100%;
-	height:60px;
-	right:0px;
-	bottom: 0px;
-	background:$dark-background-color;
-	z-index:1000;
+	position: absolute;
+	width: 100%;
+	height: #{150 / $base-font-size}rem;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: $console-light-background-color;
+	z-index: 1000;
+	overflow: hidden;
 
 	& > {
 		position:relative;
@@ -24,4 +26,20 @@
 	.preview-console__warn {
 		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,13 +1,24 @@
 .ide {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	height: 100%;
 	flex-wrap: wrap;
 }
 
-.editor-holder {
-	flex: 1 0 0;
+.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%;
 }