Merge pull request #342 from sephcoster/sprint22

Resolved space in MSA bug, updated table highlighting
cfpb · Apr 28, 2015 · 688dc01 · 688dc01
2 parents 5ac20cc + 546ce4a
commit 688dc01
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 27 deletions.
diff --git a/frontend/src/js/table.js b/frontend/src/js/table.js
@@ -18,6 +18,9 @@ $(document).ready(function () {
     $('.chart-toggle').click(function (e) {
         var $target = $(e.target).closest('.chart-toggle'),
             id = $target.attr('id');
+
+        $('.chart-toggle').removeClass('active-layer');
+        $target.addClass('active-layer');
 
         if (currentChart) {
             destroyData();
@@ -34,6 +37,7 @@ $(document).ready(function () {
         } else {
             currentChart = null;
             toggleDataContainer(false);
+            $('.chart-toggle').removeClass('active-layer');
         }        
     });
 
@@ -108,6 +112,7 @@ function createTable(showPeers) {
         $('#closeTable').on('click', function(){
             toggleDataContainer(false);
             currentChart = 'undefined';  
+            $('.chart-toggle').removeClass('active-layer');
         });
         generateTooltips('#table-container', [0,-1]);
     });
@@ -423,7 +428,7 @@ function toggleDataContainer(showData) {
 // Helper function to check Odds class
 function getOddsClass( ratio ){
     var oddsClass = 'odds-normal';
-    if( 0 < ratio && ratio <= .4 ){
+    if( 0 < ratio && ratio <= .4 || ratio === 0 ){
         oddsClass = 'odds-warning';
     } else if ( .4 < ratio && ratio < .8 ){
         oddsClass = 'odds-caution';

diff --git a/frontend/src/less/mapusaurus/header.less b/frontend/src/less/mapusaurus/header.less
@@ -32,6 +32,9 @@
 
 	.site-logo {
 		display: none;
+		img {
+			margin-right: 20px;
+		}
 	}
 }
 

diff --git a/frontend/src/less/mapusaurus/map.less b/frontend/src/less/mapusaurus/map.less
@@ -144,6 +144,11 @@ select {
     background: @green-midtone;
 }
 
+.chart-toggle h6 {
+  text-transform: none;
+  letter-spacing: 0;
+}
+
 #layerOptions .option i {
   color: @gray-50;
 }

diff --git a/frontend/src/less/mapusaurus/table.less b/frontend/src/less/mapusaurus/table.less
@@ -13,6 +13,16 @@
     cursor: pointer;
 }
 
+.chart-toggle:hover{
+    background: @gray-20;
+}
+.chart-toggle.active-layer{
+  background: @green-tint;
+}
+.chart-toggle.active-layer:hover{
+    background: @green-midtone;
+}
+
 #map-aside {
     overflow:scroll;
 }

diff --git a/mapusaurus/basestyle/static/basestyle/css/mapusaurus.css b/mapusaurus/basestyle/static/basestyle/css/mapusaurus.css
diff --git a/mapusaurus/basestyle/static/basestyle/css/mapusaurus.min.css b/mapusaurus/basestyle/static/basestyle/css/mapusaurus.min.css
diff --git a/mapusaurus/basestyle/static/basestyle/css/mapusaurus_sourcemap.css.map b/mapusaurus/basestyle/static/basestyle/css/mapusaurus_sourcemap.css.map
diff --git a/mapusaurus/mapping/static/mapping/js/table.min.js b/mapusaurus/mapping/static/mapping/js/table.min.js
@@ -17,7 +17,7 @@ function createTable(showPeers) {
         var $tbl = buildTable(tableData, showPeers);
         activateTable($tbl), $("#tableLoadImage").hide(), $tbl.appendTo($("#table-container")).show(), 
         $("#closeTable").on("click", function() {
-            toggleDataContainer(!1), currentChart = "undefined";
+            toggleDataContainer(!1), currentChart = "undefined", $(".chart-toggle").removeClass("active-layer");
         }), generateTooltips("#table-container", [ 0, -1 ]);
     });
 }
@@ -117,7 +117,7 @@ function toggleDataContainer(showData) {
 
 function getOddsClass(ratio) {
     var oddsClass = "odds-normal";
-    return oddsClass = ratio > 0 && .4 >= ratio ? "odds-warning" : ratio > .4 && .8 > ratio ? "odds-caution" : "odds-normal";
+    return oddsClass = ratio > 0 && .4 >= ratio || 0 === ratio ? "odds-warning" : ratio > .4 && .8 > ratio ? "odds-caution" : "odds-normal";
 }
 
 var theadTemplate, rowTemplate, tableData, currentChart, msaData;
@@ -126,8 +126,9 @@ $(document).ready(function() {
     _.templateSettings.variable = "data", theadTemplate = _.template($("script.thead-template").html()), 
     rowTemplate = _.template($("script.row-template").html()), $(".chart-toggle").click(function(e) {
         var $target = $(e.target).closest(".chart-toggle"), id = $target.attr("id");
+        $(".chart-toggle").removeClass("active-layer"), $target.addClass("active-layer"), 
         currentChart && destroyData(), currentChart != id ? (createTable("chart-toggle__peer-table" === id), 
         $("#table-container").show(), currentChart = id, toggleDataContainer(!0)) : (currentChart = null, 
-        toggleDataContainer(!1));
+        toggleDataContainer(!1), $(".chart-toggle").removeClass("active-layer"));
     });
 });
diff --git a/mapusaurus/mapping/templates/faq.html b/mapusaurus/mapping/templates/faq.html
@@ -13,20 +13,7 @@
     <div class="faq-home">
     <h3>Frequently Asked Questions / Data Descriptions</h3>
 
-    <table>
-    	<tbody>
-    		<th>
-    			<td></td>
-    			<td></td>
-    			<td></td>
-    		</th>
-    		<tr>
-    			<td></td>
-    			<td></td>
-    			<td></td>
-    		</tr>
-    	</tbody>	
-    </table>
+    {% include 'partial/faq_contents.html' %}
 
     </div>
 

diff --git a/mapusaurus/mapping/templates/map.html b/mapusaurus/mapping/templates/map.html
@@ -131,7 +131,7 @@
 
         // Setup the minimap
         var miniLayer = new L.mapbox.TileLayer('cfpb.k55b27gd', {minZoom: 0, maxZoom: 13 });
-        var miniMap = new L.Control.MiniMap(miniLayer).addTo(map);
+        var miniMap = new L.Control.MiniMap(miniLayer, {'height': 120, 'width': 120, 'toggleDisplay': 'true'}).addTo(map);
 
         // This array allows us to remove them from the map when a new one is selected (later)
         var minorityLayers = [layers.PctMinority, layers.PctHispanic, layers.PctBlack, layers.PctAsian, layers.PctWhite, layers.Plurality, layers.MedianIncome, layers.OwnerOccupancy, layers.MedianValue, layers.MedianYearBuilt];

diff --git a/mapusaurus/mapping/templates/partial/faq_contents.html b/mapusaurus/mapping/templates/partial/faq_contents.html
@@ -0,0 +1 @@
+Contents and Data Descriptions should go here.
diff --git a/mapusaurus/mapping/templates/partial/map_actions.html b/mapusaurus/mapping/templates/partial/map_actions.html
@@ -121,11 +121,11 @@ <h6 class="item-sub">{{ peer.institution.institution_id }} | {{ peer.lar_count}}
     <div id="map-aside__summary-tables" class="map-aside__summary-tables">
         <div class="map-divider"><h6 class="tab-title">Summary Tables</div>
          <div id="chart-toggle__basic-table" class="chart-toggle map-divider lighter">
-            <h6 class="header-name" style="display:inline-block">Basic Summary Data Table</h6>
+            <h6 class="sub-header-name" style="display:inline-block">Basic Summary Data Table</h6>
         </div>
         {% if institution_peers.count > 0 %}
         <div id="chart-toggle__peer-table" class="chart-toggle map-divider lighter">
-            <h6 class="header-name" style="display:inline-block">Peer Summary Data Table</h6>
+            <h6 class="sub-header-name" style="display:inline-block">Peer Summary Data Table</h6>
         </div>
         {% else %}
             <div class="map-divider lighter">

diff --git a/mapusaurus/mapping/templates/partial/summary_table_templates.html b/mapusaurus/mapping/templates/partial/summary_table_templates.html
@@ -1,10 +1,10 @@
-1<!-- Begin: TR Template Definition. -->
+<!-- Begin: TR Template Definition. -->
 <script type="text/template" class="row-template">
     <tr class="<%- data.className %>">
 
       <td class="name" >
-          <% if (!data.isPeer) { console.log('Data Name: ', data.name ); %>
-              <% if (data.name) { %> <% if (data.name == 'MSA' ){ data.name = %> <% {{ metro.name }} %> <% } %><%-data.name%><% } %> <%-data.rowType%> 
+          <% if (!data.isPeer) { %>
+              <% if (data.name) { %><%-data.name%><% } %> <%-data.rowType%> 
           <% } %>
       </td>
 
@@ -45,7 +45,7 @@
           <%-data.odds_hma%>
           </td>    
           <td class="<%-getOddsClass(data.odds_maj) %> odds_ratio maj_ratio hma_ratio">  
-          <%-(data.odds_hma + data.odds_mma )/ 2%>
+          <%-data.odds_maj%>
           </td>        
         <% } else { %>
           <td class="odds_ratio lma_ratio"></td>