From 7e7b356c8f587e756c01468d1ea27619c3ed3a01 Mon Sep 17 00:00:00 2001
From: Aaron Lindsay <aaron@aclindsay.com>
Date: Sun, 5 Jul 2015 21:39:02 -0400
Subject: [PATCH] Expand main TabPane's to remainder of viewable page

---
 static/stylesheet.css | 30 +++++++++++++++++++++++++++---
 static/ui.js          | 27 ++++++++++++++-------------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/static/stylesheet.css b/static/stylesheet.css
index 88d5767..366c917 100644
--- a/static/stylesheet.css
+++ b/static/stylesheet.css
@@ -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;
diff --git a/static/ui.js b/static/ui.js
index 15b2820..595c2cf 100644
--- a/static/ui.js
+++ b/static/ui.js
@@ -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>
 		);