Put company/investors list in small pane

Author: Nicholas Thomson

app/scripts/controllers/crunchinator.js

@@ -102,6 +102,8 @@ angular.module('crunchinatorApp.controllers')
         $scope.filteredInvestors();
         $scope.clearLookingFor();
 
+        $scope.updateLookingFor();
+
         $scope.selectedCompanies = _.intersection($scope.selectedCompanies, $scope.filteredCompaniesList);
         $scope.selectedCategories = _.intersection($scope.selectedCategories, $scope.filteredCategoriesList);
         $scope.selectedInvestors = _.intersection($scope.selectedInvestors, $scope.filteredInvestorsList);
@@ -145,6 +147,7 @@ angular.module('crunchinatorApp.controllers')
 
     $scope.clearLookingFor = function() {
         $scope.lookingForList = [];
+        $scope.updateLookingFor();
     };
 
     $scope.$watch('lookingFor', function(){

app/views/main.tpl.html

@@ -16,18 +16,10 @@ <h4 class="pull-left">Environment: {{environment}}</h4>
     </div>
     <div class="row">
 
-        <div class='col-sm-6 spacing-med'>
+        <div class='col-sm-4 spacing-med'>
             <h3 class="pull-left">Categories</h3>
             <p class="pull-right count">Count: {{filteredCategoriesList.length}}</p>
             <div id="categories" class="textlist clear-both">
-                <div class="form-group">
-                    <div class="controls">
-                        <div class="input-group">
-                            <span class="input-group-addon"><i class="glyphicon glyphicon-tags"></i></span>
-                            <input ng-model="searchCategories" placeholder="Find Categories" type="text" class="form-control">
-                        </div>
-                    </div>
-                </div>
                 <div class="dataset">
                     <table class="table">
                       <tbody><tr ng-class="{success: selectedCategories.indexOf(category) &gt; -1}" ng-repeat="category in filteredCategoriesList">
@@ -38,11 +30,40 @@ <h3 class="pull-left">Categories</h3>
             </div>
         </div>
 
-        <div ng-show='lookingFor == "companies"' class='col-sm-6 spacing-med'>
+        <div class='col-sm-4 spacing-med'>
+            <div ng-show='!!lookingFor'>
+                <h3 class='pull-left'>
+                    <span ng-if='lookingFor == "companies"'>Companies</span>
+                    <span ng-if='lookingFor == "investors"'>Investors</span>
+                </h3>
+                <p class="pull-right count">
+                    <span ng-show='lookingFor == "companies"'>
+                        {{filteredCompaniesList.length}} of {{all_companies.length}}
+                    </span>
+                    <span ng-show='lookingFor == "investors"'>
+                        {{filteredInvestorsList.length}} of {{all_investors.length}}
+                    </span>
+                </p>
+                <div class='textlist clear-both'>
+                    <div class='dataset'>
+                        <table class='table table-striped table-hover' infinite-scroll="updateLookingFor()">
+                            <tbody>
+                                <tr ng-repeat="item in lookingForList">
+                                    <td><a href='#'>{{item.name}}</a></td>
+                                    <td ng-if='lookingFor == "companies"'>{{item.total_funding | currency}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div ng-show='lookingFor == "companies"' class='col-sm-4 spacing-med'>
             <h3 class="pull-left">Investors</h3>
         </div>
 
-        <div ng-show='lookingFor == "investors"' class='col-sm-6 spacing-med'>
+        <div ng-show='lookingFor == "investors"' class='col-sm-4 spacing-med'>
             <h3 class="pull-left">Companies</h3>
         </div>
     </div>
@@ -57,39 +78,5 @@ <h3 class="pull-left">Companies</h3>
         </div>
 
     </div>
-    <div ng-show='!!lookingFor' class='row'>
-        <div class='col-sm-12 spacing-med'>
-            <div class='panel panel-info'>
-                <div class='panel-heading'>
-                    <h3 ng-if='lookingFor == "companies"' class='panel-title pull-left'>Companies</h3>
-                    <h3 ng-if='lookingFor == "investors"' class='panel-title pull-left'>Investors</h3>
-                    <div class='pull-right'>
-                        <span ng-show='lookingFor == "companies"'>
-                            {{filteredCompaniesList.length}} of {{all_companies.length}}
-                        </span>
-                        <span ng-show='lookingFor == "investors"'>
-                            {{filteredInvestorsList.length}} of {{all_investors.length}}
-                        </span>
-                    </div>
-                    <div class='clear-both'></div>
-                </div>
-                
-                <table class='table table-striped table-hover' infinite-scroll="updateLookingFor()">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th ng-if='lookingFor == "companies"'>Total Funding</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="item in lookingForList">
-                            <td><a href='#'>{{item.name}}</a></td>
-                            <td ng-if='lookingFor == "companies"'>{{item.total_funding | currency}}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
 
 </div>