aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-12-25 23:23:21 -05:00
Code Issues Releases Wiki Activity

Expand main TabPane's to remainder of viewable page

Browse Source
This commit is contained in:
Aaron Lindsay 2015-07-05 21:39:02 -04:00
parent 5be612cee8
commit 7e7b356c8f
2 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/stylesheet.css
View File

@ -1,13 +1,37 @@
html, body {
height: 100%;
}
div#content {
display: block;
width: 95%;
height: 100%;
min-width: 75em;
max-width: 100em;
display: block;
margin-left: auto;
margin-right: auto;
margin: auto;
}
/* Keep the main windows sized to the full viewable height */
.fullheight {
height: 100%;
}
.ui {
display: flex;
flex-flow: column;
}
.ui > div:nth-child(1), .ui > div:nth-child(2) > nav {
flex: none;
}
.ui > div:nth-child(2) {
display: flex;
flex: auto;
flex-flow: column;
}
.ui > div:nth-child(2) > div {
flex: auto;
}
/* Style the account tree */
div.accounttree-root-nochildren {
position: relative;
left: 24px;

27
static/ui.js
View File

@ -553,9 +553,10 @@ const MoneyGoApp = React.createClass({
} else {
if (this.state.user.isUser())
mainContent =
<TabbedArea defaultActiveKey='1'>
<TabPane tab="Accounts" eventKey='1'>
<TabbedArea defaultActiveKey='1' className="flex-container">
<TabPane tab="Accounts" eventKey='1' className="fullheight">
<AccountsTab
className="fullheight"
accounts={this.state.accounts}
account_map={this.state.account_map}
securities={this.state.securities}
@ -564,9 +565,9 @@ const MoneyGoApp = React.createClass({
onUpdateAccount={this.handleUpdateAccount}
onDeleteAccount={this.handleDeleteAccount} />
</TabPane>
<TabPane tab="Scheduled Transactions" eventKey='2'>Scheduled transactions go here...</TabPane>
<TabPane tab="Budgets" eventKey='3'>Budgets go here...</TabPane>
<TabPane tab="Reports" eventKey='4'>Reports go here...</TabPane>
<TabPane tab="Scheduled Transactions" eventKey='2' className="fullheight">Scheduled transactions go here...</TabPane>
<TabPane tab="Budgets" eventKey='3' className="fullheight">Budgets go here...</TabPane>
<TabPane tab="Reports" eventKey='4' className="fullheight">Reports go here...</TabPane>
</TabbedArea>
else
mainContent =
@ -579,15 +580,15 @@ const MoneyGoApp = React.createClass({
}
return (
<div>
<div className="fullheight ui">
<TopBar
error={this.state.error}
onErrorClear={this.handleErrorClear}
onLoginSubmit={this.handleLoginSubmit}
onCreateNewUser={this.handleCreateNewUser}
user={this.state.user}
onAccountSettings={this.handleAccountSettings}
onLogoutSubmit={this.handleLogoutSubmit} />
error={this.state.error}
onErrorClear={this.handleErrorClear}
onLoginSubmit={this.handleLoginSubmit}
onCreateNewUser={this.handleCreateNewUser}
user={this.state.user}
onAccountSettings={this.handleAccountSettings}
onLogoutSubmit={this.handleLogoutSubmit} />
{mainContent}
</div>
);