docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tweaked look for IP & Port widget.

This commit is contained in:
Sean Li 2015-02-27 12:02:19 -08:00
parent a39cf3733d
commit f9ae54433c
2 changed files with 66 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/ContainerHomePreview.react.js
View File

@ -91,8 +91,9 @@ var ContainerHomePreview = React.createClass({
var key = pair[0];
var val = pair[1];
return (
<div key={key} className="ip-port">
{val.display}
<div key={key} className="table-values">
<span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
<span className="value-right">{val.display}</span>
</div>
);
});
@ -100,8 +101,14 @@ var ContainerHomePreview = React.createClass({
<div className="web-preview wrapper">
<h4>IP &amp; Ports</h4>
<div className="widget">
<p>You can access this container from the outside using the following IP &amp; Port(s):</p>
{ports}
<p>You can access this container using the following IP address and port:</p>
<div className="table ports">
<div className="table-labels">
<div className="label-left">DOCKER PORT</div>
<div className="label-right">MAC PORT</div>
</div>
{ports}
</div>
</div>
</div>
);

60
styles/container-home.less
View File

@ -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;