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

View File

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

View File

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