Feature/committee dates noah

__init__.py

@@ -135,6 +135,17 @@ def date_filter_sm(date_str):
         return ''
     return parse_date(date_str).strftime('%m/%y')
 
+@app.template_filter('date_md')
+def date_filter_md(date_str):
+    if not date_str:
+        return ''
+    return parse_date(date_str).strftime('%b %Y')
+
+@app.template_filter('last_n_characters')
+def last_n_characters(value, nchar=3):
+    if type(value) == int:
+        return value % (10 ** nchar)
+    return ''    
 
 @app.template_filter()
 def fmt_year_range(year):

openfecwebapp/tests/test_utils.py

@@ -16,11 +16,18 @@ def test_currency_filter_none():
 def test_date_filter_iso():
     date = datetime.datetime.now()
     assert app.date_filter_sm(date.isoformat()) == date.strftime('%m/%y')
+    assert app.date_filter_md(date.isoformat()) == date.strftime('%b %Y')
 
 
 def test_date_filter_empty():
     assert app.date_filter_sm('') == ''
     assert app.date_filter_sm(None) == ''
+    assert app.date_filter_md(None) == ''
+
+
+def test_last_n_characters():
+    value = 123456789
+    assert app.last_n_characters(value) == 789
 
 
 def test_fmt_year_range_int():

static/js/init.js

@@ -111,7 +111,7 @@ $(document).ready(function() {
 
     // Initialize accordions
     $(SLT_ACCORDION).each(function() {
-      accordion.init($(this));
+      Object.create(accordion).init($(this));
     });
 
 });

static/styles/_base/_tables.scss

@@ -275,6 +275,14 @@ table {
   }
 }
 
+.meta-box {
+  .table--simple {
+    .table__row--nested {
+      background: darken($meta-box-color, 2%);
+    }
+  }
+}
+
 /* All the fancy responsive styles are handled in 
 * /static/styles/responsive-tables.css
 * This is just further customization

static/styles/_base/_utilities.scss

@@ -37,4 +37,4 @@
 
 .u-not-responsive {
   max-width: auto;
-}
+}

static/styles/_components/_charts.scss

@@ -1,11 +1,25 @@
 // the amount of padding at the bottom of vertical bar charts
 $chart-bottom: 30px;
 // the width of the axis for vertical bar charts
-$chart-axis-width: 100px;
+$chart-axis-width: 120px;
 
 $tooltip-arrow-size: 8px;
 $tooltip-border-color: #999;
 
+.chart-container {
+  border: 1px solid $light-gray;
+
+  .figure__title {
+    border-bottom: 1px solid $light-gray;
+    background: $lightest-gray;
+    padding: .5rem 1rem;
+  }
+
+  .chart-series {
+    margin: 1rem;
+  }
+}
+
 .chart-series__bar {
   background: #ccc;
 }
@@ -127,6 +141,7 @@ $tooltip-border-color: #999;
 
     @include media($medium) {
       left: $chart-axis-width;
+      right: 20px;
     }
   }
 
@@ -164,12 +179,17 @@ $tooltip-border-color: #999;
 }
 
 .chart-series__group__label {
+  font-size: 1rem;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   padding-top: .25em;
   text-align: center;
+
+  @include media($medium) {
+    font-size: 1.4rem;
+  }
 }
 
 .chart-series__bar__tooltip {

static/styles/_components/_figures.scss

@@ -30,6 +30,7 @@ figure {
 
 .figure-group__bar {
   @include white-links();
+  color: #fff;
   background-color: $licorice-3;
   padding: .3125em;
 }
@@ -86,12 +87,14 @@ figure {
 
   h4 {
     float: left;
+    margin-bottom: 0;
   }
 }
 
 .figure__key {
   float: right;
-
+  margin-top: 2px;
+
   li {
     @include rem(margin-right, 2.0rem);
   }

static/styles/_components/_header.scss

@@ -185,7 +185,7 @@
 }
 
 .section-header {
-  border-bottom: 2px solid $medium-gray;
+  border-bottom: 2px solid $dark-gray;
 }
 
 #glossary-toggle {

static/styles/_components/_meta-box.scss

@@ -10,4 +10,30 @@
 
 .meta-box--bottom {
   margin-top: 2em;
+}
+
+.recent-report {
+  padding: 0;
+  position: relative;
+
+  .totals-table .table__row {
+    padding: .5rem 1rem;
+  }
+
+  @include media($medium) {
+    .totals-table .table__row {
+      padding: .5rem 2rem;
+    }
+  }
+}
+
+.meta-box__bar {
+  @include white-links();
+  color: #fff;
+  background-color: $licorice-3;
+  padding: .5rem 1rem;
+
+  @include media($medium) {
+    padding: 1rem 2rem;
+  }
 }

static/styles/_layout/_layout.scss

@@ -105,6 +105,7 @@ body {
 
   &.page-subsection--noline {
     border-bottom: 0;
+    padding-bottom: 2rem;
   }
 }
 

static/styles/grid-settings.scss

@@ -1,6 +1,8 @@
 $grid-columns: 24;
 
 // Neat Breakpoints
+$grid-columns: 24;
+
 $small-screen: em(500);
 $medium-screen: em(768);
 $large-screen: em(980);

templates/committees-single.html

@@ -52,7 +52,7 @@ <h5 class="entity__term__label">Address</h5>
             </li>
           {% endif %}
         </ul>
-      </div>  
+      </div>
     </header>
     <div class="page-controls page-controls--dark">
       <div class="page-controls__top">
@@ -83,7 +83,7 @@ <h5 class="entity__term__label">Address</h5>
           </ul>
         </div>
       </nav> -->
-    </div>    
+    </div>
 {% macro totals_table_row(pretty_name, value) %}
       {% import 'macros/charts.html' as charts %}
       <div class="table__row table__row--nested js-accordion_item">
@@ -100,7 +100,7 @@ <h5 class="entity__term__label">Address</h5>
     {% macro totals_table_row_header(pretty_name, value, description, accordion=True) %}
       <div class="table__row table__row--header js-accordion_header accordion__header">
         <div class="table__cell">
-          <h4>{{ pretty_name }}</h4>
+          <h5>{{ pretty_name }}</h5>
         </div>
         <div class="table__cell">
           <span>{{ value|default(0)|currency }}</span>
@@ -124,11 +124,6 @@ <h4>{{ pretty_name }}</h4>
           {% for item in data %}
             {{ totals_table_row(item[1], item[0]) }}
           {% endfor %}
-          {% if report_year %}
-            <div class="table__row--note table__row--nested js-accordion_item">
-              Calculated from reports filed {{ report_year }}
-            </div>
-          {% endif %}
         </div>
       </figure>
     {% endmacro %}
@@ -138,8 +133,39 @@ <h4>{{ pretty_name }}</h4>
         {% if totals %}
           <h2 id="section-1-header" tabindex="0">Financial Summary</h2>
           <p class="text--lead">Get the full picture of all of the money received and spent by this committee.</p>
-          <div class="row js-accordion">
-
+          <div class="page-subsection page-subsection--noline">
+            <div class="row js-accordion meta-box recent-report">
+              {% with committee=context() %}
+              <div class="meta-box__bar">
+                <h4>Most Recent Report:
+                  <a href="http://docquery.fec.gov/pdf/{{ committee.reports[0].beginning_image_number|last_n_characters }}/{{ committee.reports[0].beginning_image_number }}/{{ committee.reports[0].beginning_image_number }}.pdf">{{ committee.reports[0].report_year }} {{committee.reports[0].report_type_full|fmt_report_desc}}</a>
+                </h4>
+               <span>Report coverage: {{ committee.reports.0.coverage_start_date|date_md }} - {{ committee.reports.0.coverage_end_date|date_md }} | <a href="http://docquery.fec.gov/pdf/{{ committee.reports[0].beginning_image_number|last_n_characters }}/{{ committee.reports[0].beginning_image_number }}/{{ committee.reports[0].beginning_image_number }}.pdf">View PDF &raquo;</a></span>
+              </div>
+               {% set table_data = [
+                   (committee.reports.0.individual_itemized_contributions_period, 'Itemized Individual Contributions'),
+                   (committee.reports.0.individual_unitemized_contributions_period, 'Unitemized Individual Contributions'),
+                   (committee.reports.0.transfers_to_affiliated_committee_period, 'Transfer from authorized committees'),
+                   (committee.reports.0.all_loans_received_period, 'Loans'),
+                 ]
+              %}
+              {{ totals_table('Total Receipts', committee.reports.0.total_receipts_period, table_data,
+                  committee.report_year, header_description='' ) }}
+              {% set table_data = [
+                   (committee.reports.0.total_operating_expenditures_period, 'Operating expenditures'),
+                   (committee.reports.0.transfers_to_affiliated_committee_period, 'Transfers to affiliated committees'),
+                   (committee.reports.0.loan_repayments_made_period, 'Total loan repayments'),
+                   (committee.reports.0.total_contribution_refunds_period, 'Contribution refunds'),
+                   (committee.reports.0.other_disbursements_period, 'Other disbursements'),
+                 ]
+              %}
+              {{ totals_table('Total Disbursements', committee.reports[0].total_disbursements_period, table_data,
+                  committee.report_year, header_description='' ) }}
+              {{ totals_table('Beginning cash on hand', reports.0.cash_on_hand_beginning_period) }}
+              {{ totals_table('End cash on hand', reports.0.cash_on_hand_end_period) }}
+              {{ totals_table('Debts owed to committee', reports.0.debts_owed_to_committee) }}
+              {{ totals_table('Debts owed by committee', reports.0.debts_owed_by_committee) }}
+            </div>
             <h3 class="section-header">Detailed Summary</h3>
             <!-- TODO: 'Transfer from a Committee' needs to reference a field available for all committee types (PacOrParty does not have it) -->
             {% set table_data = [
@@ -166,17 +192,13 @@ <h3 class="section-header">Detailed Summary</h3>
             %}
             {{ totals_table('Total Disbursments', totals.0.disbursements, table_data,
                 report_year, header_description='Money spent by the committee' ) }}
-            {{ totals_table('Beginning cash on hand', reports.0.cash_on_hand_beginning_period) }}
-            {{ totals_table('End cash on hand', reports.0.cash_on_hand_end_period) }}
-            {{ totals_table('Debts owed to committee', reports.0.debts_owed_to_committee) }}
-            {{ totals_table('Debts owed by committee', reports.0.debts_owed_by_committee) }}
           </div>
           <div class="row">
-            {% with committee=context() %}
             {% include 'partials/committee-charts.html' %}
             {% endwith %}
           </div>
         {% else %}
+
         <div class="meta-box error-container">
           <h2 id="section-1-header" tabindex="0">No financial data</h2>
           <p class="text--lead">This committee has not filed any <a class="term" data-term="Reports and Summaries">reports</a> for the time period selected. Right now, OpenFEC provides provides summary information using Forms 3, 3P and 3X. For complete data, search the <a href="http://www.fec.gov/finance/disclosure/candcmte_info.shtml">FEC Candidate and Committee Viewer</a>.</p>