Homepage styling.

src/ContainerDetails.react.js

@@ -14,6 +14,7 @@ var boot2docker = require('./Boot2Docker');
 var ProgressBar = require('react-bootstrap/ProgressBar');
 var ContainerDetailsHeader = require('./ContainerDetailsHeader.react');
 var ContainerHome = require('./ContainerHome.react');
+var RetinaImage = require('react-retina-image');
 
 var ContainerDetails = React.createClass({
   mixins: [Router.State, Router.Navigation],
@@ -270,6 +271,30 @@ var ContainerDetails = React.createClass({
       }
     }.bind(this));
   },
+  handleItemMouseEnterRun: function () {
+    var $action = $(this.getDOMNode()).find('.action .run');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveRun: function () {
+    var $action = $(this.getDOMNode()).find('.action .run');
+    $action.css("visibility", "hidden");
+  },
+  handleItemMouseEnterRestart: function () {
+    var $action = $(this.getDOMNode()).find('.action .restart');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveRestart: function () {
+    var $action = $(this.getDOMNode()).find('.action .restart');
+    $action.css("visibility", "hidden");
+  },
+  handleItemMouseEnterTerminal: function () {
+    var $action = $(this.getDOMNode()).find('.action .terminal');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveTerminal: function () {
+    var $action = $(this.getDOMNode()).find('.action .terminal');
+    $action.css("visibility", "hidden");
+  },
   render: function () {
     var self = this;
 
@@ -544,17 +569,17 @@ var ContainerDetails = React.createClass({
         <ContainerDetailsHeader container={this.props.container} />
         <div className="details-subheader">
           <div className="details-header-actions">
-            <div className="action">
+            <div className="action" onMouseEnter={this.handleItemMouseEnterRun} onMouseLeave={this.handleItemMouseLeaveRun}>
-              <span className="icon icon-play-2 action-icon run-icon" onClick={this.handleView}></span>
+              <span className="action-icon" onClick={this.handleView}><RetinaImage src="button-run.png"/></span>
-              <span className="btn-label">Run</span>
+              <span className="btn-label run">Run</span>
             </div>
-            <div className="action">
+            <div className="action" onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
-              <span className="icon icon-refresh action-icon" onClick={this.handleRestart}></span>
+              <span className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></span>
-              <span className="btn-label">Restart</span>
+              <span className="btn-label restart">Restart</span>
             </div>
-            <div className="action">
+            <div className="action" onMouseEnter={this.handleItemMouseEnterTerminal} onMouseLeave={this.handleItemMouseLeaveTerminal}>
-              <span className="icon icon-window-code-3 action-icon" onClick={this.handleTerminal}></span>
+              <span className="action-icon" onClick={this.handleTerminal}><RetinaImage src="button-terminal.png"/></span>
-              <span className="btn-label">Terminal</span>
+              <span className="btn-label terminal">Terminal</span>
             </div>
           </div>
           <div className="details-subheader-tabs">

src/ContainerHome.react.js

@@ -2,8 +2,25 @@ var $ = require('jquery');
 var React = require('react/addons');
 
 var ContainerHome = React.createClass({
+  handleResize: function () {
+    $('.web-preview').height(window.innerHeight - 240);
+    $('.mini-logs').height(window.innerHeight / 2 - 100);
+    $('.folders').height(window.innerHeight / 2 - 150);
+  },
+  componentDidMount: function() {
+    $('.web-preview').height(window.innerHeight - 240);
+    $('.mini-logs').height(window.innerHeight / 2 - 100);
+    $('.folders').height(window.innerHeight / 2 - 150);
+    window.addEventListener('resize', this.handleResize);
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener('resize', this.handleResize);
+  },
   componentDidUpdate: function () {
     // Scroll logs to bottom
+    $('.web-preview').height(window.innerHeight - 240);
+    $('.mini-logs').height(window.innerHeight / 2 - 100);
+    $('.folders').height(window.innerHeight / 2 - 150);
     var parent = $('.mini-logs');
     if (parent.length) {
       if (parent.scrollTop() >= this._oldHeight) {
@@ -17,18 +34,33 @@ var ContainerHome = React.createClass({
     var preview;
     if (this.props.defaultPort) {
       preview = (
-        <iframe src={this.props.ports[this.props.defaultPort].url}></iframe>
+        <div className="web-preview">
+          <h4>Web Preview</h4>
+          <div className="widget">
+            <iframe src={this.props.ports[this.props.defaultPort].url}></iframe>
+          </div>
+        </div>
       );
     }
     return (
       <div className="details-panel home">
         <div className="content">
-          <h4>Web Preview</h4>
+          <div className="left">
-          <div className="widget web-preview">
             {preview}
           </div>
-          <div className="widget mini-logs">
+          <div className="right">
-            {this.props.logs}
+            <div className="mini-logs">
+              <h4>Logs</h4>
+              <div className="widget">
+                {this.props.logs}
+              </div>
+            </div>
+            <div className="folders">
+              <h4>Edit Files</h4>
+              <div className="widget">
+                <p>Buncha folders</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>

styles/containers.less

@@ -288,12 +288,6 @@
                 .btn-delete {
                   font-size: 24px;
                   color: white;
-                  opacity: 0.8;
-                  transition: all 0.25s;
-                  &:hover {
-                    opacity: 1;
-                    color: white;
-                  }
                 }
                 .state-new {
                   .at2x('container-white.png', 20px, 20px);
@@ -367,10 +361,6 @@
               .btn-delete {
                 font-size: 24px;
                 color: @gray-lighter;
-                transition: all 0.25s;
-                &:hover {
-                  color: @brand-action;
-                }
               }
             }
 
@@ -510,31 +500,30 @@
         .details-header-actions {
           flex: 1 auto;
           text-align: left;
-          margin-top: -5px;
+          margin-top: -12px;
           .action {
             display: inline-block;
             .action-icon {
-              &.icon:before {
-                text-align: center;
-              }
               color: @gray-normal;
               font-size: 30px;
-              margin-right: 30px;
+              margin-right: 20px;
-              transition: all 0.25s;
-              &:hover {
-                color: @brand-action;
-                /*background: linear-gradient(-180deg, darken(#24B8EB, 10%) 4%, darken(#24A3EB, 10%) 100%);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;*/
-              }
             }
             .btn-label {
               position: relative;
-              top: -9px;
+              top: 0px;
               display: block;
               color: @brand-action;
               font-size: 10px;
-              display: none;
+              &.run {
+                left: 8px;
+              }
+              &.restart {
+                left: 1px;
+              }
+              &.terminal {
+                left: -2px;
+              }
+              visibility: hidden;
             }
           }
         }
@@ -543,7 +532,7 @@
           flex: 1 auto;
           text-align: right;
           margin-right: 3px;
-          margin-top: 6px;
+          margin-top: 3px;
           .tab {
             margin-left: 16px;
             padding: 6px 10px;
@@ -635,27 +624,58 @@
         background-color: #FFF;
         &.home {
           background-color: #F9F9F9;
-          flex: 1;
+          .content {
-          .widget {
+            display: flex;
-            border-radius: 4px;
+            flex: 1 auto;
-            border: 1px solid @gray-lightest;
+            flex-direction: row;
-            &.web-preview {
+            padding: 10px 27px;
-              iframe {
+            .left {
-                border: 0;
+              width: 60%;
-                border-radius: 4px;
+              flex-direction: column;
+              .web-preview {
+                margin-right: 30px;
+                .widget {
+                  background-color: white;
+                  width: 100%;
+                  height: 100%;
+                  border-radius: 4px;
+                  border: 1px solid @gray-lightest;
+                  iframe {
+                    border: 0;
+                    border-radius: 4px;
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
               }
             }
-            &.mini-logs {
+            .right {
-              background-color: @gray-darkest;
+              width: 40%;
-              color: @gray-lightest;
+              flex-direction: column;
-              padding: 10px;
+              .mini-logs {
-              width: 300px;
+                margin-bottom: 50px;
-              height: 300px;
+                .widget {
-              overflow: hidden;
+                  border-radius: 4px;
-              font-family: Menlo;
+                  border: 1px solid @gray-lightest;
-              font-size: 8px;
+                  background-color: @gray-darkest;
-              p {
+                  color: @gray-lightest;
-                margin-bottom: 5px;
+                  height: 100%;
+                  padding: 10px;
+                  overflow: scroll;
+                  font-family: Menlo;
+                  font-size: 8px;
+                  white-space: pre-wrap;
+                  p {
+                    margin-bottom: 0px;
+                  }
+                }
+              }
+              .folders {
+                .widget {
+                  background-color: white;
+                  border-radius: 4px;
+                  border: 1px solid @gray-lightest;
+                }
               }
             }
           }
@@ -669,7 +689,7 @@
           color: @gray-lightest;
           white-space: pre-wrap;
           p {
-            margin-bottom: 8px;
+            margin-bottom: 0px;
           }
         }
         .settings {

styles/theme.less

@@ -122,7 +122,7 @@ input[type="text"] {
   background-color: transparent;
   color: @gray-normal;
   border: 1px solid @gray-normal;
-  border-radius: 25px;
+  border-radius: 40px;
   box-shadow: none;
   font-weight: 400;
   text-shadow: none;
@@ -173,6 +173,7 @@ input[type="text"] {
   &.only-icon {
     padding: 6px 7px 6px 7px;
     &.small {
+      width: 22px;
       padding: 2px 5px 3px 5px;
     }
   }