Feature/432 search

__init__.py

@@ -5,8 +5,7 @@
 from flask.ext.basicauth import BasicAuth
 from flask_sslify import SSLify
 from dateutil.parser import parse as parse_date
-from openfecwebapp.config import (port, debug, host, api_location, api_version, api_key_public,
-                                  username, password, test, force_https, analytics)
+from openfecwebapp.config import (port, debug, host, api_location, api_version, api_key_public, username, password, test, force_https, analytics)
 from openfecwebapp.views import render_search_results, render_table, render_candidate, render_committee
 from openfecwebapp.api_caller import load_search_results, load_single_type, load_single_type_summary, load_nested_type, install_cache
 
@@ -51,7 +50,6 @@ def _get_default_cycles():
     cycle = current_cycle()
     return list(range(cycle - 4, cycle + 2, 2))
 
-
 app.jinja_env.globals['min'] = min
 app.jinja_env.globals['max'] = max
 app.jinja_env.globals['api_location'] = api_location
@@ -85,10 +83,11 @@ def _convert_to_dict(params):
 def search():
     query = request.args.get('search')
     if query:
-        candidates, committees = load_search_results(query)
-        return render_search_results(candidates, committees, query)
+        result_type = request.args.get('search_type') or 'candidates'
+        results = load_search_results(query, result_type)
+        return render_search_results(results, query, result_type)
     else:
-        return render_template('search.html')
+        return render_template('search.html', page='home')
 
 
 @app.route('/candidate/<c_id>')

openfecwebapp/api_caller.py

@@ -23,17 +23,18 @@ def _call_api(*path_parts, **filters):
         return {}
 
 
-def load_search_results(query):
-    filters = {'per_page': '5'}
+def load_search_results(query, query_type='candidates'):
+    filters = {}
 
     if query:
         filters['q'] = query
 
-    return (
-        load_single_type_summary('candidates', **filters).get('results', []),
-        load_single_type_summary('committees', **filters).get('results', [])
-    )
+    url = '/' + query_type
+    if query_type == 'candidates':
+      url += '/search'
+    results = _call_api(url, **filters)
 
+    return results['results'] if len(results) else []
 
 def load_single_type_summary(data_type, *path, **filters):
     url = '/' + data_type

openfecwebapp/views.py

@@ -4,12 +4,15 @@
 from werkzeug.exceptions import abort
 
 
-def render_search_results(candidates, committees, query):
+def render_search_results(results, query, result_type):
     # if true will show "no results" message
-    no_results = not len(candidates) and not len(committees)
+    no_results = not len(results)
 
-    return render_template('search-results.html', candidates=candidates,
-                           committees=committees, query=query, no_results=no_results)
+    return render_template('search-results.html', 
+            results=results,
+            result_type=result_type,
+            query=query,
+            no_results=no_results)
 
 
 # loads browse tabular views

static/js/init.js

@@ -16,6 +16,7 @@ var filters = require('./modules/filters.js');
 var typeahead = require('./modules/typeahead.js');
 var charts = require('./modules/charts.js');
 var glossary = require('./modules/glossary.js');
+var Search = require('./modules/search');
 
 filters.init();
 typeahead.init();
@@ -114,4 +115,8 @@ $(document).ready(function() {
       Object.create(accordion).init($(this));
     });
 
+    var $search = $('.js-search');
+    $search.each(function() {
+      Search($(this));
+    });
 });

static/js/modules/search.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var $ = require('jquery');
+
+var defaultOpts = {
+  placeHolderOptions: {
+    'candidates': 'Enter a candidate name',
+    'committees': 'Enter a committee name'}
+};
+
+function onSelectChange($input, updatedText) {
+  $input.attr('placeholder', updatedText);
+};
+
+var Search = function($el, opts) {
+  var $select = $el.find('select'),
+      $input = $el.find('input'),
+      settings = $.extend( {}, defaultOpts, opts);
+
+  if (settings.placeHolderOptions) {
+    $select.on('change', function(ev) {
+      ev.preventDefault();
+      var value = $(this).val();
+      onSelectChange($input, settings.placeHolderOptions[value])
+    });
+  }
+
+}
+
+module.exports = Search;

static/js/modules/typeahead.js

@@ -182,7 +182,7 @@ module.exports = {
     });
 
     $('.twitter-typeahead').css({
-        display: 'block',
+        display: 'flex',
     });
 
   }

static/styles/_base/_colors.scss

@@ -19,6 +19,7 @@
 
 .color-activity {
   background-color: $green;
+  color: #fff;
 
   &:hover {
     background-color: $green-2;

static/styles/_base/_forms.scss

@@ -121,42 +121,27 @@ select[multiple] {
   background-image: none;
 }
 
-// Custom form elements
 .input-button-combo {
-  @include clearfix();
+  @include display(flex);
+  @include justify-content(center);
+  height: 4rem;
 
-  #{$all-text-inputs} {
-    border-radius: $base-border-radius;
-    width: 100%;
-    margin: 0 0 .5rem 0;
+  input,
+  button,
+  select {
+    height: auto;
+    font-size: 1em;
   }
 
-  input[type="submit"],
-  button,
-  .button {
-    border-radius: $base-border-radius;
-    width: 100%;
+  input {
+    @include flex(1);
     margin: 0;
+    border-left: none;
+    border-right: none;
   }
 
-  @include media($medium) {
-   #{$all-text-inputs} {
-      height: 4rem;
-      width: 75%;
-      float: left;
-      margin: 0;
-      border-radius: $base-border-radius 0 0 $base-border-radius;
-      border-right: none;
-    }
-
-    input[type="submit"],
-    button,
-    .button {
-      height: 4rem;
-      width: 25%;
-      float: left;
-      border-radius: 0 $base-border-radius $base-border-radius 0;
-    }    
+  button {
+    padding: 0 1rem;
   }
 }
 

static/styles/_base/_typography.scss

@@ -144,6 +144,10 @@ hr {
   margin: $base-line-height 0;
 }
 
+hr + p {
+  margin-top: 1rem;
+}
+
 img {
   margin: 0;
   max-width: 100%;
@@ -198,6 +202,7 @@ cite {
 }
 
 .text--note {
+  @include font-size(1.4);
   font-style: italic;
 }
 
@@ -218,6 +223,10 @@ cite {
   }
 }
 
+.text--medium {
+  @include font-size(1.2);
+}
+
 // Data styles
 // When we're presenting data but not using semantic headers
 .data {

static/styles/_base/_utilities.scss

@@ -24,6 +24,10 @@
   display: block;
 }
 
+.u-no-margin {
+  margin-bottom: 0;
+}
+
 [aria-hidden="true"],
 .u-hidden {
   display: none;

static/styles/_components/_box.scss

@@ -0,0 +1,45 @@
+
+// A sectioned off and bordered box with portions.
+.box {
+  @include clearfix();
+  @include rem(margin-bottom, 2.0rem);
+  clear: both;
+}
+
+.box__portion {
+  border: 1px solid $light-gray;
+  border-top: none;
+  padding: 1rem 1.5rem;
+}
+
+.box__portion--dark {
+  background-color: $lightest-gray;
+}
+
+.box__header {
+  line-height: 1.6rem;
+  padding: .5rem 2rem;
+  background: $licorice-3;
+  color: #fff;
+}
+
+.box__right {
+  float: right;
+  margin-right: -2rem;
+  padding: 0 1.5rem;
+}
+
+.box__title {
+  margin: 0;
+}
+
+h3.box__title {
+  margin: 0;
+}
+
+.meta-box {
+  .box__portion {
+    border: none;
+    padding: 0;
+  }
+}

static/styles/_components/_components.scss

@@ -1,5 +1,6 @@
 @import "accordion";
 @import "alerts";
+@import "box";
 @import "disclosure-box";
 @import "filters";
 @import "side-panel";

static/styles/_components/_entity.scss

@@ -67,10 +67,29 @@
     display: table-cell;
     width: auto;
     margin-bottom: 0;
-    max-width: 200px;
   }
 }
 
+.entity__header {
+  @include media($medium) {
+    .entity__term {
+      max-width: 200px;
+    }
+  }
+}
+
+.entity__term--aligned {
+  @include media($medium) {
+    vertical-align: top;
+  }
+}
+
+.entity__term--icon {
+  min-width: 3rem;
+  width: 3rem;
+  text-align: center;
+}
+
 .entity__term__label {
   color: #fff;
   font-weight: bold;
@@ -92,6 +111,38 @@
   }
 }
 
+.entity__info--search {
+  @include clearfix();
+
+  .entity__term {
+    width: 100%;
+    vertical-align: top;
+    float: left;
+    margin-bottom: 0;
+  }
+
+  .entity__term__data {
+    padding-left: 0;
+  }
+
+  .entity__term--icon {
+    display: none;
+  }
+
+  .entity__type {
+    float: none;
+    padding: 0;
+  }
+
+  @include media($medium) {
+    .entity__term,
+    .entity__term--icon {
+      width: auto;
+      display: block;
+    }
+  }
+}
+
 .time-period {
   width: 100%;
   float: left;

static/styles/_components/_figures.scss

@@ -38,11 +38,15 @@ figure {
 .figure-group__header {
   @include clearfix();
   padding: 1rem;
-  border-bottom: 1px solid $light-gray;
+  border: 1px solid $light-gray;
 
   @include media($medium) {
     padding: 2rem;
   }
+
+  & + .figure-group__block {
+    border-top: 0;
+  }
 }
 
 .figure-group__title {