Home page skeleton.

src/ContainerDetails.react.js

@@ -400,14 +400,12 @@ var ContainerDetails = React.createClass({
     } else {
       if (this.state.page === this.PAGE_HOME) {
         body = (
-          <ContainerHome />
+          <ContainerHome ports={this.state.ports} defaultPort={this.state.defaultPort} logs={logs} />
         );
       } else if (this.state.page === this.PAGE_LOGS) {
         body = (
-          <div className="details-panel details-logs">
-            <div className="logs">
-              {logs}
-            </div>
+          <div className="details-panel details-logs logs">
+            {logs}
           </div>
         );
       } else if (this.state.page === this.PAGE_PORTS) {

src/ContainerHome.react.js

@@ -1,16 +1,36 @@
+var $ = require('jquery');
 var React = require('react/addons');
 
 var ContainerHome = React.createClass({
+  componentDidUpdate: function () {
+    // Scroll logs to bottom
+    var parent = $('.mini-logs');
+    if (parent.length) {
+      if (parent.scrollTop() >= this._oldHeight) {
+        parent.stop();
+        parent.scrollTop(parent[0].scrollHeight - parent.height());
+      }
+      this._oldHeight = parent[0].scrollHeight - parent.height();
+    }
+  },
   render: function () {
-    /*var preview;
-    if (this.state.defaultPort) {
+    var preview;
+    if (this.props.defaultPort) {
       preview = (
-        <iframe src={this.state.ports[this.state.defaultPort].url} autosize="on"></iframe>
+        <iframe src={this.props.ports[this.props.defaultPort].url}></iframe>
       );
-    }*/
+    }
     return (
-      <div className="details-panel">
-        <h1>HOME</h1>
+      <div className="details-panel home">
+        <div className="content">
+          <h4>Web Preview</h4>
+          <div className="widget web-preview">
+            {preview}
+          </div>
+          <div className="widget mini-logs">
+            {this.props.logs}
+          </div>
+        </div>
       </div>
     );
   }

styles/containers.less

@@ -633,15 +633,43 @@
         flex: 1;
         overflow: auto;
         background-color: #FFF;
-        .logs {
+        &.home {
+          background-color: #F9F9F9;
+          flex: 1;
+          .widget {
+            border-radius: 4px;
+            border: 1px solid @gray-lightest;
+            &.web-preview {
+              iframe {
+                border: 0;
+                border-radius: 4px;
+              }
+            }
+            &.mini-logs {
+              background-color: @gray-darkest;
+              color: @gray-lightest;
+              padding: 10px;
+              width: 300px;
+              height: 300px;
+              overflow: hidden;
+              font-family: Menlo;
+              font-size: 8px;
+              p {
+                margin-bottom: 5px;
+              }
+            }
+          }
+        }
+        &.logs {
+          background-color: @gray-darkest;
           -webkit-user-select: text;
           font-family: Menlo;
           font-size: 12px;
           padding: 20px 18px;
-          color: lighten(@gray-normal, 6%);
+          color: @gray-lightest;
           white-space: pre-wrap;
           p {
-            margin: 0 6px;
+            margin-bottom: 8px;
           }
         }
         .settings {

styles/theme.less

@@ -191,11 +191,3 @@ input[type="text"] {
 .btn-info    { .btn-styles(@btn-info-bg); }
 .btn-warning { .btn-styles(@btn-warning-bg); }
 .btn-danger  { .btn-styles(@btn-danger-bg); }
-
-iframe {
-  border: 0;
-  width: 50%;
-  height: 300px;
-  border-radius: 4px;
-  border: 1px solid @gray-lightest;
-}