Skip to content
This repository has been archived by the owner on Dec 23, 2017. It is now read-only.

Feature/panel layout mobile #377

Merged
merged 6 commits into from
Jul 31, 2015
Merged

Feature/panel layout mobile #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9c12e4d
Just the button on the mobile layout
Jul 28, 2015
e25dce9
Container styling for new panel
Jul 28, 2015
24a58c8
Complete mobile styling of tables
Jul 28, 2015
8ce129c
Merge remote-tracking branch 'upstream/develop' into feature/panel_la…
Jul 29, 2015
88199e9
Fixes to layout, old table
Jul 29, 2015
f78b193
Modify height of container of panel
Jul 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions static/js/modules/tables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
}

Expand Down Expand Up @@ -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_'
},
Expand Down
12 changes: 9 additions & 3 deletions static/styles/_base/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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);
}
}

.panel-active .dataTables_wrapper {
overflow: hidden;
height: 118vh;
}
5 changes: 5 additions & 0 deletions static/styles/_components/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
34 changes: 31 additions & 3 deletions static/styles/_components/_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@

.panel__overlay {
background: $meta-box-color;
@include transform(translateX(100%));
background: $lightest-gray;
bottom: 0;
left: 0;
padding: 1em 2em;
position: fixed;
position: absolute;
top: 0;
width: 100%;
z-index: 200;

&[aria-hidden="false"] {
@include transform(translateX(0%));
}
}

.panel {
background: $lightest-gray;
padding: 2rem 1rem;
}

.panel__row {
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;
}
}
}
139 changes: 81 additions & 58 deletions static/templates/donation.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,83 @@
<table>
<tr>
<td>Name</td>
{{#if contributor}}
<td><a href="/committee/{{contributor.committee_id}}">{{contributor.name}}</a></td>
{{else}}
<td>{{contributor_name}}</td>
{{/if}}
</tr>
<tr>
<td>City & State</td>
<td>{{ contributor_city }}, {{ contributor_state }}, {{ contributor_zip }}</td>
</tr>
<tr>
<td>Year to Date</td>
<td>{{{ currency contributor_aggregate_ytd }}}</td>
</tr>
</table>
<div class="panel__row">
<h4>Contributer Information</h3>
<table>
<tr>
<td>Name</td>
{{#if contributor}}
<td>
<a href="/committee/{{contributor.committee_id}}">
{{contributor.name}}
</a>
</td>
{{else}}
<td>{{contributor_name}}</td>
{{/if}}
</tr>
<tr>
<td>City & State</td>
<td>
{{ contributor_city }}, {{ contributor_state }}, {{ contributor_zip }}
</td>
</tr>
<tr>
<td>Occupation</td>
<td>{{ contributor_occupation }}</td>
</tr>
<tr>
<td>Year to Date</td>
<td>{{{ currency contributor_aggregate_ytd }}}</td>
</tr>
</table>
</div>

<table>
<tr>
<td>Amount</td>
<td>{{{ currency contributor_receipt_amount }}}</td>
</tr>
<tr>
<td>Receipt Date</td>
<td>{{{ datetime contributor_receipt_date }}}</td>
</tr>
<tr>
<td>Memo</td>
<td>{{ memo_text }}</td>
</tr>
<tr>
<td>Election Type</td>
<td>{{ election_type_full }}</td>
</tr>
<tr>
<td>Image</td>
<td><a href="{{ pdf_url }}">View original image</a></td>
</tr>
</table>
<div class="panel__row">
<h4>Contribution Information</h4>
<table>
<tr>
<td>Amount</td>
<td>{{{ currency contributor_receipt_amount }}}</td>
</tr>
<tr>
<td>Receipt Date</td>
<td>{{{ datetime contributor_receipt_date }}}</td>
</tr>
<tr>
<td>Memo</td>
<td>{{ memo_text }}</td>
</tr>
<tr>
<td>Election Type</td>
<td>{{ election_type_full }}</td>
</tr>
<tr>
<td>Type</td>
<td>{{ election_type_full }}</td>
</tr>
<tr>
<td>Image</td>
<td><a href="{{ pdf_url }}">View original image</a></td>
</tr>
</table>
</div>

<table>
<tr>
<td>Committee</td>
<td><a href="/committee/{{ committee.committee_id }}/">{{ committee.name }}</a></td>
</tr>
<tr>
<td>Political Party</td>
<td>{{ committee.party_full }}</td>
</tr>
<tr>
<td>Type</td>
<td>{{ committee.committee_type_full }}</td>
</tr>
<tr>
<td>State</td>
<td>{{ committee.state_full }}</td>
</tr>
</table>
<div class="panel__row">
<h4>Recipient Information</h4>
<table>
<tr>
<td>Committee</td>
<td><a href="/committee/{{ committee.committee_id }}/">{{ committee.name }}</a></td>
</tr>
<tr>
<td>Political Party</td>
<td>{{ committee.party_full }}</td>
</tr>
<tr>
<td>Type</td>
<td>{{ committee.committee_type_full }}</td>
</tr>
<tr>
<td>State</td>
<td>{{ committee.state_full }}</td>
</tr>
</table>
</div>
26 changes: 13 additions & 13 deletions templates/receipts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ <h1><img width="32" height="32" class="category-icon" src="/static/img/icon-comm
<div id="datatable-modal" class="panel__overlay" aria-hidden="true">
<div class="panel">
<div class="panel__row">
<button title="Close menu" class="js-hide panel__close" data-hides="datatable-modal">
<i class="ti-close"></i></button>
<strong>
<a href="#" class="js-hide js-panel-close panel__close"
data-hides="datatable-modal">
<i class="icon icon--bold ti-angle-left"></i>
View all
</a>
</strong>
</div>
<div class="panel__row">
<h3>Donation Detail</h3>
<nav class="panel__nav">
<div class="js-panel-content panel__content">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</nav>
<div class="js-panel-content panel__content">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
</div>
Expand Down