diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js
index 6b63bab4b3..35656de7dc 100644
--- a/src/components/ContainerHome.react.js
+++ b/src/components/ContainerHome.react.js
@@ -27,7 +27,7 @@ var ContainerHome = React.createClass({
},
handleResize: function () {
- $('.left .wrapper').height(window.innerHeight - 240);
+ $('.left .wrapper').height(window.innerHeight - 105);
$('.right .wrapper').height(window.innerHeight / 2 - 100);
},
@@ -93,10 +93,10 @@ var ContainerHome = React.createClass({
diff --git a/src/components/ContainerHomeFolders.react.js b/src/components/ContainerHomeFolders.react.js
index 4f769ce766..0d7206f214 100644
--- a/src/components/ContainerHomeFolders.react.js
+++ b/src/components/ContainerHomeFolders.react.js
@@ -64,7 +64,7 @@ var ContainerHomeFolder = React.createClass({
}
var folders = _.map(this.props.container.Volumes, (val, key) => {
- var firstFolder = key.split(path.sep)[1];
+ var firstFolder = key;
return (
@@ -76,9 +76,13 @@ var ContainerHomeFolder = React.createClass({
if (this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running) {
return (
-
Edit Files
- {folders}
+
+
+ {folders}
+
Change Folders
diff --git a/src/components/ContainerHomeLogs.react.js b/src/components/ContainerHomeLogs.react.js
index d31a4df92e..5f088df827 100644
--- a/src/components/ContainerHomeLogs.react.js
+++ b/src/components/ContainerHomeLogs.react.js
@@ -69,14 +69,22 @@ module.exports = React.createClass({
if (logs.length === 0) {
logs = "No logs for this container.";
}
+ var tempDisp = (
+
+ );
return (
);
}
diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js
index 69bba09568..e5c9e6425b 100644
--- a/src/components/ContainerHomePreview.react.js
+++ b/src/components/ContainerHomePreview.react.js
@@ -51,8 +51,10 @@ var ContainerHomePreview = React.createClass({
var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'});
preview = (
-
Web Preview
@@ -73,8 +75,10 @@ var ContainerHomePreview = React.createClass({
preview = (
-
IP & Ports
+
You can access this container using the following IP address and port:
diff --git a/styles/container-home.less b/styles/container-home.less
index e13bc06256..227cc5c096 100644
--- a/styles/container-home.less
+++ b/styles/container-home.less
@@ -5,11 +5,11 @@
display: flex;
flex: 1 auto;
flex-direction: row;
- padding: 10px 27px;
+ padding: 1rem;
.left {
width: 60%;
flex-direction: column;
- margin-right: 30px;
+ margin-right: 1rem;
}
.right {
width: 40%;
@@ -29,8 +29,9 @@
.widget {
.widget-style();
background-color: white;
+ padding: 0.5rem;
width: 100%;
- height: 95%;
+ height: 100%;
p {
font-size: 13px;
color: @gray-normal;
@@ -94,7 +95,7 @@
left: -100%;
top: -100%;
height: 400%;
- width: 401%;
+ width: 400%;
transform: scale(0.5);
}
.frame-overlay {
@@ -125,24 +126,30 @@
}
}
.mini-logs {
- margin-bottom: 50px;
.widget {
.widget-style();
- background-color: @gray-darkest;
- color: @gray-lightest;
+ .top-bar {
+ .widget-bar-style();
+ background-color: darken(@gray-darkest, 3%);
+ border-bottom: 1px solid rgba(255,255,255,0.1);
+ color: white;
+ }
height: 100%;
- padding: 10px;
- font-family: @font-code;
- font-size: 7px;
- white-space: pre;
.logs {
- overflow: hidden;
+ background-color: @gray-darkest;
+ color: @gray-lightest;
+ font-family: @font-code;
+ font-size: 9px;
+ white-space: pre-wrap;
+ -webkit-user-select: text;
+ padding: 1.2rem;
+ overflow: auto;
height: 100%;
}
p {
margin-bottom: 0px;
}
- .mini-logs-overlay {
+ /*.mini-logs-overlay {
position: absolute;
top: 0;
left: 0;
@@ -167,29 +174,37 @@
background-color: @gray-darkest;
opacity: 0.75;
}
- }
+ }*/
}
}
.folders {
.widget {
.widget-style();
- padding: 10px 5px;
background-color: white;
- display: flex;
- .folder {
- width: 110px;
- padding: 5px;
- &:hover {
- background-color: darken(@color-background, 2%);
- border-radius: 10px;
- }
- img {
- display: block;
- margin: 0 auto;
- }
- .text {
- margin-top: 4px;
- text-align: center;
+ .top-bar {
+ .widget-bar-style();
+ }
+ .folders-list {
+ .folder {
+ display: flex;
+ padding: 1rem;
+ border-bottom: 1px solid @color-divider;
+ &:hover {
+ background-color: @color-box-button;
+ }
+ img {
+ width: 32px;
+ min-width: 32px;
+ height: 25px;
+ }
+ .text {
+ margin-top: 0.3rem;
+ margin-left: 1rem;
+ width: 180px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
}
}
}
diff --git a/styles/mixins.less b/styles/mixins.less
index 5ccf6772c8..c076054771 100644
--- a/styles/mixins.less
+++ b/styles/mixins.less
@@ -23,12 +23,23 @@
}
.widget-style() {
- border-radius: 4px;
- border: 1px solid @gray-lighter;
+ border-radius: @border-radius;
+ border: 1px solid @color-divider;
position: relative;
overflow: hidden;
}
+.widget-bar-style() {
+ height: 40px;
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 500;
+ padding: 1.1rem;
+ background-color: white;
+ color: @gray-light;
+ border-bottom: 1px solid @color-divider;
+}
+
.fade-in() {
opacity: 0;
-webkit-animation: fadein ease-in 1;
diff --git a/styles/new-container.less b/styles/new-container.less
index 01a3f2b70b..95efb3246a 100644
--- a/styles/new-container.less
+++ b/styles/new-container.less
@@ -141,7 +141,8 @@
.results-filter-title {
color: @gray-lighter;
font-weight: 500;
- padding-top: 0.7rem;
+ position: relative;
+ top: 1px;
margin-right: 0.7rem;
}
}
diff --git a/styles/right-panel.less b/styles/right-panel.less
index fd8d8d2749..04a2cb928e 100644
--- a/styles/right-panel.less
+++ b/styles/right-panel.less
@@ -111,7 +111,7 @@
color: @gray-light;
border-bottom: 3px solid transparent;
text-align: center;
- min-width: 28px;
+ min-width: 20px;
padding-bottom: 0.2rem;
&.active {
color: @gray-darkest;
@@ -121,7 +121,6 @@
opacity: 0.5;
&:hover {
color: @gray-light;
- border-bottom: 3px solid transparent;
}
}
&:hover {