Styling updates. Fixed jumbotron width.

at4260 · Mar 14, 2015 · 508a934 · 508a934
1 parent f8f741c
commit 508a934
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 60 deletions.
diff --git a/database.db b/database.db
diff --git a/static/investments.js b/static/investments.js
@@ -1,18 +1,18 @@
 // CREATES PERFORMANCE TOGGLE
 $("#line_total").click(function() {
-    $("#allocation").hide();
     $("#total_performance").show();
-    $("#all_performance").hide();
+    $("#all_performance").hide();   
+    $("#allocation").hide();
 });
 $("#line_individual").click(function() {
-    $("#allocation").hide();
     $("#total_performance").hide();
     $("#all_performance").show();
+    $("#allocation").hide();
 });
 $("#pie").click(function() {
-    $("#allocation").show();
     $("#total_performance").hide();
     $("#all_performance").hide();
+    $("#allocation").show();
 });
 
 // CREATES PERFORMANCE LINE GRAPHS

diff --git a/static/investments_compare.js b/static/investments_compare.js
@@ -1,18 +1,18 @@
 // CREATES PERFORMANCE TOGGLE
 $("#line_total").click(function() {
-    $("#allocation").hide();
     $("#total_performance").show();
-    $("#all_performance").hide();
+    $("#all_performance").hide();   
+    $("#allocation").hide();
 });
 $("#line_individual").click(function() {
-    $("#allocation").hide();
     $("#total_performance").hide();
     $("#all_performance").show();
+    $("#allocation").hide();
 });
 $("#pie").click(function() {
-    $("#allocation").show();
     $("#total_performance").hide();
     $("#all_performance").hide();
+    $("#allocation").show();
 });
 
 // CREATES PERFORMANCE LINE GRAPHS

diff --git a/static/results.js b/static/results.js
@@ -20,7 +20,7 @@ $(function () {
             plotBackgroundColor: '#eeeeee',
             plotBorderWidth: 0,
             plotShadow: false,
-            spacing: [0, 0, 0, 0]
+            spacing: [-50, -50, -50, -50]
         },
         title: {
             text: 'Checking<br>Account',
@@ -68,7 +68,7 @@ $(function () {
             plotBackgroundColor: '#eeeeee',
         	plotBorderWidth: 0,
         	plotShadow: false,
-        	spacing: [0, 0, 0, 0]
+        	spacing: [-50, -50, -50, -50]
         },
         title: {
             text: 'Savings<br>Account',
@@ -117,7 +117,7 @@ if (max_results["match"] !== 0) {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
 	        },
 	        credits: {
 	            enabled: false
@@ -165,7 +165,7 @@ if (max_results["match"] !== 0) {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
 	        },
 	        credits: {
 	            enabled: false
@@ -218,7 +218,7 @@ $(function () {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
         },
         title: {
             text: 'IRA',
@@ -267,7 +267,7 @@ if (max_results["ret401k"] !== 0) {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
 	        },
 	        title: {
 	            text: '401K<br>Account',
@@ -315,7 +315,7 @@ if (max_results["ret401k"] !== 0) {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
 	        },
 	        title: {
 	            text: '401K<br>Account',
@@ -367,7 +367,7 @@ if (results["investment"] !== 0) {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
 	        },
 	        title: {
 	            text: 'Brokerage<br>Account',
@@ -414,7 +414,7 @@ if (results["investment"] !== 0) {
 	            plotBackgroundColor: '#eeeeee',
             	plotBorderWidth: 0,
             	plotShadow: false,
-            	spacing: [0, 0, 0, 0]
+            	spacing: [-50, -50, -50, -50]
 	        },
 	        title: {
 	            text: 'Brokerage<br>Account',

diff --git a/templates/investments.html b/templates/investments.html
@@ -7,26 +7,31 @@
     <li role="presentation"><a href="/results">Results</a></li>
     <li role="presentation" class="active"><a href="/investments">Investments</a></li>
 </ul>
-
-<h3> Risk tolerance: {{risk_prof}} </h3>
 <br>
 
-<div class="btn-group" role="group" aria-label="...">
-		<button type="button" class="btn btn-default" id="line_total">Total Performance</button>
-		<button type="button" class="btn btn-default" id="line_individual">Individual Breakout</button>
-		<button type="button" class="btn btn-default" id="pie">Portfolio Allocation</button>
-</div>
-
-<div id="total_performance" style="width:50%; height:400px; margin-left: auto; margin-right: auto"> </div>
-	<div id="all_performance" style="width:50%; height:400px; margin-left: auto; margin-right: auto; display: none"> </div>
-<div id="allocation" style="width:100%; height:400px; display: none"></div>
-
-<form action="/investments" method="POST">	
-	<label >Compare: <input type="text" name="compare_ticker" placeholder="Enter ticker here">
-    </label>
-	<button type="submit">Add</button>
-</form>
-<br>
+<div class="container" style="width: 65%">
+	<div class="jumbotron" style="padding: 5px">
+
+		<h5> Risk tolerance: {{risk_prof}} </h5>
+
+		<div class="btn-group" role="group" aria-label="...">
+			<button type="button" class="btn btn-default" id="line_total">Total Performance</button>
+			<button type="button" class="btn btn-default" id="line_individual">Individual Breakout</button>
+			<button type="button" class="btn btn-default" id="pie">Portfolio Allocation</button>
+		</div>
+
+		<div id="total_performance" style="width:90%; height:400px; margin-left: auto; margin-right: auto"> </div>
+		<div id="all_performance" style="width:90%; height:400px; margin-left: auto; margin-right: auto; display: none"> </div>
+		<div id="allocation" style="width:90%; height:400px; margin-left: auto; margin-right: auto; display: none"></div>
+
+		<form action="/investments" method="POST">	
+			<label >Compare: <input type="text" name="compare_ticker" placeholder="Enter ticker here">
+		    </label>
+			<button type="submit">Add</button>
+		</form>
+		<br>	
+	</div>
+</div>				
 
 <script>
 var chart_ticker_data = {{chart_ticker_data|safe}};

diff --git a/templates/investments_compare.html b/templates/investments_compare.html
@@ -7,24 +7,29 @@
     <li role="presentation"><a href="/results">Results</a></li>
     <li role="presentation" class="active"><a href="/investments">Investments</a></li>
 </ul>
-
-<h3> Risk tolerance: {{risk_prof}} </h3>
 <br>
 
-<div class="btn-group" role="group" aria-label="...">
-		<button type="button" class="btn btn-default" id="line_total">Total Performance</button>
-		<button type="button" class="btn btn-default" id="line_individual">Individual Breakout</button>
-		<button type="button" class="btn btn-default" id="pie">Portfolio Allocation</button>
-</div>
+<div class="container" style="width: 65%">
+	<div class="jumbotron" style="padding: 5px">
 
-<div id="total_performance" style="width:50%; height:400px; margin-left: auto; margin-right: auto"> </div>
-	<div id="all_performance" style="width:50%; height:400px; margin-left: auto; margin-right: auto; display: none"> </div>
-<div id="allocation" style="width:100%; height:400px; display: none"></div>
+		<h5> Risk tolerance: {{risk_prof}} </h5>
 
-<form action="/investments">
-	<button type="submit">Clear</button>
-</form>
-<br>
+		<div class="btn-group" role="group" aria-label="...">
+			<button type="button" class="btn btn-default" id="line_total">Total Performance</button>
+			<button type="button" class="btn btn-default" id="line_individual">Individual Breakout</button>
+			<button type="button" class="btn btn-default" id="pie">Portfolio Allocation</button>
+		</div>
+
+		<div id="total_performance" style="width:90%; height:400px; margin-left: auto; margin-right: auto"> </div>
+		<div id="all_performance" style="width:90%; height:400px; margin-left: auto; margin-right: auto; display: none"> </div>
+		<div id="allocation" style="width:90%; height:400px; margin-left: auto; margin-right: auto; display: none"></div>
+
+		<form action="/investments">
+			<button type="submit">Clear</button>
+		</form>
+		<br>	
+	</div>
+</div>	
 
 <script>
 var chart_ticker_data = {{chart_ticker_data|safe}};

diff --git a/templates/profile_inputs.html b/templates/profile_inputs.html
@@ -11,8 +11,8 @@
 <br>
 <br>
 
-<div class="container" style="width: 40%">
-	<div class="jumbotron">
+<div class="container" style="width: 65%">
+	<div class="jumbotron" style="padding-top: 15px; padding-bottom: 15px">
 		<h3> Summary </h3>
 		<table class="table table-hover">
 			<col width="200">

diff --git a/templates/results.html b/templates/results.html
@@ -11,20 +11,19 @@
 <br>
 <br>
 
-<div class="container" style="width: 90%">
-	<div class="jumbotron">
-		<div class="checkingaccount" style="width:500px; height:300px; 
-			display: inline-block"> 
+<div class="container" style="width: 100%">
+	<div class="jumbotron" style="padding: 15px">
+		<div class="checkingaccount" style="width:400px; height:200px; display: inline-block"> 
 		</div>
-		<div class="savingsaccount" style="width:500px; height:300px; display: inline-block">
+		<div class="savingsaccount" style="width:400px; height:200px; display: inline-block">
 		</div> 
-		<div class="matchaccount" style="width:500px; height:300px; display: inline-block"> 
+		<div class="matchaccount" style="width:400px; height:200px; display: inline-block"> 
 		</div> 
-		<div class="iraaccount" style="width:500px; height:300px; display: inline-block"> 
+		<div class="iraaccount" style="width:400px; height:200px; display: inline-block"> 
 		</div> 
-		<div class="ret401kaccount" style="width:500px; height:300px; display: inline-block"> 
+		<div class="ret401kaccount" style="width:400px; height:200px; display: inline-block"> 
 		</div> 
-		<div class="investmentaccount" style="width:500px; height:300px; display: inline-block"> 
+		<div class="investmentaccount" style="width:400px; height:200px; display: inline-block"> 
 		</div>
 	</div>
 </div>