diff --git a/static/candidates.html b/static/candidates.html deleted file mode 100644 index 1abf667d1..000000000 --- a/static/candidates.html +++ /dev/null @@ -1,494 +0,0 @@ - - - - - Open FEC Beta - - - - - - - - - - -
-
- An official website of the United States Government US flag signifying that this is a United States Federal Government website -
-
- -
-
- - - - - -
-
-
-
-
-

Janet Smith

-
    -
  • Candidate for U.S. House of Representatives
    • -
  • Principal committee: JANE FOR DELAWARE
    • -
-
-
- - -
-
-
-
-

Candidate Information

-
-
Candidate ID:
-
1234567
-
Status:
-
Incumbent
-
Party:
-
Democratic Party
-
State:
-
Delaware
-
District
-
01
-
-
-
-

Candidate Committees

-
-
Principal Candidate Campaign Committee
-
JANET FOR DELAWARE
-
Authorized Committee
-
FRIENDS OF JANET
-
-
-
-

Related Committees

-
-
Joint Fundraising Committee
-
CANDIDATES XYZ
-
Leadership PAC
-
LEADERPAC
-
-
-
-
-
- -
-
-

Financial Summary

-

Get the full picture of all of the money received and spent by this candidate’s principal and authorized committees.

-
-

Candidate Committees

-

Committees linked to the candidate for purposes of campaign fundraising.

-
-
JANET FOR DELAWARE
-

Principal Candidate Campaign Committee | Last updated 11/11/2014

-
- -
-
-
Summary
-
-
-
Total receipts
-
$0
-
-
-
Total disbursements
-
$0
-
-
- As of 10/15/2014 -
Cash on hand
-
$0
-
-
-
Debt
-
$0
-
-
-
-
-
-
FRIENDS OF JANET
-

Principal Candidate Campaign Committee

-
- -
-
-
Summary
-
-
-
Total receipts
-
$0
-
-
-
Total disbursements
-
$0
-
-
- As of 10/15/2014 -
Cash on hand
-
$0
-
-
-
Debt
-
$0
-
-
-
-
-
-
-

Other Related Committees

-

Committees linked to the candidate for purposes other than campaign fundraising.

-
-
CANDIDATES XYZ
-

Principal Candidate Campaign Committee

-
- -
-
-
Summary
-
-
-
Total receipts
-
$0
-
-
-
Total disbursements
-
$0
-
-
- As of 10/15/2014 -
Cash on hand
-
$0
-
-
-
Debt
-
$0
-
-
-
-
-
-
LEADERPAC
-

Principal Candidate Campaign Committee

-
- -
-
-
Summary
-
-
-
Total receipts
-
$0
-
-
-
Total disbursements
-
$0
-
-
- As of 10/15/2014 -
Cash on hand
-
$0
-
-
-
Debt
-
$0
-
-
-
-
-
-
-
- - -
- - - - - - - diff --git a/static/committees.html b/static/committees.html deleted file mode 100644 index 365415102..000000000 --- a/static/committees.html +++ /dev/null @@ -1,421 +0,0 @@ - - - - - Open FEC Beta - - - - - - - - - - -
-
- An official website of the United States Government US flag signifying that this is a United States Federal Government website -
-
- -
-
- - - - - -
-
-
-
-
-

JANET FOR AMERICA

- -
-
- - -
-
-
-
-

Candidate Information

-
-
Committee ID:
-
1234567
-
Designation:
-
Principal Candidate Campaign Committee
-
Type:
-
Senate
-
Party:
-
Democratic Party
-
Treasurer:
-
Stu Smith
-
Address:
-
PO Box 123 Main St., Wilmington, Delaware 12345
-
-
-
-

Related Candidate:

-
-
Janet Smith
-
-
-
-
-
- -
-
-

Financial Summary

-

Get the full picture of all of the money received and spent by this committee.

-
-

Key Numbers

-

Committees linked to the candidate for purposes of campaign fundraising.

-
-
-
-
- Total receipts -
-
- $1,000,000 -
-
- View all » -
-
-
-
- Total disbursements -
-
- $1,000,000 -
-
- View all » -
-
-
- Totals last updated 11/11/14 at 11:00 AM -
-
-
-
-
-
-
-
Cash on hand -
-
- $0 -
-
- View report » -
-
-
-
-
Debt
-
-
- $0 -
-
- View report » -
-
-
- Totals last updated 10/15/2014 -
-
-
-
-
-

Finances Over Time

-

Total receipts and disbursements over time.

-
-
- -
-
-
View
-
- - - - -
- -
-
-
-
-

Size of Contributions

-

Click on the pieces to view more information

-
-
January 1, 2012 - Today | Totals last updated 11/11/14 at 11:00 AM
- -
-
-
-
- - -
- - - - - - - diff --git a/static/img/18f.png b/static/img/18f.png new file mode 100644 index 000000000..e94a257d9 Binary files /dev/null and b/static/img/18f.png differ diff --git a/static/img/18f@2x.png b/static/img/18f@2x.png new file mode 100644 index 000000000..62fd5b0ef Binary files /dev/null and b/static/img/18f@2x.png differ diff --git a/static/img/icon-candidate--white.svg b/static/img/icon-candidate--white.svg new file mode 100644 index 000000000..7dc4cfc82 --- /dev/null +++ b/static/img/icon-candidate--white.svg @@ -0,0 +1,18 @@ + + + + icon-candidate--white + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icon-candidate.svg b/static/img/icon-candidate.svg new file mode 100644 index 000000000..25a4d1981 --- /dev/null +++ b/static/img/icon-candidate.svg @@ -0,0 +1,18 @@ + + + + icon-candidate + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icon-committee--white.svg b/static/img/icon-committee--white.svg new file mode 100644 index 000000000..0f5a91f5a --- /dev/null +++ b/static/img/icon-committee--white.svg @@ -0,0 +1,30 @@ + + + + icon-committee--white + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icon-committee.svg b/static/img/icon-committee.svg new file mode 100644 index 000000000..221ee1990 --- /dev/null +++ b/static/img/icon-committee.svg @@ -0,0 +1,30 @@ + + + + icon-committee + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icon-contributions--white.svg b/static/img/icon-contributions--white.svg new file mode 100644 index 000000000..488d785d5 --- /dev/null +++ b/static/img/icon-contributions--white.svg @@ -0,0 +1,15 @@ + + + + icon-contributions--white + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icon-contributions.svg b/static/img/icon-contributions.svg new file mode 100644 index 000000000..0e6208e5d --- /dev/null +++ b/static/img/icon-contributions.svg @@ -0,0 +1,15 @@ + + + + icon-contributions + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icon-search--white.svg b/static/img/icon-search--white.svg new file mode 100644 index 000000000..0df04538d --- /dev/null +++ b/static/img/icon-search--white.svg @@ -0,0 +1,12 @@ + + + + icon-search--white + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/static/img/icon-search.svg b/static/img/icon-search.svg new file mode 100644 index 000000000..2d8bd4331 --- /dev/null +++ b/static/img/icon-search.svg @@ -0,0 +1,12 @@ + + + + icon-search + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/static/img/logo.svg b/static/img/logo.svg new file mode 100644 index 000000000..aa62e1f94 --- /dev/null +++ b/static/img/logo.svg @@ -0,0 +1,32 @@ + + + + logo + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/static/js/init.js b/static/js/init.js index c5a933f2f..16a2eee2b 100644 --- a/static/js/init.js +++ b/static/js/init.js @@ -8,10 +8,57 @@ filters.init(); typeahead.init(); $(document).ready(function() { - $('body').addClass('js-initialized'); + var $body, + $pageControls; + + $body = $('body'); + $pageControls = $('.page-controls'); + + $body.addClass('js-initialized'); $('.table--sortable').each(function(){ new tablesort(this); }); + $('.side-toggle').click(function(){ + $('#main').toggleClass('side--open'); + }) + + // Sticky page controls + if ( $pageControls.length > 0 ) { + var scrollPos, + controlsHeight, + controlsTop = $pageControls.offset().top; + + $(document).scroll(function(){ + scrollPos = $(window).scrollTop(); + + if (scrollPos >= controlsTop) { + controlsHeight = $pageControls.height(); + $body.addClass('controls--fixed'); + $body.css('padding-top', controlsHeight); + } else { + $body.removeClass('controls--fixed'); + $body.css('padding-top', 0); + } + }) + } + + // Expand button + if ( $('.js-reveal').length > 0 ) { + var isHidden = true; + $('.js-reveal').click(function(){ + if ( isHidden === true ) { + $('.hidden-container').removeClass('u-hidden'); + $(this).html('Hide charts'); + isHidden = false; + } else { + $('.hidden-container').addClass('u-hidden'); + $(this).html('View charts'); + isHidden = true; + } + }) + } + + }); diff --git a/static/styles/_base/_buttons.scss b/static/styles/_base/_buttons.scss index 496d4a6cc..9bc042180 100644 --- a/static/styles/_base/_buttons.scss +++ b/static/styles/_base/_buttons.scss @@ -42,6 +42,7 @@ } } +button, .button { @include button($lightest-gray, $dark-gray, $medium-gray, #fff); border: 1px solid $medium-gray; @@ -53,7 +54,6 @@ border: 1px solid $medium-gray; } -button, input[type="submit"], .primary { @include button($blue, #fff, $blue-2, #fff); diff --git a/static/styles/_base/_lists.scss b/static/styles/_base/_lists.scss index 3b3646607..df8ff7ee8 100644 --- a/static/styles/_base/_lists.scss +++ b/static/styles/_base/_lists.scss @@ -16,7 +16,7 @@ ul, ol { } } -%flat-list { +.flat-list { @include clearfix(); li { diff --git a/static/styles/_base/_tables.scss b/static/styles/_base/_tables.scss index cff501bcc..f492abf68 100644 --- a/static/styles/_base/_tables.scss +++ b/static/styles/_base/_tables.scss @@ -1,9 +1,9 @@ table { + background-color: #fff; border-collapse: collapse; margin: 0; table-layout: fixed; width: 100%; - border: 1px solid $light-gray; overflow-x: scroll; // scroll horizontally on smaller viewports } @@ -48,8 +48,10 @@ td { } .flex-cell { - white-space: nowrap; // Prevents text-wrapping - width: 1%; // Setting this along with a fixed width on the table makes cells flexible + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 30%; } .sort-header { diff --git a/static/styles/_base/_typography.scss b/static/styles/_base/_typography.scss index 41514c467..970f9c1ca 100644 --- a/static/styles/_base/_typography.scss +++ b/static/styles/_base/_typography.scss @@ -20,17 +20,17 @@ h1, h2, h3, h4, h5, h6 { } h1 { - @include font-size(3.9); + @include font-size(3.2); font-weight: 400; } h2 { - @include font-size(3.1); + @include font-size(2.8); font-weight: 600; } h3 { - @include font-size(2.5); + @include font-size(2.4); font-weight: 600; } diff --git a/static/styles/_base/_utilities.scss b/static/styles/_base/_utilities.scss index f0a70f233..7cd8c0724 100644 --- a/static/styles/_base/_utilities.scss +++ b/static/styles/_base/_utilities.scss @@ -14,4 +14,12 @@ .u-float-left { float: left; +} + +.u-fixed { + position: fixed; +} + +.u-hidden { + display: none; } \ No newline at end of file diff --git a/static/styles/_base/_variables.scss b/static/styles/_base/_variables.scss index 7e8ae7168..c44d61b32 100644 --- a/static/styles/_base/_variables.scss +++ b/static/styles/_base/_variables.scss @@ -29,6 +29,9 @@ $green: #148552; $green-2: #0F5E3B; $licorice: #3E4957; $licorice-2: #323A45; +$licorice-3: #505E70; +$page-header: $licorice-3; +$filter-bg: #BDC4CD; // Data colors $data-support: #1B5585; // Blue diff --git a/static/styles/_components/_browse-links.scss b/static/styles/_components/_browse-links.scss index e74bc5206..04213e3c0 100644 --- a/static/styles/_components/_browse-links.scss +++ b/static/styles/_components/_browse-links.scss @@ -1,6 +1,6 @@ // MODULE: Browse links .browse-links { - @extend %flat-list; + @extend .flat-list; @include span-columns(12); @include shift(6); @include rem(padding, 1.5rem 0); diff --git a/static/styles/_components/_components.scss b/static/styles/_components/_components.scss index e0e1ff9aa..24d3096e9 100644 --- a/static/styles/_components/_components.scss +++ b/static/styles/_components/_components.scss @@ -2,10 +2,10 @@ @import "browse-links"; @import "disclosure-box"; @import "filters"; +@import "side-panel"; @import "header"; @import "hero"; @import "meta-box"; -@import "page-nav"; @import "progress-bar"; @import "search-bar"; @import "states"; @@ -15,6 +15,9 @@ @import "chosen-override"; @import "dividers"; @import "errors"; +@import "page-header"; +@import "icons"; +@import "footer"; // Remove for production @import "styleguide"; diff --git a/static/styles/_components/_entity.scss b/static/styles/_components/_entity.scss index f073915a3..213fc948b 100644 --- a/static/styles/_components/_entity.scss +++ b/static/styles/_components/_entity.scss @@ -1,12 +1,7 @@ // Header styles for candidate, committee and district pages -.entity__header { - padding: 2em 0; -} - .entity__header--top { - padding: 1em 0 0; - border-bottom: 4px solid; + @include rem(padding-top, 2.0rem); } .entity__name { @@ -14,13 +9,7 @@ } .entity__type { - @include font-size(1.6); - display: inline-block; - font-weight: bold; - padding: .25em .5em; - border-radius: 4px; - margin: 0 0 .625em 0; - text-align: center; + @include font-size(2.0); } .time-period { @@ -50,7 +39,7 @@ width: 100%; h4 { - color: $licorice; + color: #fff; font-weight: normal; border-bottom: 1px solid $licorice; } @@ -61,11 +50,11 @@ } .entity__term { - @include span-columns(4); + @include span-columns(4, block-collapse); } .entity__term--wide { - @include span-columns(8); + @include span-columns(8, block-collapse); } .entity__term--extra-wide { @@ -86,38 +75,7 @@ // Candidate-specific styles .candidate { - .entity__header { - background-color: $licorice; - color: #fff; - a { - color: #fff; - text-decoration: underline; - } - - .chosen-container a { - color: $blue; - } - - .entity__info h4 { - color: #99A4B1; - border-bottom: 1px solid #99A4B1; - } - - .entity__header--top { - border-bottom-color: #99A4B1; - } - - .entity__type { - background-color: #99A4B1; - color: $licorice; - } - - .entity__term h4 { - color: #99A4B1; - border-bottom-color: #99A4B1; - } - } } // Committee summary boxes on the Candidate Financial Summary page @@ -126,7 +84,7 @@ @include clearfix(); .row { - @include rem(margin-bottom, 2rem); + @include rem(margin-bottom, 3rem); } .quick-links { @@ -150,36 +108,3 @@ font-weight: bold; } } - -// Committee page -.committee { - .entity__header { - background-color: $committee-bg; - } - - .entity__header--top { - border-bottom-color: #63636E; - } - - .entity__type { - background-color: #63636E; - color: $committee-bg; - } - - .entity__term h4 { - color: #63636E; - border-bottom-color: #63636E; - } -} - -.chunk--two-thirds { - .entity__info { - dt { - width: 25%; - } - - dd { - width: 75%; - } - } -} diff --git a/static/styles/_components/_figures.scss b/static/styles/_components/_figures.scss index 028122bb9..9d48eb52a 100644 --- a/static/styles/_components/_figures.scss +++ b/static/styles/_components/_figures.scss @@ -10,10 +10,29 @@ figure { // Contained in a subsection, this is a group of figures (i.e. for a committee) .figure-group { @include clearfix(); + @include transition(height, .5s); clear: both; - background-color: $lightest-gray; - border: 1px solid $light-gray; + border: 1px solid $licorice-3; position: relative; + + .js-reveal { + position: absolute; + bottom: -20px; + left: 50%; + margin-left: -62px; + } +} + +.figure-group__side { + background-color: $licorice-3; + width: 1.875em; + padding: .3125em; + position: absolute; + height: 100%; +} + +.figure-group__main { + padding-left: 1.875em; } .figure-group__header { @@ -27,9 +46,7 @@ figure { } .figure-group__description { - @include font-size(1.2); - background-color: $dark-gray; - color: $lightest-gray; + @include font-size(1.4); } .figure-group__inner { diff --git a/static/styles/_components/_filters.scss b/static/styles/_components/_filters.scss index edca5c9d9..341d329a7 100644 --- a/static/styles/_components/_filters.scss +++ b/static/styles/_components/_filters.scss @@ -1,18 +1,5 @@ // MODULE: Filter fields -.filter-field-container { - @extend .disclosure__inner; - - .field { - @include span-columns(12); - padding: 1em 0; - - &:nth-child(even) { - @include omega() - } - } -} - .field.active { label { color: $green; @@ -23,26 +10,17 @@ } } -.add-filter { - #{$all-text-inputs} { - @include span-columns(10 of 12, block-collapse); - margin: 0; - } -} - -.add-filter__button { - @extend .button; - @include span-columns(2 of 12, block-collapse); - height: 40px; - padding: 0; - line-height: 40px; - border-radius: 0 4px 4px 0; -} - - .field { + margin-bottom: 1.25em; + select { width: 100%; height: 40px; } +} + +.controls--fixed { + #filters { + + } } \ No newline at end of file diff --git a/static/styles/_components/_footer.scss b/static/styles/_components/_footer.scss new file mode 100644 index 000000000..5931e1eaa --- /dev/null +++ b/static/styles/_components/_footer.scss @@ -0,0 +1,32 @@ +footer { + @include clearfix(); + @include rem(height, 10rem); + padding: 2em; + background-color: $licorice-2; + color: #fff; + + a, + a:hover, + a:active { + color: #fff; + } +} + +.footer__left { + @include span-columns(12); + img { + margin-right: 1.25em; + } +} + +.footer__right { + @include span-columns(12); + text-align: right; +} + +.footer__nav { + li { + display: inline-block; + padding: 0 .625em; + } +} \ No newline at end of file diff --git a/static/styles/_components/_header.scss b/static/styles/_components/_header.scss index f40e5af00..e83c02082 100644 --- a/static/styles/_components/_header.scss +++ b/static/styles/_components/_header.scss @@ -1,15 +1,123 @@ // MODULE: Header .usa { - @include font-size(1.4); - background-color: #e6e6e6; + @include font-size(1.2); text-align: center; padding: .5em; + border-bottom: 1px solid $licorice; } .site-header { - border-bottom: 5px solid $red; + background: $licorice-2; + color: #fff; + + a { + color: #fff; + } +} +.header-nav { + @include clearfix(); +} + +.header-nav__list { + @extend .flat-list; + float: left; +} + +.header-nav__link { + @include rem(padding, 1rem 2rem); + @include font-size(1.8); + @include transition(background-color .1s); + text-align: center; + display: block; + line-height: 2; + text-decoration: none; + + &:hover, + &:active { + background: $licorice; + color: #fff; + } +} + +.header-nav__brand { + @include rem(padding, 1rem 2rem); + @include transition(background-color .1s); + background-color: $red; + display: block; + text-align: center; + position: relative; + + &:after { + content: ''; + @include transition(border-color .1s); + display: block; + position: absolute; + right: -10px; + top: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 28px 0 28px 10px; + border-color: transparent transparent transparent $red; + } + + &:hover, + &:active { + background: $red-2; + + &:after { + border-color: transparent transparent transparent $red-2; + } + } +} + +.header-nav__search { + @include clearfix(); + @include rem(padding, 1rem 2rem); + float: right; + margin-right: 0; + width: 340px; + + input[type="text"], + button { + @include rem(height, 3.2rem); + margin-bottom: 0; + border: none; + } + + input[type="text"] { + width: 260px; + } + + .search-submit { + width: 40px; + padding: 0; + } } -.site-header__inner { - padding: em(20) 0; + +@include media($medium) { + .header-nav__link { + @include rem(padding, .5rem); + + &:last-child { + border-right: none; + } + } + + .header-nav__search { + @include rem(padding, .5rem); + } +} + +@include media($small) { + .header-nav__item { + @include span-columns(2, block-collapse); + } + + .header-nav__search { + @include span-columns(4); + @include rem(padding, .5rem 0 0 0); + border-right: none; + } } diff --git a/static/styles/_components/_hero.scss b/static/styles/_components/_hero.scss index 6a7cfaa9b..bd52ca883 100644 --- a/static/styles/_components/_hero.scss +++ b/static/styles/_components/_hero.scss @@ -3,7 +3,7 @@ padding: 5em 0; color: #fff; text-align: center; - background-color: $licorice; + background-color: $page-header; background-image: url('../img/mesh@2x.png'); background-size: contain; } diff --git a/static/styles/_components/_icons.scss b/static/styles/_components/_icons.scss new file mode 100644 index 000000000..2e825c5c0 --- /dev/null +++ b/static/styles/_components/_icons.scss @@ -0,0 +1,5 @@ +// category-icons are the candidate, committee or contribution icons +.category-icon { + margin-right: 10px; margin-right: 1.0rem; + vertical-align: text-bottom; +} \ No newline at end of file diff --git a/static/styles/_components/_meta-box.scss b/static/styles/_components/_meta-box.scss index cdbb7a57c..b51f7b4c2 100644 --- a/static/styles/_components/_meta-box.scss +++ b/static/styles/_components/_meta-box.scss @@ -11,22 +11,4 @@ .meta-box--bottom { margin-top: 2em; -} - -.results-count { - @include span-columns(12); - p { - margin: 0; - } -} - -.pagination { - @include span-columns(12); - text-align: right; -} - -.pagination__link { - &:nth-child(2) { - margin-left: 1em; - } -} +} \ No newline at end of file diff --git a/static/styles/_components/_page-header.scss b/static/styles/_components/_page-header.scss new file mode 100644 index 000000000..39f049928 --- /dev/null +++ b/static/styles/_components/_page-header.scss @@ -0,0 +1,75 @@ +.page-header { + @include rem(padding, 1rem 2rem); + background: $page-header; + color: #fff; + + h1 { + margin-bottom: 0; + } + + a, + a:hover, + a:active { + color: #fff; + } +} + +.page-controls { + background: $page-header; + border-top: 1px solid $filter-bg; + width: 100%; + color: #fff; +} + +// Fixing posiiton of page controls +.controls--fixed { + .page-controls { + position: fixed; + top: 0; + left: 0; + z-index: 999; + } + + .page-controls__top { + display: block; + } +} + +.page-controls__top { + @include rem(padding, 1rem); + display: none; + border-bottom: 1px solid $licorice; +} + +.page-controls__title { + @include font-size(1.6); +} + +.results-count { + @extend .flat-list; + float: right; + + li { + @include rem(padding, 1.0rem 2.0rem); + line-height: 1.14; + } + + p { + margin: 0; + } + + a { + color: #fff; + } +} + +.pagination { + text-align: right; + float: right; +} + +.pagination__link { + &:nth-child(2) { + margin-left: 1em; + } +} diff --git a/static/styles/_components/_page-nav.scss b/static/styles/_components/_page-nav.scss deleted file mode 100644 index 5e0785ee4..000000000 --- a/static/styles/_components/_page-nav.scss +++ /dev/null @@ -1,75 +0,0 @@ -// MODULE: Page nav -.page-nav { - background-color: $licorice-2; -} - -.page-nav { - @extend %flat-list; -} - -.page-nav__item { - @include span-columns(6, block-collapse); -} - -.page-nav__link { - @include font-size(1.8); - @include rem(padding, 2rem); - @include transition(background-color .1s); - text-align: center; - border-right: 1px solid $light-gray; - color: #fff; - display: block; - line-height: 2; - text-decoration: none; - - &:hover, - &:active { - background-color: $licorice-2; - color: #fff; - } -} - -.page-nav__search { - @include span-columns(12, block-collapse); - @include rem(padding, 2rem 2rem 2rem 0); - margin-right: 0; - border-right: 1px solid $light-gray; - - .search-bar, - .search-submit { - @include rem(height, 3.2rem); - margin-bottom: 0; - border: none; - } - - .search-submit { - padding: 0; - } -} - - -@include media($medium) { - .page-nav__link { - @include rem(padding, .5rem); - - &:last-child { - border-right: none; - } - } - - .page-nav__search { - @include rem(padding, .5rem); - } -} - -@include media($small) { - .page-nav__item { - @include span-columns(2, block-collapse); - } - - .page-nav__search { - @include span-columns(4); - @include rem(padding, .5rem 0 0 0); - border-right: none; - } -} diff --git a/static/styles/_components/_page-tabs.scss b/static/styles/_components/_page-tabs.scss index 41a433fae..6ce6bbc29 100644 --- a/static/styles/_components/_page-tabs.scss +++ b/static/styles/_components/_page-tabs.scss @@ -1,5 +1,5 @@ .page-tabs { - background: $licorice-2; + background: $licorice-3; text-align: left; padding: 0; } diff --git a/static/styles/_components/_side-panel.scss b/static/styles/_components/_side-panel.scss new file mode 100644 index 000000000..a0930ff8d --- /dev/null +++ b/static/styles/_components/_side-panel.scss @@ -0,0 +1,47 @@ +// Side panel +// This is the styles for slide out side panels + +.side-toggle { + @include rem(padding, 1.0rem); + @include transition(background-color, .1s); + border-radius: 0; + background: none; + border-width: 0 1px 0 0; + border-color: $filter-bg; + border-style: solid; + color: #fff; + + &:hover, + &:active { + color: $licorice; + background-color: $filter-bg; + border-width: 0 1px 0 0; + border-color: $filter-bg; + border-style: solid; + } +} + +.side--open { + .side-toggle { + background-color: $filter-bg; + color: $licorice; + } + + .results-container { + left: 20%; + } + + .side-panel { + left: 0; + } +} + +.side-panel { + @include transition(left, .2s); + padding: 1.25em; + background: $filter-bg; + position: absolute; + left: -100%; + width: 20%; + float: left; +} \ No newline at end of file diff --git a/static/styles/_components/_styleguide.scss b/static/styles/_components/_styleguide.scss index 32e2058d1..4fcd79d80 100644 --- a/static/styles/_components/_styleguide.scss +++ b/static/styles/_components/_styleguide.scss @@ -59,10 +59,3 @@ h3.styles__heading { margin-bottom: 1em; } } - -footer { - padding: 2em; - margin-top: 4em; - background-color: $licorice-2; - color: #fff; -} diff --git a/static/styles/_layout/_data-view.scss b/static/styles/_layout/_data-view.scss index 4afa1d641..3b3da8a2a 100644 --- a/static/styles/_layout/_data-view.scss +++ b/static/styles/_layout/_data-view.scss @@ -1,10 +1,6 @@ // LAYOUT: Data results view // Styling any view with a results table -#filters { - margin-top: 2em; -} - .results-header { @include clearfix(); padding-bottom: 1em; @@ -18,6 +14,19 @@ } } -#results { - @include span-columns(24); +.results-content { + @include clearfix(); + background-color: $filter-bg; + width: 100%; + overflow: hidden; } + +.results-container { + @include rem(padding, 1rem); + @include transition(left, .2s); + background: #fff; + position: relative; + width: 100%; + left: 0; + height: 100%; +} \ No newline at end of file diff --git a/static/styles/_layout/_layout.scss b/static/styles/_layout/_layout.scss index 15e0b8b76..f2175effe 100644 --- a/static/styles/_layout/_layout.scss +++ b/static/styles/_layout/_layout.scss @@ -1,10 +1,28 @@ @import "data-view"; +* { + margin: 0; // For sticky footer (http://css-tricks.com/snippets/css/sticky-footer/) +} + +body, +html { + height: 100%; +} + body { padding: 0; margin: 0; } +.page-wrap { + min-height: 100%; + + &:after { + content: ""; + display: block; + } +} + .container { @include outer-container(); } diff --git a/static/styles/styles.css b/static/styles/styles.css index 85f236fd4..de3f0cde9 100644 --- a/static/styles/styles.css +++ b/static/styles/styles.css @@ -39,18 +39,18 @@ h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } h1 { - font-size: 39px; - font-size: 3.9rem; + font-size: 32px; + font-size: 3.2rem; font-weight: 400; } h2 { - font-size: 31px; - font-size: 3.1rem; + font-size: 28px; + font-size: 2.8rem; font-weight: 600; } h3 { - font-size: 25px; - font-size: 2.5rem; + font-size: 24px; + font-size: 2.4rem; font-weight: 600; } h4 { @@ -250,8 +250,7 @@ select { border-right: none; } .input-button-combo input[type="submit"], .input-button-combo button, -.input-button-combo .button, -.input-button-combo .add-filter__button { +.input-button-combo .button { height: 40px; height: 4rem; width: 25%; @@ -279,11 +278,11 @@ select { margin-top: 0; } table { + background-color: #fff; border-collapse: collapse; margin: 0; table-layout: fixed; width: 100%; - border: 1px solid #D7D7D7; overflow-x: scroll; } thead tr:hover { @@ -316,7 +315,9 @@ td { .flex-cell { white-space: nowrap; - width: 1%; } + overflow: hidden; + text-overflow: ellipsis; + width: 30%; } .sort-header { -webkit-transition: background-color 0.1s; @@ -418,11 +419,11 @@ ul, ol { margin: 0; padding: 0; list-style-type: none; } -.browse-links:after, .page-nav:after { +.flat-list:after, .browse-links:after, .header-nav__list:after, .results-count:after { content: ""; display: table; clear: both; } -.browse-links li, .page-nav li { +.flat-list li, .browse-links li, .header-nav__list li, .results-count li { float: left; } dl { @@ -433,7 +434,8 @@ dl { dl dd { margin: 0; } -.button, .add-filter__button { +button, +.button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -461,21 +463,26 @@ dl { vertical-align: middle; white-space: nowrap; border: 1px solid #b3b3b3; } - .button:hover, .add-filter__button:hover { + button:hover, + .button:hover { background-color: #b3b3b3; color: #fff; border: 1px solid #b3b3b3; } - .button:active, .add-filter__button:active, .button:focus, .add-filter__button:focus { + button:active, button:focus, + .button:active, + .button:focus { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; outline: none; } - .button.disabled, .disabled.add-filter__button { + button.disabled, + .button.disabled { color: #D3D3D3; cursor: default; } - .button.disabled:hover, .disabled.add-filter__button:hover { + button.disabled:hover, + .button.disabled:hover { color: #D3D3D3; background-color: #F8F8F8; } @@ -484,7 +491,6 @@ dl { color: #fff; border: 1px solid #b3b3b3; } -button, input[type="submit"], .primary, .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary { @@ -514,16 +520,13 @@ input[type="submit"], user-select: none; vertical-align: middle; white-space: nowrap; } - button:hover, input[type="submit"]:hover, .primary:hover, .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary:hover { background-color: #1B5585; color: #fff; border: 1px solid #1B5585; } - button:active, button:focus, - input[type="submit"]:active, - input[type="submit"]:focus, + input[type="submit"]:active, input[type="submit"]:focus, .primary:active, .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary:active, .primary:focus, @@ -534,19 +537,16 @@ input[type="submit"], -o-appearance: none; appearance: none; outline: none; } - button.disabled, input[type="submit"].disabled, .primary.disabled, .vex.vex-theme-default .disabled.vex-dialog-button.vex-dialog-button-primary { color: #D3D3D3; cursor: default; } - button.disabled:hover, input[type="submit"].disabled:hover, .primary.disabled:hover, .vex.vex-theme-default .disabled.vex-dialog-button.vex-dialog-button-primary:hover { color: #D3D3D3; background-color: #2678BA; } - button:active, input[type="submit"]:active, .primary:active, .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary:active { @@ -554,15 +554,15 @@ input[type="submit"], .button--group { display: inline-block; } - .button--group .button, .button--group .add-filter__button { + .button--group .button { border-radius: 0; margin-left: -4px; } - .button--group .button:first-child, .button--group .add-filter__button:first-child { + .button--group .button:first-child { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; border-right: none; margin-left: 0; } - .button--group .button:last-child, .button--group .add-filter__button:last-child { + .button--group .button:last-child { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; border-left: none; } @@ -624,6 +624,12 @@ input[type="submit"], .u-float-left { float: left; } +.u-fixed { + position: fixed; } + +.u-hidden { + display: none; } + .vex.vex-theme-default { background-color: rgba(255, 255, 255, 0.5); position: absolute; @@ -673,7 +679,7 @@ input[type="submit"], width: 48.82117%; } .browse-links li:last-child { margin-right: 0; } - .browse-links li .button, .browse-links li .add-filter__button { + .browse-links li .button { display: block; } @media screen and (max-width: 48em) { @@ -756,187 +762,173 @@ input[type="submit"], -moz-osx-font-smoothing: grayscale; content: "\e61a"; } -.disclosure__inner, .filter-field-container { +.disclosure__inner { padding: 10px; padding: 1rem; border-color: #D7D7D7; border-style: solid; border-width: 0 1px 1px 1px; } - .disclosure__inner:after, .filter-field-container:after { + .disclosure__inner:after { content: ""; display: table; clear: both; } -.filter-field-container .field { - float: left; - display: block; - margin-right: 1.16509%; - width: 49.41745%; - padding: 1em 0; } - .filter-field-container .field:last-child { - margin-right: 0; } - .filter-field-container .field:nth-child(even) { - margin-right: 0; } - .field.active label { color: #148552; } .field.active .chosen-single { border: 2px solid #148552; } -.add-filter input[type="email"], .add-filter input[type="number"], .add-filter input[type="password"], .add-filter input[type="search"], .add-filter input[type="tel"], .add-filter input[type="text"], .add-filter input[type="url"], .add-filter input[type="color"], .add-filter input[type="date"], .add-filter input[type="datetime"], .add-filter input[type="datetime-local"], .add-filter input[type="month"], .add-filter input[type="time"], .add-filter input[type="week"] { - float: left; - display: block; - width: 85.29804%; - margin: 0; } - .add-filter input[type="email"]:last-child, .add-filter input[type="number"]:last-child, .add-filter input[type="password"]:last-child, .add-filter input[type="search"]:last-child, .add-filter input[type="tel"]:last-child, .add-filter input[type="text"]:last-child, .add-filter input[type="url"]:last-child, .add-filter input[type="color"]:last-child, .add-filter input[type="date"]:last-child, .add-filter input[type="datetime"]:last-child, .add-filter input[type="datetime-local"]:last-child, .add-filter input[type="month"]:last-child, .add-filter input[type="time"]:last-child, .add-filter input[type="week"]:last-child { - width: 82.94039%; } +.field { + margin-bottom: 1.25em; } + .field select { + width: 100%; + height: 40px; } -.add-filter__button { - float: left; - display: block; - width: 17.05961%; - height: 40px; - padding: 0; - line-height: 40px; - border-radius: 0 4px 4px 0; } - .add-filter__button:last-child { - width: 14.70196%; } +.side-toggle { + padding: 10px; + padding: 1rem; + -webkit-transition: background-color, 0.1s; + -moz-transition: background-color, 0.1s; + transition: background-color, 0.1s; + border-radius: 0; + background: none; + border-width: 0 1px 0 0; + border-color: #BDC4CD; + border-style: solid; + color: #fff; } + .side-toggle:hover, .side-toggle:active { + color: #3E4957; + background-color: #BDC4CD; + border-width: 0 1px 0 0; + border-color: #BDC4CD; + border-style: solid; } -.field select { - width: 100%; - height: 40px; } +.side--open .side-toggle { + background-color: #BDC4CD; + color: #3E4957; } +.side--open .results-container { + left: 20%; } +.side--open .side-panel { + left: 0; } + +.side-panel { + -webkit-transition: left, 0.2s; + -moz-transition: left, 0.2s; + transition: left, 0.2s; + padding: 1.25em; + background: #BDC4CD; + position: absolute; + left: -100%; + width: 20%; + float: left; } .usa { - font-size: 14px; - font-size: 1.4rem; - background-color: #e6e6e6; + font-size: 12px; + font-size: 1.2rem; text-align: center; - padding: .5em; } + padding: .5em; + border-bottom: 1px solid #3E4957; } .site-header { - border-bottom: 5px solid #DB4857; } - -.site-header__inner { - padding: 1.25em 0; } - -.hero { - padding: 5em 0; - color: #fff; - text-align: center; - background-color: #3E4957; - background-image: url("../img/mesh@2x.png"); - background-size: contain; } - -.sub-hero { - text-align: center; - padding: 3em 0; } - -@media screen and (max-width: 30em) { - .hero { - padding: 2em 0; } } -.meta-box { - float: left; - display: block; - margin-right: 1.16509%; - width: 100%; - margin-bottom: 2em; - padding: 1em; - background-color: #FBFBFD; - border: 1px solid #D7D7D7; } - .meta-box:last-child { - margin-right: 0; } - -.meta-box--bottom { - margin-top: 2em; } - -.results-count { - float: left; - display: block; - margin-right: 1.16509%; - width: 49.41745%; } - .results-count:last-child { - margin-right: 0; } - .results-count p { - margin: 0; } - -.pagination { - float: left; - display: block; - margin-right: 1.16509%; - width: 49.41745%; - text-align: right; } - .pagination:last-child { - margin-right: 0; } - -.pagination__link:nth-child(2) { - margin-left: 1em; } + background: #323A45; + color: #fff; } + .site-header a { + color: #fff; } -.page-nav { - background-color: #323A45; } +.header-nav:after { + content: ""; + display: table; + clear: both; } -.page-nav__item { - float: left; - display: block; - width: 25.29127%; } - .page-nav__item:last-child { - width: 24.12618%; } +.header-nav__list { + float: left; } -.page-nav__link { +.header-nav__link { + padding: 10px 20px; + padding: 1rem 2rem; font-size: 18px; font-size: 1.8rem; - padding: 20px; - padding: 2rem; -webkit-transition: background-color 0.1s; -moz-transition: background-color 0.1s; transition: background-color 0.1s; text-align: center; - border-right: 1px solid #D7D7D7; - color: #fff; display: block; line-height: 2; text-decoration: none; } - .page-nav__link:hover, .page-nav__link:active { - background-color: #323A45; + .header-nav__link:hover, .header-nav__link:active { + background: #3E4957; color: #fff; } -.page-nav__search { - float: left; +.header-nav__brand { + padding: 10px 20px; + padding: 1rem 2rem; + -webkit-transition: background-color 0.1s; + -moz-transition: background-color 0.1s; + transition: background-color 0.1s; + background-color: #DB4857; display: block; - width: 50.58255%; - padding: 20px 20px 20px 0; - padding: 2rem 2rem 2rem 0; + text-align: center; + position: relative; } + .header-nav__brand:after { + content: ''; + -webkit-transition: border-color 0.1s; + -moz-transition: border-color 0.1s; + transition: border-color 0.1s; + display: block; + position: absolute; + right: -10px; + top: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 28px 0 28px 10px; + border-color: transparent transparent transparent #DB4857; } + .header-nav__brand:hover, .header-nav__brand:active { + background: #A13540; } + .header-nav__brand:hover:after, .header-nav__brand:active:after { + border-color: transparent transparent transparent #A13540; } + +.header-nav__search { + padding: 10px 20px; + padding: 1rem 2rem; + float: right; margin-right: 0; - border-right: 1px solid #D7D7D7; } - .page-nav__search:last-child { - width: 49.41745%; } - .page-nav__search .search-bar, - .page-nav__search .search-submit { + width: 340px; } + .header-nav__search:after { + content: ""; + display: table; + clear: both; } + .header-nav__search input[type="text"], + .header-nav__search button { height: 32px; height: 3.2rem; margin-bottom: 0; border: none; } - .page-nav__search .search-submit { + .header-nav__search input[type="text"] { + width: 260px; } + .header-nav__search .search-submit { + width: 40px; padding: 0; } @media screen and (max-width: 48em) { - .page-nav__link { + .header-nav__link { padding: 5px; padding: 0.5rem; } - .page-nav__link:last-child { + .header-nav__link:last-child { border-right: none; } - .page-nav__search { + .header-nav__search { padding: 5px; padding: 0.5rem; } } @media screen and (max-width: 30em) { - .page-nav__item { + .header-nav__item { float: left; display: block; width: 53.71149%; } - .page-nav__item:last-child { + .header-nav__item:last-child { width: 46.28851%; } - .page-nav__search { + .header-nav__search { float: left; display: block; margin-right: 7.42297%; @@ -944,8 +936,38 @@ input[type="submit"], padding: 5px 0 0 0; padding: 0.5rem 0 0 0; border-right: none; } - .page-nav__search:last-child { + .header-nav__search:last-child { margin-right: 0; } } +.hero { + padding: 5em 0; + color: #fff; + text-align: center; + background-color: #505E70; + background-image: url("../img/mesh@2x.png"); + background-size: contain; } + +.sub-hero { + text-align: center; + padding: 3em 0; } + +@media screen and (max-width: 30em) { + .hero { + padding: 2em 0; } } +.meta-box { + float: left; + display: block; + margin-right: 1.16509%; + width: 100%; + margin-bottom: 2em; + padding: 1em; + background-color: #FBFBFD; + border: 1px solid #D7D7D7; } + .meta-box:last-child { + margin-right: 0; } + +.meta-box--bottom { + margin-top: 2em; } + #progress { top: 2em; } @@ -1081,26 +1103,17 @@ section[aria-hidden="true"], .hidden { display: none; } -.entity__header { - padding: 2em 0; } - .entity__header--top { - padding: 1em 0 0; - border-bottom: 4px solid; } + padding-top: 20px; + padding-top: 2rem; } .entity__name { font-size: 31px; font-size: 3.1rem; } .entity__type { - font-size: 16px; - font-size: 1.6rem; - display: inline-block; - font-weight: bold; - padding: .25em .5em; - border-radius: 4px; - margin: 0 0 .625em 0; - text-align: center; } + font-size: 20px; + font-size: 2rem; } .time-period { float: right; } @@ -1126,7 +1139,7 @@ section[aria-hidden="true"], display: table; clear: both; } .entity__info h4 { - color: #3E4957; + color: #fff; font-weight: normal; border-bottom: 1px solid #3E4957; } .entity__info dl { @@ -1135,18 +1148,16 @@ section[aria-hidden="true"], .entity__term { float: left; display: block; - margin-right: 1.16509%; - width: 15.69576%; } + width: 16.86085%; } .entity__term:last-child { - margin-right: 0; } + width: 15.69576%; } .entity__term--wide { float: left; display: block; - margin-right: 1.16509%; - width: 32.55661%; } + width: 33.7217%; } .entity__term--wide:last-child { - margin-right: 0; } + width: 32.55661%; } .entity__term--extra-wide { float: left; @@ -1167,33 +1178,13 @@ section[aria-hidden="true"], font-size: 14px; font-size: 1.4rem; } -.candidate .entity__header { - background-color: #3E4957; - color: #fff; } - .candidate .entity__header a { - color: #fff; - text-decoration: underline; } - .candidate .entity__header .chosen-container a { - color: #2678BA; } - .candidate .entity__header .entity__info h4 { - color: #99A4B1; - border-bottom: 1px solid #99A4B1; } - .candidate .entity__header .entity__header--top { - border-bottom-color: #99A4B1; } - .candidate .entity__header .entity__type { - background-color: #99A4B1; - color: #3E4957; } - .candidate .entity__header .entity__term h4 { - color: #99A4B1; - border-bottom-color: #99A4B1; } - .committee-summary:after { content: ""; display: table; clear: both; } .committee-summary .row { - margin-bottom: 20px; - margin-bottom: 2rem; } + margin-bottom: 30px; + margin-bottom: 3rem; } .committee-summary .quick-links { float: left; display: block; @@ -1224,24 +1215,8 @@ section[aria-hidden="true"], .totals-table .table__cell:first-child { font-weight: bold; } -.committee .entity__header { - background-color: #DCDCE0; } -.committee .entity__header--top { - border-bottom-color: #63636E; } -.committee .entity__type { - background-color: #63636E; - color: #DCDCE0; } -.committee .entity__term h4 { - color: #63636E; - border-bottom-color: #63636E; } - -.chunk--two-thirds .entity__info dt { - width: 25%; } -.chunk--two-thirds .entity__info dd { - width: 75%; } - .page-tabs { - background: #323A45; + background: #505E70; text-align: left; padding: 0; } @@ -1275,14 +1250,31 @@ figure { margin-bottom: 1em; } .figure-group { + -webkit-transition: height, 0.5s; + -moz-transition: height, 0.5s; + transition: height, 0.5s; clear: both; - background-color: #F8F8F8; - border: 1px solid #D7D7D7; + border: 1px solid #505E70; position: relative; } .figure-group:after { content: ""; display: table; clear: both; } + .figure-group .js-reveal { + position: absolute; + bottom: -20px; + left: 50%; + margin-left: -62px; } + +.figure-group__side { + background-color: #505E70; + width: 1.875em; + padding: .3125em; + position: absolute; + height: 100%; } + +.figure-group__main { + padding-left: 1.875em; } .figure-group__header { padding: 20px 20px; @@ -1297,10 +1289,8 @@ figure { margin: 0; } .figure-group__description { - font-size: 12px; - font-size: 1.2rem; - background-color: #515A61; - color: #F8F8F8; } + font-size: 14px; + font-size: 1.4rem; } .figure-group__inner { padding: 20px 20px; @@ -1803,6 +1793,103 @@ This file is generated by `grunt build`, do not edit it by hand. .error-nav:last-child { margin-right: 0; } +.page-header { + padding: 10px 20px; + padding: 1rem 2rem; + background: #505E70; + color: #fff; } + .page-header h1 { + margin-bottom: 0; } + .page-header a, + .page-header a:hover, + .page-header a:active { + color: #fff; } + +.page-controls { + background: #505E70; + border-top: 1px solid #BDC4CD; + width: 100%; + color: #fff; } + +.controls--fixed .page-controls { + position: fixed; + top: 0; + left: 0; + z-index: 999; } +.controls--fixed .page-controls__top { + display: block; } + +.page-controls__top { + padding: 10px; + padding: 1rem; + display: none; + border-bottom: 1px solid #3E4957; } + +.page-controls__title { + font-size: 16px; + font-size: 1.6rem; } + +.results-count { + float: right; } + .results-count li { + padding: 10px 20px; + padding: 1rem 2rem; + line-height: 1.14; } + .results-count p { + margin: 0; } + .results-count a { + color: #fff; } + +.pagination { + text-align: right; + float: right; } + +.pagination__link:nth-child(2) { + margin-left: 1em; } + +.category-icon { + margin-right: 10px; + margin-right: 1.0rem; + vertical-align: text-bottom; } + +footer { + height: 100px; + height: 10rem; + padding: 2em; + background-color: #323A45; + color: #fff; } + footer:after { + content: ""; + display: table; + clear: both; } + footer a, + footer a:hover, + footer a:active { + color: #fff; } + +.footer__left { + float: left; + display: block; + margin-right: 1.16509%; + width: 49.41745%; } + .footer__left:last-child { + margin-right: 0; } + .footer__left img { + margin-right: 1.25em; } + +.footer__right { + float: left; + display: block; + margin-right: 1.16509%; + width: 49.41745%; + text-align: right; } + .footer__right:last-child { + margin-right: 0; } + +.footer__nav li { + display: inline-block; + padding: 0 .625em; } + .styleguide .site-header { padding: 2em 0; background: #323A45; @@ -1849,15 +1936,6 @@ h3.styles__heading { .icon-list li { margin-bottom: 1em; } -footer { - padding: 2em; - margin-top: 4em; - background-color: #323A45; - color: #fff; } - -#filters { - margin-top: 2em; } - .results-header { padding-bottom: 1em; } .results-header:after { @@ -1871,26 +1949,52 @@ footer { width: 83.13915%; } .results-header h3:last-child { margin-right: 0; } - .results-header .button, .results-header .add-filter__button { + .results-header .button { float: left; display: block; margin-right: 1.16509%; width: 15.69576%; } - .results-header .button:last-child, .results-header .add-filter__button:last-child { + .results-header .button:last-child { margin-right: 0; } -#results { - float: left; - display: block; - margin-right: 1.16509%; - width: 100%; } - #results:last-child { - margin-right: 0; } +.results-content { + background-color: #BDC4CD; + width: 100%; + overflow: hidden; } + .results-content:after { + content: ""; + display: table; + clear: both; } + +.results-container { + padding: 10px; + padding: 1rem; + -webkit-transition: left, 0.2s; + -moz-transition: left, 0.2s; + transition: left, 0.2s; + background: #fff; + position: relative; + width: 100%; + left: 0; + height: 100%; } + +* { + margin: 0; } + +body, +html { + height: 100%; } body { padding: 0; margin: 0; } +.page-wrap { + min-height: 100%; } + .page-wrap:after { + content: ""; + display: block; } + .container { max-width: 68em; margin-left: auto; diff --git a/templates/candidates-single.html b/templates/candidates-single.html index eb33da247..a635f80a0 100644 --- a/templates/candidates-single.html +++ b/templates/candidates-single.html @@ -6,11 +6,11 @@ {% block body %}
-
+

{{ name }}

- Candidate for {{ office }} + Icon representing candidates Candidate for {{ office }}
{% include 'partials/financial-summary.html' %} @@ -85,5 +91,5 @@

Explore:

- + {% endblock %} diff --git a/templates/committees.html b/templates/committees.html index c75ce3721..8db371c44 100644 --- a/templates/committees.html +++ b/templates/committees.html @@ -5,158 +5,148 @@ {% endblock %} {% block body %} -
-
-

{{heading}}

+
+

Icon representing committees Browse committee records

+
-
-
-
-
-
- Filter committees -
- -
-
-
-
- -
- - -
-
- -
- - -
- -
- - -
+
+ + {% if pagination %} + {% include 'partials/pagination.html' %} + {% endif %} +
-
- - -
+
+
+ +
+ + +
-
- - -
+
+ + +
-
- - -
-
- -
- -
-
-
+
+ + +
+
+ + +
+
+ + +
-
- {% include 'partials/committees-table.html' %} -
-
-
+
+ + +
+
+ +
+ +
+
+ {% include 'partials/committees-table.html' %} +
+ {% endblock %} diff --git a/templates/layouts/main.html b/templates/layouts/main.html index 52f1b88b7..7bf3cab3a 100644 --- a/templates/layouts/main.html +++ b/templates/layouts/main.html @@ -10,23 +10,54 @@ +
+
+
+ Looking for fec.gov? Click here. + An official website of the United States Government US flag signifying that this is a United States Federal Government website + This site is in development. +
+
+ +
+ +
+
+
-
-
- An official website of the United States Government US flag signifying that this is a United States Federal Government website -
-
- -
-
+ {% block header %}{% endblock %} -{% block header %}{% endblock %} + - +
+ {% block body %}{% endblock %} +
+
+ diff --git a/templates/partials/candidates-table.html b/templates/partials/candidates-table.html index f54d6211a..a35eacb92 100644 --- a/templates/partials/candidates-table.html +++ b/templates/partials/candidates-table.html @@ -1,11 +1,7 @@ -{% if pagination %} - {% include 'partials/pagination.html' %} -{% endif %} - - + @@ -25,8 +21,4 @@ {% endfor %} -
NameName Office Election Party
- -{% if pagination %} - {% include 'partials/pagination.html' %} -{% endif %} + \ No newline at end of file diff --git a/templates/partials/committee-summary.html b/templates/partials/committee-summary.html index 5e41d9c41..d6b9a0cc3 100644 --- a/templates/partials/committee-summary.html +++ b/templates/partials/committee-summary.html @@ -1,62 +1,70 @@
-
- {{ committee.designation }} -

{{ committee.name }}

+
+ Icon representing committees
+
+
+

{{ committee.name }}

+ {{ committee.designation }} +
-
-
-
-

Quick Links

- -
-
-

Totals for {{committee.totals.years_totals}}

-
-
-
Total receipts
-
{{committee.totals.total_receipts}}
-
-
-
Total disbursements
-
{{committee.totals.total_disbursements}}
-
-
- Calculated from reports filed {{committee.totals.report_year}} -
+
+
+
+

Quick Links

+
-
-
-
Cash on hand
-
{{committee.totals.total_cash}}
-
-
-
Debt
-
{{committee.totals.total_debt}}
+
+

Totals for {{committee.totals.years_totals}}

+
+
+
Total receipts
+
{{committee.totals.total_receipts}}
+
+
+
Total disbursements
+
{{committee.totals.total_disbursements}}
+
+
+ Calculated from reports filed {{committee.totals.report_year}} +
-
- Source: {{committee.totals.report_desc}} +
+
+
Cash on hand
+
{{committee.totals.total_cash}}
+
+
+
Debt
+
{{committee.totals.total_debt}}
+
+
+ Source: {{committee.totals.report_desc}} +
+
+
+
+
+
+

Finances over time

+
-
-
-
-
-

Finances over time

-
-
-
-
-

Finances over time

-
+
+
+

Finances over time

+
+
+
-
-
+
+ +
diff --git a/templates/partials/committees-table.html b/templates/partials/committees-table.html index 8880dd29f..78cfb68d0 100644 --- a/templates/partials/committees-table.html +++ b/templates/partials/committees-table.html @@ -1,11 +1,7 @@ -{% if pagination %} - {% include 'partials/pagination.html' %} -{% endif %} - - + @@ -17,7 +13,7 @@ {% for c in committees %} - + @@ -27,8 +23,4 @@ {% endfor %} -
NameName Treasurer Name State Party
{{c.name}}{{c.name}} {{c.treasurer}} {{c.state}} {{c.party}}
- -{% if pagination %} - {% include 'partials/pagination.html' %} -{% endif %} + \ No newline at end of file diff --git a/templates/partials/page-nav.html b/templates/partials/page-nav.html index 395c10006..e69de29bb 100644 --- a/templates/partials/page-nav.html +++ b/templates/partials/page-nav.html @@ -1,16 +0,0 @@ - - - diff --git a/templates/partials/pagination.html b/templates/partials/pagination.html index eed149417..04962bb0b 100644 --- a/templates/partials/pagination.html +++ b/templates/partials/pagination.html @@ -1,20 +1,18 @@ {% if pagination.results_count %} -
-
-

Results: {{pagination.results_count}} records

- {% if pagination.results_range %} -

Viewing: {{pagination.current_results_start}} - {{pagination.current_results_end}}

- {% endif %} -
+
+ {% endif %} diff --git a/templates/partials/search-bar.html b/templates/partials/search-bar.html index cc664c6ce..ffb352e57 100644 --- a/templates/partials/search-bar.html +++ b/templates/partials/search-bar.html @@ -5,7 +5,7 @@

Explore campaign finance data

- +