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} -
+ + + + + + + + + {ports} + +
DOCKER PORTMAC PORT
); 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

- +
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 PORT
+
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 {
DOCKER FOLDER