+
+{{!-- TODO: should this table have a title? I don't like the wider widths when it doesn't --}}
+
- {{#panelRow "Total receipts"}}
+ {{#dtDetailsTableRow "Total receipts"~}}
{{{currency total_receipts_period}}}
- {{/panelRow}}
- {{#panelRow "Total disbursements"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Total disbursements"~}}
{{{currency total_disbursements_period}}}
- {{/panelRow}}
- {{#panelRow "Individual contributions"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Individual contributions"~}}
{{{currency total_individual_contributions_period}}}
- {{/panelRow}}
- {{#panelRow "Itemized individual contributions"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Itemized individual contributions"~}}
{{{currency individual_itemized_contributions_period}}}
- {{/panelRow}}
- {{#panelRow "Unitemized individual contributions"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Unitemized individual contributions"~}}
{{{currency individual_unitemized_contributions_period}}}
- {{/panelRow}}
- {{#panelRow "Beginning cash on hand"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Beginning cash on hand"~}}
{{{currency cash_on_hand_beginning_period}}}
- {{/panelRow}}
- {{#panelRow "Ending cash on hand"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Ending cash on hand"~}}
{{{currency cash_on_hand_end_period}}}
- {{/panelRow}}
- {{#panelRow "Net contributions"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Net contributions"~}}
{{{currency net_contributions_period}}}
- {{/panelRow}}
- {{#panelRow "Net operating expenditures"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Net operating expenditures"~}}
{{{currency net_operating_expenditures_period}}}
- {{/panelRow}}
- {{#panelRow "Debts owed by committee"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Debts owed by committee"~}}
{{{currency debts_owed_by_committee}}}
- {{/panelRow}}
- {{#panelRow "Coordinated expenditures by party committee this period"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Coordinated expenditures by party committee this period"~}}
{{{currency coordinated_expenditures_by_party_committee_period}}}
- {{/panelRow}}
- {{#panelRow "Independent expenditures this period"}}
+ {{/dtDetailsTableRow}}
+ {{#dtDetailsTableRow "Independent expenditures this period"~}}
{{{currency independent_expenditures_period}}}
- {{/panelRow}}
+ {{/dtDetailsTableRow}}
diff --git a/fec/fec/static/scss/components/_buttons.scss b/fec/fec/static/scss/components/_buttons.scss
index caa7adfd51..2779d9799a 100644
--- a/fec/fec/static/scss/components/_buttons.scss
+++ b/fec/fec/static/scss/components/_buttons.scss
@@ -439,9 +439,15 @@
padding: 0;
}
-.button--panel {
+.button--dt-details {
+ background-position-y: 5%;
background-size: 90%;
- @include u-icon($arrow-right-circle, $gray, 2rem, 2rem, contain);
+ @include u-icon($plus-circle, $primary, 2rem, 2rem, contain);
+}
+tr.dt-hasChild .button--dt-details {
+ background-position-y: 5%;
+ background-size: 90%;
+ @include u-icon($minus-circle, $primary, 2rem, 2rem, contain);
}
.button--nav-panel {
diff --git a/fec/fec/static/scss/components/_datatable-details-row.scss b/fec/fec/static/scss/components/_datatable-details-row.scss
new file mode 100644
index 0000000000..30ac9a6daf
--- /dev/null
+++ b/fec/fec/static/scss/components/_datatable-details-row.scss
@@ -0,0 +1,102 @@
+.dt-details {
+ font-family: "karla", sans-serif;
+ position: relative;
+
+ .dt-details__nav {
+ text-align: right;
+ width: 100%;
+
+ @include media($xl) {
+ position: absolute;
+ right: 0;
+ width: 50%;
+ }
+ }
+
+ .dt-details__sect {
+ padding-bottom: 1rem;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #f1f1f1;
+ }
+
+ @include media($med) {
+ &.odd {
+ border-right: 1px solid #f1f1f1;
+ padding-right: 1rem;
+ }
+ &.even {
+ padding-left: 1rem;
+ }
+ }
+ }
+
+ .dt-details__heading {
+ border-bottom: 1px solid #f1f1f1;
+ margin-bottom: 1rem;
+ padding-bottom: 1rem;
+
+ .dt-details__title {
+ margin-bottom: 0;
+ }
+ }
+
+ table {
+ caption {
+ font-size: 1.8rem;
+ line-height: 1.2;
+ margin: 0 0 1em;
+ font-weight: 700;
+ letter-spacing: -.3px;
+ margin-top: 1rem;
+ text-align: left;
+ }
+
+ tr {
+ background-color: transparent;
+ border: none;
+
+ td, th[scope="row"] {
+ background-color: transparent;
+ box-sizing: inherit;
+ border: none !important;
+ border-collapse: collapse;
+ letter-spacing: -.3px;
+ font-size: 1.4rem;
+ line-height: 1.4em;
+ padding-bottom: 1rem;
+ padding-top: 0;
+ vertical-align: top;
+ }
+
+ th[scope="row"] {
+ // border-bottom: none;
+ font-weight: 700;
+ padding-left: 0 !important;
+ padding-right: 2rem;
+ }
+ }
+
+ }
+ @include media($med) {
+ .dt-details__content {
+ display: flex;
+ flex-wrap: wrap;
+
+ & > .dt-details__sect {
+ width: 50%;
+ }
+ & > .dt-details__title {
+ width: 100%;
+ }
+ // For full-width row
+ & > .dt-details__sect-full {
+ width: 100%;
+
+ table {
+ width: auto;
+ }
+ }
+ }
+ }
+}
diff --git a/fec/fec/static/scss/components/_datatable-panel.scss b/fec/fec/static/scss/components/_datatable-panel.scss
deleted file mode 100644
index ef8f3b15f2..0000000000
--- a/fec/fec/static/scss/components/_datatable-panel.scss
+++ /dev/null
@@ -1,286 +0,0 @@
-// Datatable Panel
-//
-
-.panel__main {
- left: 0;
- clear: both;
- position: relative;
- width: 200%;
- z-index: $z1;
- @include clearfix;
-
- .data-table {
- float: left;
- width: 50% !important;
- }
-}
-
-.results-info {
- position: relative;
-}
-
-// modal
-.panel__overlay {
- background-color: $inverse;
- overflow: hidden;
- padding: u(1rem);
- float: right;
- width: 50%;
- opacity: 0;
- @include transition(opacity 0.2s);
-}
-
-// Open panel
-.panel-active {
- .dataTables_wrapper {
- height: auto;
- overflow: hidden;
- position: relative;
- }
-
- .data-table {
- position: absolute;
- }
-
- .panel__overlay {
- min-height: 100vh;
- opacity: 1;
- }
-
- .panel__main {
- left: -100%;
- overflow: hidden;
- }
-
- .panel {
- min-height: 100vh;
- }
-}
-
-.panel {
- background-color: rgba($gray-lightest, 0.3);
- border: 1px solid $gray-lightest;
- font-family: $sans-serif;
- padding: u(1rem);
-
- td {
- padding-bottom: u(1rem);
- vertical-align: top;
- }
-}
-
-.panel__heading {
- border-bottom: 1px solid $neutral;
- margin-bottom: u(1rem);
- padding-bottom: u(1rem);
-
- .panel__title {
- margin-bottom: 0;
- }
-}
-
-.panel__title {
- font-weight: bold;
- letter-spacing: -0.3px;
- margin-top: u(1rem);
-}
-
-.panel__subtitle {
- font-family: $sans-serif;
-}
-
-.panel__row {
- padding: u(2rem 0 1rem 0);
- border-bottom: 1px solid $neutral;
-
- &:last-child {
- border-bottom: none;
- }
-}
-
-.panel__term {
- font-weight: bold;
- letter-spacing: -0.3px;
- line-height: 1.4em;
- padding-right: u(2rem);
- vertical-align: top;
-}
-.panel__data {
- line-height: 1.4em;
-}
-
-// Panel Navigation
-//
-// The top bar of the panel
-//
-// .panel__link - Link to source page or document. Floats to the left on desktop and to the right on mobile
-// .panel__close - Closes the panel. Shows up as a back arrow on the left on mobile and an x on the right on desktop
-
-.panel__navigation {
- border-bottom: 1px solid $gray-lightest;
- padding: u(0 0 1rem 0);
- text-align: right;
- @include clearfix;
-}
-
-.panel__link {
- float: right;
-}
-
-.panel__close {
- background-position: 0 50%;
- background-size: u(1.5rem);
- border: none;
- cursor: pointer;
- float: left;
- padding-left: u(3rem);
- @include u-icon-bg($arrow-left-border, $primary);
-
- &::after {
- content: 'Show all';
- }
-}
-
-// BREAKPOINT: MEDIUM
-// Panel slides next to the table
-
-@include media($med) {
- .panel__main {
- height: 100%;
- width: 100%;
-
- .data-table {
- width: 100% !important;
- }
-
- &.legal-search-results {
- width: 100% !important;
- height: auto;
- }
- }
-
- .panel__overlay {
- background-color: rgba($gray-lightest, 0.3);
- border-left: 1px solid $gray-lightest;
- min-height: 70vh;
- height: 100%;
- width: 50%;
- left: 100%;
-
- &[aria-hidden='false'] {
- left: 50%;
- }
- }
-
- .panel-active {
- .panel__main {
- max-height: 100%;
- position: relative;
- }
-
- .data-table {
- position: relative;
- }
- }
-
- .panel {
- padding: 0;
- background: none;
- border: none;
- }
-
- .panel__navigation {
- padding: u(0.6rem 2rem);
- text-align: left;
- margin-bottom: 0;
- }
-
- .panel__link {
- float: left;
- }
-
- .panel__close {
- background-size: u(2rem);
- position: absolute;
- right: 0;
- top: 0;
- @include u-icon($x, $primary);
-
- &::after {
- content: '';
- }
- }
-
- // Open panel
-
- .panel-active {
- .panel__main {
- left: 0;
- width: 100%;
- min-height: u(150rem);
- height: auto;
- overflow: visible;
- }
-
- .panel__overlay {
- min-height: u(150rem);
- }
-
- .data-table {
- width: 50% !important;
- @include transform(translateX(0));
- }
-
- .dataTables_wrapper {
- overflow: visible;
- }
- }
-
- .panel__row {
- padding: u(1rem 1.8rem);
- margin-top: 0;
-
- &:last-child {
- border-bottom: none;
- }
- }
-}
-
-// Specifying in order to override datatable styles
-.data-table .panel__row {
- table {
- border: 0;
- }
-
- tr {
- background-color: transparent;
- border-bottom: none;
- }
-
- td {
- border-bottom: 0;
- padding: u(0.3rem 0);
- white-space: pre-wrap;
- overflow: visible;
-
- &:first-child {
- font-weight: bold;
- }
- }
-}
-
-#datatable-modal .panel .panel__row {
- // TODO This selector is overly specific because of a very specific selector in the tables.scss
- // file which has to be refactored.
- @include media($med) {
- td {
- padding-left: 0 !important;
- vertical-align: bottom;
-
- &.panel__term,
- &.panel__data {
- vertical-align: top;
- }
- }
- }
-}
diff --git a/fec/fec/static/scss/components/_datatables.scss b/fec/fec/static/scss/components/_datatables.scss
index 3e0ac44e1e..8e3937b1d6 100644
--- a/fec/fec/static/scss/components/_datatables.scss
+++ b/fec/fec/static/scss/components/_datatables.scss
@@ -112,7 +112,7 @@
border-bottom: 1px solid $neutral;
&.row-color-contrast,
- &:nth-child(even) {
+ &.even {
background-color: rgba($gray-lightest, 0.5);
}
@@ -235,8 +235,9 @@
}
// Special styles for rows that trigger panels
-.row--has-panel {
+.row--has-details {
cursor: pointer;
+
@include transition(border-left-width, 0.2s);
}
diff --git a/fec/fec/static/scss/components/_table-styles.scss b/fec/fec/static/scss/components/_table-styles.scss
index b235391880..ff79e1ba8b 100644
--- a/fec/fec/static/scss/components/_table-styles.scss
+++ b/fec/fec/static/scss/components/_table-styles.scss
@@ -114,7 +114,7 @@ h3 + .simple-table {
.simple-table__row {
padding: u(1rem);
- &:nth-child(even) {
+ &.even {
background-color: rgba($gray-lightest, 0.5);
}
}
diff --git a/fec/fec/static/scss/datatables.scss b/fec/fec/static/scss/datatables.scss
index 051653976c..7c325d8365 100644
--- a/fec/fec/static/scss/datatables.scss
+++ b/fec/fec/static/scss/datatables.scss
@@ -2,7 +2,7 @@
@import 'components/accordions';
@import 'components/messages';
-@import 'components/datatable-panel';
+@import 'components/datatable-details-row';
@import 'components/datatables';
@import 'components/results-info';
@import 'components/downloads';
diff --git a/fec/fec/static/scss/entity.scss b/fec/fec/static/scss/entity.scss
index 1b5191621a..52d7bef5a1 100644
--- a/fec/fec/static/scss/entity.scss
+++ b/fec/fec/static/scss/entity.scss
@@ -2,15 +2,12 @@
@import 'base';
@import 'common';
-@import 'components/entity-header';
+@import 'components/callouts';
@import 'components/candidate-page';
+@import 'components/committee-snapshot';
@import 'components/data-container';
-@import 'components/datatable-panel';
-@import 'components/downloads';
@import 'components/datatables';
-@import 'components/datatable-panel';
@import 'components/downloads';
-@import 'components/table-styles';
+@import 'components/entity-header';
@import 'components/results-info';
-@import 'components/callouts';
-@import 'components/committee-snapshot';
+@import 'components/table-styles';
diff --git a/fec/fec/tests/js/tables.js b/fec/fec/tests/js/tables.js
index a6013466b7..1d3baaefb9 100644
--- a/fec/fec/tests/js/tables.js
+++ b/fec/fec/tests/js/tables.js
@@ -9,9 +9,6 @@ use(sinonChai);
import { default as URI } from 'urijs';
import { default as _extend } from 'underscore/modules/extend.js';
-// require('datatables.net')();
-// require('datatables.net-responsive')();
-
import { candidateColumn, committeeColumn, supportOpposeColumn } from '../../static/js/modules/columns.js';
import { buildTotalLink } from '../../static/js/modules/column-helpers.js';
import { buildUrl } from '../../static/js/modules/helpers.js';