diff --git a/src/ContainerHomePreview.react.js b/src/ContainerHomePreview.react.js
index 37c87b8511..9e0d21a108 100644
--- a/src/ContainerHomePreview.react.js
+++ b/src/ContainerHomePreview.react.js
@@ -91,8 +91,9 @@ var ContainerHomePreview = React.createClass({
var key = pair[0];
var val = pair[1];
return (
-
- {val.display}
+
+ {key}
+ {val.display}
);
});
@@ -100,8 +101,14 @@ var ContainerHomePreview = React.createClass({
IP & Ports
-
You can access this container from the outside using the following IP & Port(s):
- {ports}
+
You can access this container using the following IP address and port:
+
+
+
DOCKER PORT
+
MAC PORT
+
+ {ports}
+
);
diff --git a/styles/container-home.less b/styles/container-home.less
index e7ba147045..54e4e6bc1a 100644
--- a/styles/container-home.less
+++ b/styles/container-home.less
@@ -37,11 +37,61 @@
padding: 10px;
padding-bottom: 0px;
}
- .ip-port {
- padding: 20px;
- padding-top: 5px;
- color: @gray-darkest;
- -webkit-user-select: text;
+ .table {
+ padding-left: 20px;
+ padding-right: 20px;
+ .icon-arrow-right {
+ color: #BBB;
+ font-size: 20px;
+ margin: 0px 10px;
+ flex: 0 auto;
+ min-width: 13px;
+ }
+ &.ports {
+ .table-labels {
+ margin-top: 20px;
+ flex: 1 auto;
+ display: flex;
+ font-size: 12px;
+ color: @gray-lightest;
+ .label-left {
+ flex: 0 auto;
+ min-width: 85px;
+ margin-right: 30px;
+ text-align: right;
+ }
+ .label-right {
+ flex: 1 auto;
+ display: inline-block;
+ margin-left: 10px;
+ width: 40%;
+ }
+ }
+ .table-values {
+ flex: 1 auto;
+ display: flex;
+ flex-direction: row;
+ margin: 8px 0;
+ .value-left {
+ text-align: right;
+ min-width: 85px;
+ flex: 0 auto;
+ padding: 0px;
+ }
+ .value-right {
+ flex: 1 auto;
+ -webkit-user-select: text;
+ max-width: 170px;
+ padding: 0px;
+ }
+ label {
+ margin-left: 8px;
+ margin-top: 1px;
+ font-weight: 400;
+ font-size: 13px;
+ }
+ }
+ }
}
.frame {
border: 0;