Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile styles for alder donations and compare alder page #422

Merged
merged 3 commits into from
Jun 7, 2024
Merged

Mobile styles for alder donations and compare alder page #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a5baf96
add background color to processing div
derekeder Jun 7, 2024
1838bf7
rendering donations as cards on mobile
derekeder Jun 7, 2024
3bff57c
using rows and columns styles on compare alders page for mobile
derekeder Jun 7, 2024
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
5 changes: 5 additions & 0 deletions chicago/static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ h4 {
border-radius: 0px;
padding: 12px 10px 12px 10px;
color: #3d8a8e;
border-bottom: 8px solid #ffffff;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
Expand Down Expand Up @@ -502,6 +503,10 @@ fieldset[disabled] .form-control {
background-color: #fff;
}

div.dataTables_wrapper div.dataTables_processing {
background-color: #ffffffbb;
}

@media only screen and (max-width: 768px) {
/* Force table to not be like tables anymore */
table.rows-and-columns,
Expand Down
24 changes: 19 additions & 5 deletions chicago/templates/compare_council_members.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h1>Compare Alders</h1>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table class='table' id='council-members'>
<table class='table rows-and-columns' id='council-members'>
<thead>
<tr>
<th></th>
Expand All @@ -36,17 +36,31 @@ <h1>Compare Alders</h1>
</div>
</td>
<td>
<span class="visible-xs-block small-table-header">Alder</span>
{{ person.link_html | safe }}
</td>
<td>{{ person.latest_council_membership.post.label }}</td>
<td>{{ person.years_in_office }}</td>
<td>
<span class="visible-xs-block small-table-header">Ward</span>
{{ person.latest_council_membership.post.label }}
</td>
<td>
<span class="visible-xs-block small-table-header">Years in office</span>
{{ person.years_in_office }}
</td>
<td>
<span class="visible-xs-block small-table-header">Non-routine bills sponsored</span>
<a href='/search/?q=&selected_facets=sponsorships_exact:{{person.name}}&selected_facets=topics_exact%3ANon-Routine'>
{{ person.statistics.legislation_count }} bills
</a>
</td>
<td>{{ person.statistics.attendance_percent }}</td>
<td>{{ person.caucus }}</td>
<td>
<span class="visible-xs-block small-table-header">Attendance (this session)</span>
{{ person.statistics.attendance_percent }}
</td>
<td>
<span class="visible-xs-block small-table-header">Caucus</span>
{{ person.caucus }}
</td>
</tr>
{% endfor %}
</tbody>
Expand Down
84 changes: 45 additions & 39 deletions chicago/templates/person.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ <h3>Campaign Donations</h3>
<p><a href="https://illinoissunshine.org/candidates/{{ person.candidate_id }}/" target="_blank">Explore more campaign donations for <strong>{{person.name}}</strong> on Illinois Sunshine ></a></p>

<div class="table-responsive">
<table id="campaign-donations" class="table">
<table id="campaign-donations" class="table rows-and-columns">
<thead>
<tr>
<th>Commitee Name</th>
Expand All @@ -228,19 +228,6 @@ <h3>Campaign Donations</h3>
<th>Filing</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Commitee Name</th>
<th>Received Date</th>
<th>Amount</th>
<th>Type</th>
<th>Donor Name</th>
<th>Occupation</th>
<th>Employer</th>
<th>City, State Zip</th>
<th>Filing</th>
</tr>
</tfoot>
</table>
</div>
{% endif %}
Expand Down Expand Up @@ -336,42 +323,61 @@ <h3>Tools</h3>
{% if person.candidate_id %}
<!-- Campaign Donations table -->
<script type="text/javascript" language="javascript" class="init">
function addHeader(keyName, formatter) {
function addKeyedHeader(data, type, row, meta) {
if (formatter){
if (formatter.display) {
data = formatter.display(data, type, row, meta)
}
else {
data = formatter(data, type, row, meta)
}
}

return `<span class="visible-xs-block small-table-header">${keyName}</span>
${data? data : "&nbsp;"}`
}
return addKeyedHeader
}

function formatFilingLink(data, type, row, meta) {
if (type === "display") {
const encoded_doc_id = encodeURIComponent(row.filed_doc_id);
let path = "";
switch (row.doc_name) {
case "A-1":
path = `A1List.aspx?FiledDocID=${encoded_doc_id}&ContributionType=wOGh3QTPfKqV2YWjeRmjTeStk426RfVK&Archived=Gl5sibpnFrQ%3d`;
break;
case "Final":
path = `D2Semiannual.aspx?id=${encoded_doc_id}`;
break;
default:
path = `D2Quarterly.aspx?id=${encoded_doc_id}`;
}
return `<a href="https://www.elections.il.gov/CampaignDisclosure/${path}">${row.filed_doc_id}</a>`;
}
}

$(document).ready(function () {

$("#campaign-donations").DataTable({
columns: [
{ data: "committee_name" },
{ data: "received_date" },
{ data: "committee_name", render: addHeader("Committee Name") },
{ data: "received_date", render: addHeader("Received Date") },
{
data: "amount",
render: $.fn.dataTable.render.number(",", ".", 0, "$"),
render: addHeader("Amount", $.fn.dataTable.render.number(",", ".", 0, "$")),
className: "dt-body-right",
},
{ data: "type" },
{ data: "name" },
{ data: "occupation" },
{ data: "employer" },
{ data: "city_state_zip" },
{ data: "type", render: addHeader("Type") },
{ data: "name", render: addHeader("Name") },
{ data: "occupation", render: addHeader("Occupation") },
{ data: "employer", render: addHeader("Employer")},
{ data: "city_state_zip", render: addHeader("City, State, Zip") },
{
data: "filed_doc_id",
defaultContent: "",
render: function (data, type, row, meta) {
if (type === "display") {
const encoded_doc_id = encodeURIComponent(row.filed_doc_id);
let path = "";
switch (row.doc_name) {
case "A-1":
path = `A1List.aspx?FiledDocID=${encoded_doc_id}&ContributionType=wOGh3QTPfKqV2YWjeRmjTeStk426RfVK&Archived=Gl5sibpnFrQ%3d`;
break;
case "Final":
path = `D2Semiannual.aspx?id=${encoded_doc_id}`;
break;
default:
path = `D2Quarterly.aspx?id=${encoded_doc_id}`;
}
return `<a href="https://www.elections.il.gov/CampaignDisclosure/${path}">${row.filed_doc_id}</a>`;
}
},
render: addHeader("Filing", formatFilingLink)
},
],
order: [[1, "desc"]],
Expand Down