Minor color change and added image tag in container detail.
|
@ -160,11 +160,12 @@ var ContainerDetails = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
var name = this.state.container.Name.replace('/', '');
|
var name = this.state.container.Name.replace('/', '');
|
||||||
|
var image = this.state.container.Config.Image;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="details">
|
<div className="details">
|
||||||
<div className="details-header">
|
<div className="details-header">
|
||||||
<h1>{name}</h1> <a className="btn btn-primary" onClick={this.handleClick}>View</a>
|
<h1>{name}</h1> {state} {image}<a className="btn btn-primary" onClick={this.handleClick}>View</a>
|
||||||
</div>
|
</div>
|
||||||
{progress}
|
{progress}
|
||||||
<div className="details-logs">
|
<div className="details-logs">
|
||||||
|
|
Before Width: | Height: | Size: 536 B After Width: | Height: | Size: 527 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 355 B |
Before Width: | Height: | Size: 654 B After Width: | Height: | Size: 626 B |
|
@ -210,12 +210,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
|
||||||
font-size: 12px;
|
|
||||||
font-variant: small-caps;
|
|
||||||
color: @brand-primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
|
@ -232,7 +226,7 @@
|
||||||
flex: 0 auto;
|
flex: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
padding: 0px 45px 14px;
|
padding: 4px 40px 10px 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
a {
|
a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -240,16 +234,18 @@
|
||||||
top: -4px;
|
top: -4px;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 24px;
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
margin-left: 18px;
|
margin: 6px 0px 0px 16px;
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
font-variant: small-caps;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&.status {
|
&.status {
|
||||||
color: @brand-success;
|
font-weight: bold;
|
||||||
|
color: @brand-positive;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.image {
|
&.image {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@brand-primary: #24B8EB;
|
@brand-primary: #24B8EB;
|
||||||
@brand-action: #49CEF2;
|
@brand-action: #24B8EB;
|
||||||
@brand-positive: #3AD86D;
|
@brand-positive: #65E100;
|
||||||
@brand-negative: #F74B1F;
|
@brand-negative: #F47A45;
|
||||||
|
|