Added more styling to the dynamic header

NateBarnes · May 1, 2012 · 4010122 · 4010122
1 parent 25e1a51
commit 4010122
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/app/assets/javascripts/custom.js.coffee b/app/assets/javascripts/custom.js.coffee
@@ -42,6 +42,10 @@ window.calculate = ->
   rate = per_of_median * med_rate
   rate = cap if rate > cap
   $("#personal_rate").html(rate.toFixed(4).toString()+"%")
+  if total < current_revenues
+    $("#total_footer").html("The plan must raise <span class='failure'>$"+(current_revenues-total).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+"</span> more to be revenue neutral.")
+  else
+    $("#total_footer").html("You've raised an additional <span class='success'>$"+(total-current_revenues).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+"</span> to pay down the deficit")
   true
 
 window.gatherNums = ->

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -31,14 +31,26 @@ body {
   border-radius: 15px;
 }
 
+.right {
+  text-align: right;
+}
+
+span.total_footer {
+  span {
+    font-size: 22px;
+  }
+}
+
 div.side_header {
   font-size: 17px;
   font-weight: bold;
   margin-bottom: 15px;
 }
 
 #total_revenue {
-  font-size: 32px;
+  padding-left: 20px;
+  font-size: 50px;
+  margin-bottom: 10px;
 }
 
 div.settings {
@@ -72,7 +84,7 @@ div.top {
 }
 
 div.totals {
-  margin-bottom: 20px;
+  margin-bottom: 40px;
 }
 
 table.brackets {

diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
@@ -28,7 +28,13 @@
 </div>
 <div class="results panel round_corners grid_12 omega">
   <div class="totals">
-    <span id="total_revenue" class="failure">$0</span>
+    <div class="total_header">
+      This plan will raise:
+    </div>
+    <div id="total_revenue" class="failure">$0</div>
+    <div class="right">
+      <span id="total_footer" class="total_footer">
+    </div>
   </div>
   <div class="brackets">
     <table class="brackets" border="0">