centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-04-13 23:06:15 +07:00
Code Issues Packages Projects Releases Wiki Activity

Minor bug fixes and style tweak.

Browse Source
This commit is contained in:
Sean Li
2015-01-31 21:00:35 -08:00
parent f4d1e1588b
commit bb122b2044
4 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/ContainerDetails.react.js
View File

@@ -505,14 +505,22 @@ var ContainerDetails = React.createClass({
<div className="details">
<div className="details-header">
<h1>{this.props.container.Name}</h1>{state}
<div className="details-header-actions">
<span className="icon icon-preview-2 action-icon view-icon" onClick={this.handleView}></span>
<span className="icon icon-refresh action-icon" onClick={this.handleRestart}></span>
<span className="icon icon-window-code-3 action-icon" onClick={this.handleTerminal}></span>
</div>
</div>
<div className="details-subheader">
<span className="image">{this.props.container.Config.Image}</span>
<div className="details-header-actions">
<div className="action">
<span className="icon icon-play-2 action-icon" onClick={this.handleView}></span>
<span className="btn-label">View</span>
</div>
<div className="action">
<span className="icon icon-refresh action-icon" onClick={this.handleRestart}></span>
<span className="btn-label">Restart</span>
</div>
<div className="action">
<span className="icon icon-window-code-3 action-icon" onClick={this.handleTerminal}></span>
<span className="btn-label">Terminal</span>
</div>
</div>
<div className="details-subheader-tabs">
<span className={tabLogsClasses} onClick={this.showLogs}>Logs</span>
<span className={tabPortsClasses} onClick={this.showPorts}>Ports</span>

2
app/ContainerUtil.js
View File

@@ -17,7 +17,7 @@ var ContainerUtil = {
var ip = docker.host;
console.log(container);
_.each(container.NetworkSettings.Ports, function (value, key) {
var dockerPort = key;
var dockerPort = key.split('/')[0];
var localUrl = null;
var localUrlDisplay = null;
if (value && value.length) {

94
app/styles/containers.less
View File

@@ -307,9 +307,10 @@
display: flex;
flex-direction: row;
position: relative;
border-bottom: 1px solid @gray-lightest;
background-color: white;
height: 32px;
//border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
background-color: #F9F9F9;
height: 57px;
padding: 6px 10px 10px 24px;
font-size: 13px;
color: @gray-normal;
@@ -321,24 +322,73 @@
font-size: 13px;
color: @gray-normal;
//font-weight: 300;
img {
width: 30px;
height: 18px;
position: relative;
top: -2px;
margin-right: 10px;
}
}
.details-header-actions {
flex: 1 auto;
text-align: left;
margin-top: -10px;
.action {
display: inline-block;
.action-icon {
&.icon:before {
text-align: center;
}
/*background: linear-gradient(-180deg, #24B8EB 4%, #24A3EB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
color: @gray-normal;
font-size: 32px;
margin-right: 35px;
//color: @gray-darker;
transition: all 0.25s;
&:hover {
color: @brand-action;
/*background: linear-gradient(-180deg, darken(#24B8EB, 10%) 4%, darken(#24A3EB, 10%) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
}
&.view-icon {
position: relative;
top: 1px;
font-size: 35px;
//color: @gray-darkest;
}
}
.btn-label {
position: relative;
top: -9px;
display: block;
color: @brand-action;
font-size: 10px;
display: none;
}
}
}
.details-subheader-tabs {
flex: 1 auto;
text-align: right;
margin-right: 0px;
margin-right: 3px;
.tab {
margin-left: 20px;
margin-left: 16px;
padding: 3px 10px;
transition: all 0.25s;
font-weight: 500;
font-weight: 400;
&:hover {
color: @brand-action;
}
&.active {
background-color: lighten(@brand-action, 38%);
background-color: #D2EEF8;
border-radius: 4px;
color: darken(@brand-action, 25%);
color: #365B64;
}
}
}
@@ -350,13 +400,12 @@
flex-direction: row;
padding: 31px 24px 18px 24px;
position: relative;
border-bottom: 1px solid #DCE2E2;
background-color: #F9F9f9;
background-color: #F9F9F9;
height: 75px;
h1 {
margin: 0;
font-size: 20px;
font-weight: 300;
font-weight: 400;
margin: 0;
color: @gray-darkest;
}
@@ -377,27 +426,6 @@
}
}
.details-header-actions {
flex: 1 auto;
text-align: right;
margin-top: -6px;
.action-icon {
font-size: 23px;
margin-left: 24px;
color: @gray-darker;
transition: all 0.25s;
&:hover {
color: @brand-action;
}
&.view-icon {
position: relative;
top: 2px;
font-size: 27px;
//color: @gray-darkest;
}
}
}
/*.details-header-actions {
flex: 1;
display: flex;
@@ -431,8 +459,8 @@
.details-panel {
flex: 1;
overflow: auto;
background-color: white;
.logs {
background-color: #FEFEFE;
-webkit-user-select: text;
font-family: Menlo;
font-size: 12px;

2
app/styles/theme.less
View File

@@ -166,7 +166,7 @@ input[type="text"] {
&.only-icon {
padding: 6px 7px 6px 7px;
&.small {
padding: 3px 5px 3px 5px;
padding: 2px 5px 3px 5px;
}
}
}