diff --git a/src/ContainerDetails.react.js b/src/ContainerDetails.react.js
index f20579462d..04907f9edd 100644
--- a/src/ContainerDetails.react.js
+++ b/src/ContainerDetails.react.js
@@ -400,14 +400,12 @@ var ContainerDetails = React.createClass({
} else {
if (this.state.page === this.PAGE_HOME) {
body = (
-
+
);
} else if (this.state.page === this.PAGE_LOGS) {
body = (
-
-
- {logs}
-
+
+ {logs}
);
} else if (this.state.page === this.PAGE_PORTS) {
diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js
index d6e784dffd..8f3a2a7304 100644
--- a/src/ContainerHome.react.js
+++ b/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 = (
-
+
);
- }*/
+ }
return (
-
-
HOME
+
+
+
Web Preview
+
+ {preview}
+
+
+ {this.props.logs}
+
+
);
}
diff --git a/styles/containers.less b/styles/containers.less
index 082a252e9c..11afe4eeb8 100644
--- a/styles/containers.less
+++ b/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 {
diff --git a/styles/theme.less b/styles/theme.less
index f8346046a1..b9fb909e2d 100644
--- a/styles/theme.less
+++ b/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;
-}