Fixed sizing for homepage grid.

This commit is contained in:
Sean Li 2015-06-08 18:18:50 -07:00
parent 9e74d6200f
commit ea5f7dba8c
5 changed files with 20 additions and 22 deletions

View File

@ -60,12 +60,6 @@ var ContainerDetailsSubheader = React.createClass({
this.context.router.transitionTo('containerHome', {name: this.context.router.getCurrentParams().name}); this.context.router.transitionTo('containerHome', {name: this.context.router.getCurrentParams().name});
} }
}, },
showLogs: function () {
if (!this.disableTab()) {
metrics.track('Viewed Logs');
this.context.router.transitionTo('containerLogs', {name: this.context.router.getCurrentParams().name});
}
},
showSettings: function () { showSettings: function () {
if (!this.disableTab()) { if (!this.disableTab()) {
metrics.track('Viewed Settings'); metrics.track('Viewed Settings');
@ -192,7 +186,6 @@ var ContainerDetailsSubheader = React.createClass({
</div> </div>
<div className="details-subheader-tabs"> <div className="details-subheader-tabs">
<span className={tabHomeClasses} onClick={this.showHome}>Home</span> <span className={tabHomeClasses} onClick={this.showHome}>Home</span>
<span className={tabLogsClasses} onClick={this.showLogs}>Logs</span>
<span className={tabSettingsClasses} onClick={this.showSettings}>Settings</span> <span className={tabSettingsClasses} onClick={this.showSettings}>Settings</span>
</div> </div>
</div> </div>

View File

@ -27,8 +27,9 @@ var ContainerHome = React.createClass({
}, },
handleResize: function () { handleResize: function () {
$('.full .wrapper').height(window.innerHeight - 105);
$('.left .wrapper').height(window.innerHeight - 105); $('.left .wrapper').height(window.innerHeight - 105);
$('.right .wrapper').height(window.innerHeight / 2 - 100); $('.right .wrapper').height(window.innerHeight / 2 - 55);
}, },
handleErrorClick: function () { handleErrorClick: function () {
@ -36,14 +37,10 @@ var ContainerHome = React.createClass({
}, },
showWeb: function () { showWeb: function () {
console.log(_.keys(this.props.ports));
return _.keys(this.props.ports).length > 0; return _.keys(this.props.ports).length > 0;
}, },
showFolders: function () { showFolders: function () {
console.log('SUPETEST');
console.log(this.props.container.Volumes);
console.log(_.keys(this.props.container.Volumes).length);
return this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running; return this.props.container.Volumes && _.keys(this.props.container.Volumes).length > 0 && this.props.container.State.Running;
}, },
@ -119,9 +116,11 @@ var ContainerHome = React.createClass({
body = ( body = (
<div className="details-panel home"> <div className="details-panel home">
<div className="content"> <div className="content">
<div className="full">
{logWidget} {logWidget}
</div> </div>
</div> </div>
</div>
); );
} else { } else {
body = ( body = (

View File

@ -7,14 +7,19 @@
flex-direction: row; flex-direction: row;
padding: 1rem; padding: 1rem;
.left { .left {
width: 60%; width: 100%;
flex-direction: column; flex-direction: column;
margin-right: 1rem; margin-right: 1rem;
} }
.right { .right {
width: 40%; width: 40%;
min-width: 200px;
max-width: 600px;
flex-direction: column; flex-direction: column;
} }
.full {
width: 100%;
}
.web-preview { .web-preview {
margin-bottom: 1rem; margin-bottom: 1rem;
.widget { .widget {

View File

@ -139,10 +139,9 @@
.results-filters { .results-filters {
margin: 1.2rem 1.2rem 0 0; margin: 1.2rem 1.2rem 0 0;
.results-filter-title { .results-filter-title {
font-size: 12px;
color: @gray-lighter; color: @gray-lighter;
font-weight: 500; font-weight: 500;
position: relative;
top: 1px;
margin-right: 0.7rem; margin-right: 0.7rem;
} }
} }

View File

@ -41,19 +41,21 @@
position: relative; position: relative;
border-bottom: 1px solid @color-divider; border-bottom: 1px solid @color-divider;
background-color: white; background-color: white;
top: -1px;
height: 45px; height: 45px;
font-size: 10px; font-size: 10px;
.details-header-actions { .details-header-actions {
flex: 1 auto; flex: 1 auto;
text-align: left; text-align: left;
position: relative;
.action { .action {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 60px; width: 50px;
height: 44px; height: 44px;
padding-top: 0.2rem; top: 0rem;
.box-button(); .box-button();
border-right: 1px solid @color-divider; //border-right: 1px solid @color-divider;
&.disabled { &.disabled {
background-color: white; background-color: white;
color: fade(@gray-light, 20%); color: fade(@gray-light, 20%);
@ -62,14 +64,14 @@
text-align: center; text-align: center;
height: 44px; height: 44px;
.icon { .icon {
font-size: 24px; font-size: 20px;
margin-left: 0.6rem; margin-left: 0.6rem;
} }
&.stop { &.stop {
position: relative; position: relative;
top: 0.3rem; top: 0.3rem;
.icon { .icon {
font-size: 20px; font-size: 16px;
margin-top: 1rem; margin-top: 1rem;
} }
} }
@ -77,7 +79,7 @@
position: relative; position: relative;
top: 0.3rem; top: 0.3rem;
.icon { .icon {
font-size: 20px; font-size: 16px;
margin-top: 1rem; margin-top: 1rem;
} }
} }