From 9c12e4df70fca5876b6d06b0e282c77474f838c8 Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Mon, 27 Jul 2015 17:04:49 -0700 Subject: [PATCH 1/5] Just the button on the mobile layout --- templates/receipts.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/templates/receipts.html b/templates/receipts.html index 74ec250ff..622ab6b95 100644 --- a/templates/receipts.html +++ b/templates/receipts.html @@ -20,8 +20,13 @@

- + + + + View all + +

Donation Detail

From e25dce9bcca467011755356f91398b273eb6fc2d Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Tue, 28 Jul 2015 13:56:04 -0700 Subject: [PATCH 2/5] Container styling for new panel Styles the panel with the correct marigins based on the design. --- static/styles/_components/_icons.scss | 5 +++++ static/styles/_components/_panel.scss | 14 ++++++++++++-- templates/receipts.html | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/static/styles/_components/_icons.scss b/static/styles/_components/_icons.scss index 18ce39007..fdc3491c0 100644 --- a/static/styles/_components/_icons.scss +++ b/static/styles/_components/_icons.scss @@ -1,3 +1,8 @@ + +.icon--bold { + font-weight: 900; +} + // category-icons are the candidate, committee or contribution icons .category-icon { margin-right: 5px; margin-right: .5rem; diff --git a/static/styles/_components/_panel.scss b/static/styles/_components/_panel.scss index 10fe54c11..246c951d0 100644 --- a/static/styles/_components/_panel.scss +++ b/static/styles/_components/_panel.scss @@ -1,11 +1,21 @@ .panel__overlay { - background: $meta-box-color; + background: $lightest-gray; bottom: 0; left: 0; - padding: 1em 2em; position: fixed; top: 0; width: 100%; z-index: 200; } + +.panel { + background: $lightest-gray; + padding: 2rem 1rem; +} + +.panel__row { + background: white; + margin-top: 3px; + padding: .65rem 1.5rem; +} diff --git a/templates/receipts.html b/templates/receipts.html index 622ab6b95..d7262f215 100644 --- a/templates/receipts.html +++ b/templates/receipts.html @@ -23,7 +23,7 @@

- + View all From 24a58c8d2dd06786fd696ffb03b2908fb8e7a8ad Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Tue, 28 Jul 2015 14:28:45 -0700 Subject: [PATCH 3/5] Complete mobile styling of tables --- static/styles/_components/_panel.scss | 13 +++ static/templates/donation.hbs | 139 +++++++++++++++----------- templates/receipts.html | 17 ++-- 3 files changed, 100 insertions(+), 69 deletions(-) diff --git a/static/styles/_components/_panel.scss b/static/styles/_components/_panel.scss index 246c951d0..0463d8e06 100644 --- a/static/styles/_components/_panel.scss +++ b/static/styles/_components/_panel.scss @@ -18,4 +18,17 @@ background: white; margin-top: 3px; padding: .65rem 1.5rem; + + table { + border: 0; + } + + td { + border-bottom: 0; + padding: .3rem 0 !important; + + &:first-child { + font-weight: bold; + } + } } diff --git a/static/templates/donation.hbs b/static/templates/donation.hbs index 4779cf6e8..9a6652f5e 100644 --- a/static/templates/donation.hbs +++ b/static/templates/donation.hbs @@ -1,60 +1,83 @@ - - - - {{#if contributor}} - - {{else}} - - {{/if}} - - - - - - - - - -
Name{{contributor.name}}{{contributor_name}}
City & State{{ contributor_city }}, {{ contributor_state }}, {{ contributor_zip }}
Year to Date{{{ currency contributor_aggregate_ytd }}}
+
+

Contributer Information

+ + + + {{#if contributor}} + + {{else}} + + {{/if}} + + + + + + + + + + + + + +
Name + + {{contributor.name}} + + {{contributor_name}}
City & State + {{ contributor_city }}, {{ contributor_state }}, {{ contributor_zip }} +
Occupation{{ contributor_occupation }}
Year to Date{{{ currency contributor_aggregate_ytd }}}
+
- - - - - - - - - - - - - - - - - - - - - -
Amount{{{ currency contributor_receipt_amount }}}
Receipt Date{{{ datetime contributor_receipt_date }}}
Memo{{ memo_text }}
Election Type{{ election_type_full }}
ImageView original image
+
+

Contribution Information

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Amount{{{ currency contributor_receipt_amount }}}
Receipt Date{{{ datetime contributor_receipt_date }}}
Memo{{ memo_text }}
Election Type{{ election_type_full }}
Type{{ election_type_full }}
ImageView original image
+
- - - - - - - - - - - - - - - - - -
Committee{{ committee.name }}
Political Party{{ committee.party_full }}
Type{{ committee.committee_type_full }}
State{{ committee.state_full }}
+
+

Recipient Information

+ + + + + + + + + + + + + + + + + +
Committee{{ committee.name }}
Political Party{{ committee.party_full }}
Type{{ committee.committee_type_full }}
State{{ committee.state_full }}
+
diff --git a/templates/receipts.html b/templates/receipts.html index d7262f215..4e3f186fb 100644 --- a/templates/receipts.html +++ b/templates/receipts.html @@ -28,17 +28,12 @@

-

Donation Detail

- +
+ + + + +

From 88199e985339f97c8c60fecc78211fb251d1b80d Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Wed, 29 Jul 2015 16:24:33 -0700 Subject: [PATCH 4/5] Fixes to layout, old table Changes the layout so it can easily slide in from the right due to design reasons. Removes the "details" aspect of the responsive tables plugin as it's no longer needed with the panel UI. --- static/js/modules/tables.js | 24 ++++++++++++++++++------ static/styles/_base/_tables.scss | 12 +++++++++--- static/styles/_components/_panel.scss | 7 ++++++- templates/receipts.html | 2 +- 4 files changed, 34 insertions(+), 11 deletions(-) diff --git a/static/js/modules/tables.js b/static/js/modules/tables.js index ebf99597b..7bf05b1e4 100644 --- a/static/js/modules/tables.js +++ b/static/js/modules/tables.js @@ -135,16 +135,26 @@ function mapQuerySeek(api, data) { } function modalAfterRender(template, api, data, response) { - var $table = $(api.table().node()); - $table.on('click', '.js-panel-toggle tr', function(e) { - var $row = $(e.target).closest('tr'); - if ($row.is('a')) { + var $table = $(api.table().node()), + $modal = $('#datatable-modal'); + + // Move the modal to the results div. + $modal.appendTo($('#results')); + + $table.on('click', '.js-panel-toggle tr', function(ev) { + if ($(ev.target).is('a')) { return true; } + var $row = $(ev.target).closest('tr'); var index = api.row($row).index(); - var $modal = $('#datatable-modal'); $modal.find('.js-panel-content').html(template(response.results[index])); $modal.attr('aria-hidden', 'false'); + $('body').toggleClass('panel-active', true); + }); + + $modal.on('click', '.js-panel-close', function(ev) { + ev.preventDefault(); + $('body').toggleClass('panel-active', false); }); } @@ -183,7 +193,9 @@ function initTable($table, $form, baseUrl, baseQuery, columns, callbacks, opts) searching: false, columns: columns, lengthMenu: [30, 50, 100], - responsive: true, + responsive: { + details: false + }, language: { lengthMenu: 'Results per page: _MENU_' }, diff --git a/static/styles/_base/_tables.scss b/static/styles/_base/_tables.scss index 18966fa5b..425393440 100644 --- a/static/styles/_base/_tables.scss +++ b/static/styles/_base/_tables.scss @@ -1,11 +1,12 @@ table, table.dataTable { + border: 1px solid $light-gray; border-collapse: collapse; margin: 0; + overflow-x: scroll; // scroll horizontally on smaller viewports + position: relative; table-layout: fixed; width: 100%; - overflow-x: scroll; // scroll horizontally on smaller viewports - border: 1px solid $light-gray; thead { tr:hover { @@ -389,4 +390,9 @@ table.dataTable tbody tr.child { .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid $light-gray; box-shadow: inset 0px -1px 4px 0px rgba(0,0,0,0.75); -} \ No newline at end of file +} + +.panel-active .dataTables_wrapper { + overflow: hidden; + height: 105vh; +} diff --git a/static/styles/_components/_panel.scss b/static/styles/_components/_panel.scss index 0463d8e06..467f77c4c 100644 --- a/static/styles/_components/_panel.scss +++ b/static/styles/_components/_panel.scss @@ -1,12 +1,17 @@ .panel__overlay { + @include transform(translateX(100%)); background: $lightest-gray; bottom: 0; left: 0; - position: fixed; + position: absolute; top: 0; width: 100%; z-index: 200; + + &[aria-hidden="false"] { + @include transform(translateX(0%)); + } } .panel { diff --git a/templates/receipts.html b/templates/receipts.html index 4e3f186fb..5c09b6cfc 100644 --- a/templates/receipts.html +++ b/templates/receipts.html @@ -21,7 +21,7 @@

- View all From f78b193f5e9f0624fb082638164d8e068e20b56f Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Thu, 30 Jul 2015 11:22:44 -0700 Subject: [PATCH 5/5] Modify height of container of panel This was done because if the height of the viewport is too short, the panel will be covered by the footer. This ensures the height is longer to fit it, but is problematic because the amount is arbituary. --- static/styles/_base/_tables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/styles/_base/_tables.scss b/static/styles/_base/_tables.scss index 425393440..12c5b8cfe 100644 --- a/static/styles/_base/_tables.scss +++ b/static/styles/_base/_tables.scss @@ -394,5 +394,5 @@ table.dataTable tbody tr.child { .panel-active .dataTables_wrapper { overflow: hidden; - height: 105vh; + height: 118vh; }