Merge pull request #422 from datamade/donations-styles

Mobile styles for alder donations and compare alder page

Author: derekeder

chicago/static/css/custom.css

@@ -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,
@@ -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,

chicago/templates/compare_council_members.html

@@ -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>
@@ -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>

chicago/templates/person.html

@@ -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>
@@ -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 %}
@@ -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"]],