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; -}