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

Polished about page.

This commit is contained in:
Sean Li 2015-07-24 17:18:16 -07:00
parent ee6e2997b4
commit ced2df16f2
2 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/About.react.js
View File

@ -27,35 +27,33 @@ var Preferences = React.createClass({
<div className="preferences">
<div className="about-content">
<a onClick={this.handleGoBackClick}>Go Back</a>
<h2>Installed Software</h2>
<div className="row">
<div className="col-md-6">
<h3>Installed Software</h3>
<div className="items">
<div className="item">
<RetinaImage src="cartoon-kitematic.png"/>
<h3>{packages.name}</h3>
<h4>Docker {packages.name}</h4>
<p>{packages.version}</p>
</div>
<div className="col-md-6">
<div className="item">
<RetinaImage src="cartoon-docker.png"/>
<h3>Docker</h3>
<h4>Docker Engine</h4>
<p>{packages["docker-version"]}</p>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="item">
<RetinaImage src="cartoon-docker-machine.png"/>
<h3>Docker Machine</h3>
<h4>Docker Machine</h4>
<p>{packages["docker-machine-version"]}</p>
</div>
<div className="col-md-6">
<div className="item">
<RetinaImage src="cartoon-docker-compose.png"/>
<h3>Docker Compose</h3>
<h4>Docker Compose</h4>
<p>{packages["docker-compose-version"]}</p>
</div>
</div>
<h2>Third-Party Software</h2>
<div className="row">
<div className="col-md-6 col-md-offset-3">
<h3>VirtualBox</h3>
<h3>Third-Party Software</h3>
<div className="items">
<div className="item">
<h4>VirtualBox</h4>
<p>{packages["virtualbox-version"]}</p>
</div>
</div>

28
styles/preferences.less
View File

@ -39,19 +39,31 @@
}
.about-content {
margin-top: 0px;
h2 {
font-size: 3rem;
text-align: center;
}
.row {
text-align: center;
height: 100%;
overflow: auto;
.items {
display: flex;
.item {
flex: 1 auto;
margin-right: 1rem;
text-align: center;
}
}
h3 {
font-size: 2rem;
color: @gray-normal;
font-weight: 400;
font-size: 18px;
text-align: center;
}
img {
height: 100px;
width: auto;
}
h4 {
margin-bottom: 0.5rem;
}
p {
color: @gray-normal;
color: @gray-light;
font-size: 1.5rem;
}
}