diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index e05809db..952b5787 100644
--- a/client/modules/IDE/components/Console.js
+++ b/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 (
- {childrenToDisplay}
+
console
+
+ {childrenToDisplay}
+
);
}
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index d0e50298..1279890c 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/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);
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 236f3629..96a9a1e6 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -59,39 +59,43 @@ class IDEView extends React.Component {
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
/>
-
-
-
- }
- isPlaying={this.props.ide.isPlaying}
- dispatchConsoleEvent={this.props.dispatchConsoleEvent}
- />
-
+
+
+
+
+
+
+
+ }
+ isPlaying={this.props.ide.isPlaying}
+ dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+ />
+
{(() => {
if (this.props.ide.modalIsVisible) {
return (
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index a006ff62..320a640c 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/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;
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 8dd0e6ba..b9c49d29 100644
--- a/client/styles/components/_console.scss
+++ b/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;
+
}
\ No newline at end of file
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index a37c636d..e303835f 100644
--- a/client/styles/layout/_ide.scss
+++ b/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%;
}