diff --git a/app/ContainerDetails.react.js b/app/ContainerDetails.react.js
index 3538ae2d6d..7c05bd677e 100644
--- a/app/ContainerDetails.react.js
+++ b/app/ContainerDetails.react.js
@@ -440,6 +440,12 @@ var ContainerDetails = React.createClass({
);
} else {
+ var preview;
+ if (this.state.defaultPort) {
+ preview = (
+
+ );
+ }
body = (
@@ -523,8 +529,6 @@ var ContainerDetails = React.createClass({
Logs
- Ports
- Volumes
Settings
diff --git a/app/styles/containers.less b/app/styles/containers.less
index 630786c902..8c1fc39679 100644
--- a/app/styles/containers.less
+++ b/app/styles/containers.less
@@ -308,7 +308,7 @@
flex-direction: row;
position: relative;
//border-top: 1px solid #EEE;
- border-bottom: 1px solid #EEE;
+ border-bottom: 1px solid #DCE2E2;
background-color: #F9F9F9;
height: 57px;
padding: 6px 10px 10px 24px;
@@ -377,6 +377,7 @@
flex: 1 auto;
text-align: right;
margin-right: 3px;
+ margin-top: 6px;
.tab {
margin-left: 16px;
padding: 3px 10px;
@@ -387,8 +388,10 @@
}
&.active {
background-color: #D2EEF8;
- border-radius: 4px;
+ background-color: @brand-action;
+ border-radius: 40px;
color: #365B64;
+ color: white;
}
}
}
@@ -459,7 +462,7 @@
.details-panel {
flex: 1;
overflow: auto;
- background-color: white;
+ background-color: #FFF;
.logs {
-webkit-user-select: text;
font-family: Menlo;
diff --git a/app/styles/theme.less b/app/styles/theme.less
index eec6747988..6857c86555 100644
--- a/app/styles/theme.less
+++ b/app/styles/theme.less
@@ -184,3 +184,11 @@ 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;
+}