From 3bff57cd0b326a0209214a7aea6e8333fa606a16 Mon Sep 17 00:00:00 2001
From: Derek Eder <derek.eder@gmail.com>
Date: Fri, 7 Jun 2024 16:02:07 -0500
Subject: [PATCH] using rows and columns styles on compare alders page for
 mobile

---
 .../templates/compare_council_members.html    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/chicago/templates/compare_council_members.html b/chicago/templates/compare_council_members.html
index 6599a6f..fdb1e01 100644
--- a/chicago/templates/compare_council_members.html
+++ b/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>