aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-12-26 15:42:27 -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 { div#content {
display: block;
width: 95%; width: 95%;
height: 100%; height: 100%;
min-width: 75em; min-width: 75em;
max-width: 100em; max-width: 100em;
display: block; margin: auto;
margin-left: auto;
margin-right: 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 { div.accounttree-root-nochildren {
position: relative; position: relative;
left: 24px; left: 24px;

27
static/ui.js
View File

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