Feature/3514 presidential map 1 #3547
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| {% extends 'layouts/main.jinja' %} | ||
| {# {% import 'macros/cycle-select.jinja' as select %} #} | ||
| {% import 'macros/page-header.jinja' as header %} | ||
|
|
||
| {% block title %}{{ title }}{% endblock %} | ||
|
|
||
| {% block css %} | ||
| <link rel="stylesheet" type="text/css" href="{{ asset_for_css('base.css') }}" /> | ||
| <link rel="stylesheet" type="text/css" href="{{ asset_for_css(page_specific_css) }}" /> | ||
| {% endblock %} | ||
|
|
||
| {% block body %} | ||
| {{ header.header(title) }} | ||
| <section class="main"> | ||
| <div class="container"> | ||
| <header class="heading--main"> | ||
| <h1>Section title?</h1> | ||
| </header> | ||
| </div> | ||
|
|
||
| <div class="container"> | ||
| <div class="content__section--extra"> | ||
| <div class="usa-width-one-whole"> | ||
| {% include './widgets/pres-finance-map.jinja' %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <div class="slab slab--neutral"> | ||
| <div class="container"> | ||
| <h2>You might also like</h2> | ||
| <div class="grid grid--4-wide"> | ||
| <div class="grid__item"> | ||
| <a href="/data/raising-bythenumbers/"> | ||
| <aside class="card card--horizontal card--primary"> | ||
| <div class="card__image__container"> | ||
| <span class="card__icon i-receipt"><span class="u-visually-hidden">Icon of a piggy bank</span></span> | ||
| </div> | ||
| <div class="card__content"> | ||
| Raising by the numberss | ||
| </div> | ||
| </aside> | ||
| </a> | ||
| </div> | ||
| <div class="grid__item"> | ||
| <a href="/data/spending-bythenumbers/"> | ||
| <aside class="card card--horizontal card--primary"> | ||
| <div class="card__image__container"> | ||
| <span class="card__icon i-disbursement"><span class="u-visually-hidden">Icon of representing spending</span></span> | ||
| </div> | ||
| <div class="card__content"> | ||
| Spending by the numbers | ||
| </div> | ||
| </aside> | ||
| </a> | ||
| </div> | ||
| <div class="grid__item"> | ||
| <a href="/data/elections"> | ||
| <aside class="card card--horizontal card--primary"> | ||
| <div class="card__image__container"> | ||
| <span class="card__icon i-elections"><span class="u-visually-hidden">Icon representing elections</span></span> | ||
| </div> | ||
| <div class="card__content"> | ||
| Find elections | ||
| </div> | ||
| </aside> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endblock %} | ||
|
|
||
| {% block scripts %} | ||
| {# Load jQuery from the CDN #} | ||
| <script src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script> | ||
| {# <script> | ||
| var context = { | ||
| election: { | ||
| cycle: '{{ cycle }}', | ||
| state: '{{ state or '' }}' | ||
| } | ||
| }; #} | ||
| </script> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| {% import "macros/widgets.jinja" as widgets %} | ||
|
|
||
| <div id="gov-fec-pres-finance" class="pres-finance-map is-loading w-s" data-election_year="{{ election_year }}"> | ||
| <div class="TODO-SEPARATE-TOP-SECTION"> | ||
| <div id="filter-year" class="filters is-open"> | ||
| <fieldset class="filter toggles js-filter js-table-switcher" style="border: none;"> | ||
| <legend class="label t-inline-block">Candidates running in:</legend> | ||
| <!-- The radio buttons are added here by the code --> | ||
| </fieldset> | ||
| </div> | ||
| <div id="filter-map-type" class="filters is-open"> | ||
| <fieldset class="filter toggles js-filter js-map-switcher" style="border: none;"> | ||
| <legend class="label t-inline-block">View as:</legend> | ||
| <label class="toggle" for="switcher-map-type-bubbles"> | ||
| <input type="radio" class="toggle" value="bubbles" id="switcher-map-type-bubbles" name="map-type-selector" aria-controls="bubbles-message" tabindex="0" checked><span class="button--alt">Bubbles</span> | ||
| </label> | ||
| <label class="toggle" for="switcher-map-type-gradient"> | ||
| <input type="radio" class="toggle" value="gradient" id="switcher-map-type-gradient" name="map-type-selector" aria-controls="gradient-message" tabindex="0"><span class="button--alt">Gradient</span> | ||
| </label> | ||
| </fieldset> | ||
| </div> | ||
| <div class="TODO-buttons-holder"> | ||
| <a class="button--cta button--export js-export-report-summary">Export report summary data</a> | ||
| <button class="button--alt js-methodology">Methodology</button> | ||
| </div> | ||
| </div> | ||
| <div class="candidate-list-wrapper"> | ||
| <div class="table-scroller"> | ||
| <div class="ps-scrollbar-y-rail"><div class="ps-scrollbar-y"></div></div> | ||
| <table id="pres-fin-map-candidates-table" class="data-table data-table--heading-borders data-table--entity u-margin--top" data-type="filings-{{ dataType }}" data-cycle="{{ election_year }}"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Candidate</th> | ||
| <th scope="col" class="t-right-aligned">Total raised</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td colspan="3" style="text-align:center">loading…</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| <div class="map-wrapper"> | ||
| <div id="breadcrumb-wrapper"> | ||
| <nav class="breadcrumb-nav"> | ||
| <a class="js-reset-app" href="" data-stateID="">Nationwide: All candidates</a><span> » </span><span></span> | ||
| </nav> | ||
| </div> | ||
| <div class="map-details"> | ||
| <hgroup class="candidate-details"> | ||
| <h1 class="js-cand-name-par-a">Candidate Name </h1> | ||
| <h2> </h2> | ||
| <h3> </h3> | ||
| </hgroup> | ||
| <div class="legend-container"> | ||
| <span class="t-sans t-block">By state, total amount received</span> | ||
| <svg></svg> | ||
| </div> | ||
| </div> | ||
| <div class="election-map"></div> | ||
| </div> | ||
| <div class="right-column-wrapper"> | ||
| <a class="button--cta button--export js-export-state-data" href="">Export ST raising data</a> | ||
| <ul id="financial-summaries" class="js-accordion" data-content-prefix="first"> | ||
| <li> | ||
| <button class="accordion__button">Summary</button> | ||
| <h5 class="js-cand-name-par-a">NAME, CANDIDATE [PAR]</h5> | ||
| <div class="js-coverage-date">coverage date</div> | ||
| <div class="accordion__content"> | ||
| <table class="simple-table"> | ||
| <tbody> | ||
| <tr><td class="simple-table__cell">Receipts</td><td class="t-right-aligned t-mono" data-sum-id="net_receipts">$000</td></tr> | ||
| <tr><td>Disbursements</td><td class="t-right-aligned t-mono" data-sum-id="disbursements_less_offsets">$000</td></tr> | ||
| <tr><td>Cash-on-hand</td><td class="t-right-aligned t-mono" data-sum-id="cash_on_hand_end">CHECK THIS $000</td></tr> | ||
| <tr><td>Debts owed by committee</td><td class="t-right-aligned t-mono" data-sum-id="debts_owed_by_committee">$000</td></tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <button class="accordion__button">Raising</button> | ||
| <div class="accordion__content"> | ||
| <h5 class="js-cand-name-par-a">NAME, CANDIDATE [PAR]</h5> | ||
| <div class="js-coverage-date">coverage date</div> | ||
| <table> | ||
| <tbody> | ||
| <tr><td colspan="2">Contributions from</td></tr> | ||
| <tr><td> Individuals</td><td class="t-right-aligned t-mono" data-sum-id="individual_contributions_less_refunds">$000</td></tr> | ||
| <tr><td> PACs</td><td class="t-right-aligned t-mono" data-sum-id="pac_contributions_less_refunds">$000</td></tr> | ||
| <tr><td> Parties</td><td class="t-right-aligned t-mono" data-sum-id="party_contributions_less_refunds">$000</td></tr> | ||
| <tr><td> Candidates</td><td class="t-right-aligned t-mono" data-sum-id="candidate_contributions_less_repayments">$000</td></tr> | ||
| <tr><td>Federal funds</td><td class="t-right-aligned t-mono" data-sum-id="federal_funds">CHECK THIS $000</td></tr> | ||
| <tr><td>Transfers-in</td><td class="t-right-aligned t-mono" data-sum-id="transfers_to_other_authorized_committees">$000</td></tr> | ||
| <tr><td colspan="2">Contributions by size</td></tr> | ||
| <tr><td>$200 and under</td><td class="t-right-aligned t-mono" data-size_range_id="1">$000</td></tr> | ||
| <tr><td>$200.01-$499</td><td class="t-right-aligned t-mono" data-size_range_id="2">$000</td></tr> | ||
| <tr><td>$500-$999</td><td class="t-right-aligned t-mono" data-size_range_id="3">$000</td></tr> | ||
| <tr><td>$1000-$1,999</td><td class="t-right-aligned t-mono" data-size_range_id="4">$000</td></tr> | ||
| <tr><td>$2000 and over</td><td class="t-right-aligned t-mono" data-size_range_id="5">$000</td></tr> | ||
| </tbody> | ||
| </table> | ||
| <a href="" class="button--cta button--export js-export-raising-data">Export raising data</a> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <button class="accordion__button">Spending</button> | ||
| <div class="accordion__content"> | ||
| <h5 class="js-cand-name-par-a">NAME, CANDIDATE [PAR]</h5> | ||
| <div class="js-coverage-date">coverage date</div> | ||
| <table> | ||
| <tbody> | ||
| <tr><td>Operating Expenditures</td><td class="t-right-aligned t-mono" data-sum-id="operating_expenditures">$000</td></tr> | ||
| <tr><td>Transfers to other authorized</td><td class="t-right-aligned t-mono" data-sum-id="transfers_to_other_authorized_committees">$000</td></tr> | ||
| <tr><td>Fundraising expenditures</td><td class="t-right-aligned t-mono" data-sum-id="fundraising_disbursements">$000</td></tr> | ||
| <tr><td>Exempt legal and accounting disbursements</td><td class="t-right-aligned t-mono" data-sum-id="exempt_legal_accounting_disbursement">$000</td></tr> | ||
| <tr><td colspan="2">Loan repayments</td></tr> | ||
| <tr><td> Candidate</td><td class="t-right-aligned t-mono" data-sum-id="repayments_loans_made_by_candidate">$000</td></tr> | ||
| <tr><td> Other</td><td class="t-right-aligned t-mono" data-sum-id="repayments_other_loans">$000</td></tr> | ||
| <tr><td>Other disbursements</td><td class="t-right-aligned t-mono" data-sum-id="other_disbursements">$000</td></tr> | ||
| <tr><td>Offsets to expenditures</td><td class="t-right-aligned t-mono" data-sum-id="offsets_to_operating_expenditures">$000</td></tr> | ||
| <tr><td>Contribution refunds</td><td class="t-right-aligned t-mono" data-sum-id="total_contribution_refunds">$000</td></tr> | ||
| </tbody> | ||
| </table> | ||
| <a href="" class="button--cta button--export js-export-spending-data">Export spending data</a> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| {# <a class="TODO-button--standard button--table js-browse-pres-finance-map" href="TODO-/data/receipts/individual-contributions">Browse TODO stuff</a> #} | ||
| </div> | ||
| <div id="downloads-wrapper"> | ||
|
There was a problem hiding this comment. Do we need to be able to close this so that it doesn't persist down the page? There was a problem hiding this comment.
Yes, there is a TODO in the comments for that |
||
| <header class="heading--main content__section--extra"> | ||
| <h2> | ||
| Export raising data | ||
| </h2> | ||
| </header> | ||
| <div class="u-margin--bottom"><a href="" data-stateID="ALL">All states</a></div> | ||
| <div class=downloads-links> | ||
| {% for value in constants.states_excl_territories %} | ||
| <a href="" data-stateID="{{ value }}">{{ value }}</a> | ||
| {% endfor %} | ||
| <a href="" data-stateID="OTHER">Other</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script defer src="{{ asset_for_js('widgets/pres-finance-map-box.js') }}" data-standalone="true"></script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know that styling work still needs to be done. But what can be done about longer words running into the dollar amount? This will happen more often, especially for the hundreds of millions and above figures. cc @JonellaCulmer