diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js
index e44461498c..63644bbb11 100644
--- a/src/components/ContainerHomePreview.react.js
+++ b/src/components/ContainerHomePreview.react.js
@@ -66,14 +66,14 @@ var ContainerHomePreview = React.createClass({
);
} else {
- var ports = _.map(_.pairs(this.props.ports), function (pair) {
+ var ports = _.map(_.pairs(this.props.ports), pair => {
var key = pair[0];
var val = pair[1];
return (
-
- {key}
- {val.display}
-
+
+ {key} |
+ {val.display} |
+
);
});
@@ -87,13 +87,17 @@ var ContainerHomePreview = React.createClass({
You can access this container using the following IP address and port:
-
-
-
DOCKER PORT
-
MAC PORT
-
- {ports}
-
+
+
+
+ DOCKER PORT |
+ MAC PORT |
+
+
+
+ {ports}
+
+
);
diff --git a/src/components/ContainerSettingsPorts.react.js b/src/components/ContainerSettingsPorts.react.js
index 370a0ebcde..e81be6ebd6 100644
--- a/src/components/ContainerSettingsPorts.react.js
+++ b/src/components/ContainerSettingsPorts.react.js
@@ -62,7 +62,7 @@ var ContainerSettingsPorts = React.createClass({
Configure Ports
-
+
DOCKER PORT |
diff --git a/src/components/ContainerSettingsVolumes.react.js b/src/components/ContainerSettingsVolumes.react.js
index 3be23ed010..b1b828b686 100644
--- a/src/components/ContainerSettingsVolumes.react.js
+++ b/src/components/ContainerSettingsVolumes.react.js
@@ -72,7 +72,7 @@ var ContainerSettingsVolumes = React.createClass({
Configure Volumes
-
+
DOCKER FOLDER |
diff --git a/styles/container-home.less b/styles/container-home.less
index fcc12c035c..9b1db79789 100644
--- a/styles/container-home.less
+++ b/styles/container-home.less
@@ -37,55 +37,32 @@
padding-bottom: 0px;
}
.table {
- padding-left: 20px;
- padding-right: 20px;
- .icon-arrow-right {
- color: #BBB;
- font-size: 13px;
- margin: 0px 8px;
- position: relative;
- top: 2px;
- flex: 0 auto;
- min-width: 13px;
- }
- &.ports {
- .table-labels {
- margin-top: 20px;
- flex: 1 auto;
- display: flex;
- font-size: 10px;
- color: @gray-light;
- .label-left {
- flex: 0 auto;
- min-width: 60px;
- margin-right: 30px;
- text-align: right;
- }
- .label-right {
- flex: 1 auto;
- display: inline-block;
+ color: @gray-normal;
+ font-size: 12px;
+ margin-left: 0.2rem;
+ max-width: 300px;
+ tr {
+ &:first-child {
+ td {
+ border: none;
}
}
- .table-values {
- flex: 1 auto;
- display: flex;
- flex-direction: row;
- margin: 8px 0;
- font-size: 12px;
- .value-left {
+ td {
+ border-color: @color-divider;
+ &.right {
text-align: right;
- min-width: 70px;
- flex: 0 auto;
- padding: 0px;
- }
- .value-right {
- flex: 1 auto;
- -webkit-user-select: text;
- max-width: 170px;
- padding: 0px;
}
}
}
+ th {
+ font-size: 10px;
+ color: @gray-lighter;
+ font-weight: 500;
+ border: none;
+ &.right {
+ text-align: right;
+ }
+ }
}
.frame {
padding-top: 8rem;
diff --git a/styles/container-settings.less b/styles/container-settings.less
index a579e921f9..190e6799ea 100644
--- a/styles/container-settings.less
+++ b/styles/container-settings.less
@@ -23,6 +23,7 @@
outline: none;
&.active {
li {
+ font-weight: 500;
border-bottom: 2px solid @brand-primary;
color: @gray-darkest;
}
@@ -110,6 +111,12 @@
}
}
.table {
+ &.ports {
+ max-width: 500px;
+ }
+ &.volumes {
+ max-width: 100%;
+ }
color: @gray-normal;
tr {
&:first-child {