Merge pull request #5443 from fecgov/feature/5215-house-and-senate-ov…

…erview-totals

5215 house and senate overview totals

fec/data/templates/house-senate-overview.jinja

@@ -1,38 +1,67 @@
 {% extends 'layouts/main.jinja' %}
 {% import 'macros/page-header.jinja' as header %}
 
-
 {{ cycle }} Election - US {{ office|title }} {% if state %} - {{ state|fmt_state_full }} {% if district %} - District {{ district }} {% endif %} {% endif %}
 
-{% block title %}{{ cycle }} Election - US {{ office|title }} {% endblock %}
+{% block title %}U.S. {{ office|title }} elections {% endblock %}
 
 {% block css %}
   <link rel="stylesheet" type="text/css" href="{{ asset_for_css('elections.css') }}" />
+  <link rel="stylesheet" type="text/css" href="/static/css/widgets/party-money-bars.css" />
   <link rel="stylesheet" type="text/css" href="/static/css/widgets/house-senate-overview.css" />
 {% endblock %}
+
 {% block body %}
   {{ header.header(title, crumb) }}
-  <div class="u-padding--left u-padding--right tab-interface">
-    <header class="main">
+  <div class="u-padding--left u-padding--right">
+    <header class="container main">
       <div class="heading--section">
-        <h1 class="entity__name">
-          {{ office|title }} elections
-        </h1>
+        <h1>U.S. {{ office|title }} elections</h1>
       </div>
     </header>
-    <div class="data-container__wrapper">
-      {% include 'partials/house-senate-overview/sidebar-nav.jinja' %}
-      {% include 'partials/house-senate-overview/election-data.jinja' %}
-      <div class="main__content--right-full">
 
+    <div id="options" class="container main">
+      <div class="sidebar-container sidebar-container--left">
+        <div class="js-sticky-side" data-sticky-container="options">
+          <nav class="sidebar sidebar--neutral side-nav js-toc">
+            <ul class="sidebar__content">
+              {% if FEATURES.house_senate_overview_summary %} 
+              <li class="side-nav__item">
+                <a class="side-nav__link" href="#summary">Election summary</a>
+              </li>
+              {% endif %}
+              <li class="side-nav__item">
+                <a class="side-nav__link" href="#contributions-over-time">{{ office|title }} candidate contributions over time</a>
+              </li>
+              {% if FEATURES.house_senate_overview_totals %}  
+              <li class="side-nav__item">
+                <a class="side-nav__link" href="#totals">Totals for all {{ office | title }} elections</a></li>
+              </li>
+              {% endif %}
+            </ul>
+            {% if office == "house" %}
+              {% set other_office = "senate"%}
+            {% elif office == "senate" %}
+              {% set other_office = "house"%}
+            {% endif %}
+          <a class="button button--cta u-margin--top t-left-aligned button--disbursements u-full-width" href="/data/elections/{{ other_office }}">Explore U.S. {{ other_office|title }} election data</a>
+          </nav>
+        </div>
+      </div>
+      <div class="main__content--right">
+        {% if FEATURES.house_senate_overview_summary %}{% include 'partials/house-senate-overview/section-summary.jinja' %}{% endif %}
+        {% include 'partials/house-senate-overview/section-contributions-across-time.jinja' %}
+        {% if FEATURES.house_senate_overview_totals %}{% include 'partials/house-senate-overview/section-totals-for-all-elections.jinja' %}{% endif %}
       </div>
     </div>
   </div>
 {% endblock %}
+
 {% block scripts %}
 <script>
 var context = {{ context_vars | to_json | safe }};
 </script>
 <script src="{{ asset_for_js('dataviz-common.js') }}"></script>
-<script src="{{ asset_for_js('elections-overview.js') }}"></script>
+<script src="{{ asset_for_js('house-senate-overview-across-time.js') }}"></script>
+<script src="{{ asset_for_js('house-senate-overview-summary.js') }}"></script>
 {% endblock %}

fec/data/templates/macros/page-header.jinja

@@ -28,6 +28,19 @@
           <span class="breadcrumbs__separator">&rsaquo;</span>
             <span>{{ links }}</span>
         </li>
+    {% elif 'U.S. House elections' in title or 'U.S. Senate elections' in title %}
+        <li class="breadcrumbs__item">
+          <span class="breadcrumbs__separator">&rsaquo;</span>
+          <a href="/data" class="breadcrumbs__link">Campaign finance data</a>
+        </li>
+        <li class="breadcrumbs__item">
+          <span class="breadcrumbs__separator">&rsaquo;</span>
+          <a href="/data/elections" class="breadcrumbs__link">Find candidates and elections</a>
+        </li>
+        <li class="breadcrumbs__item breadcrumbs__item--current">
+          <span class="breadcrumbs__separator">&rsaquo;</span>
+            <span>{{ title }}</span>
+        </li>
     {% else %}
       {% if title != 'Campaign finance data' %}
         <li class="breadcrumbs__item">