Merge pull request #370 from datamade/sept-28-updates

Render tables as cards on mobile

chicago/static/css/custom.css

@@ -523,6 +523,48 @@ fieldset[disabled] .form-control {
   background-color: #fff;
 }
 
+@media only screen and (max-width: 768px) {
+  /* Force table to not be like tables anymore */
+  table.rows-and-columns,
+  .rows-and-columns thead,
+  .rows-and-columns tbody,
+  .rows-and-columns th,
+  .rows-and-columns td,
+  .rows-and-columns tr {
+    display: block;
+  }
+
+  /* Hide table headers (but not display: none;, for accessibility) */
+  .rows-and-columns thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .rows-and-columns tbody tr {
+    border: 1px solid #ccc;
+    margin-bottom: 1em;
+    padding: 0.2rem;
+  }
+
+  .rows-and-columns tbody > tr > td {
+    /* remove default table border */
+    border: none;
+    background-color: #fbfbfb;
+  }
+
+  .rows-and-columns tbody > tr > td ~ td {
+    /* add a top border to all elements but the first one */
+    border-top: 1px solid #ccc;
+  }
+}
+
+.small-table-header {
+  font-size: 0.8em;
+  font-weight: 900;
+  color: #777;
+}
+
 /* medium screens */
 @media only screen and (max-width: 767px) {
   .navbar-brand {

chicago/templates/event.html

@@ -24,15 +24,21 @@ <h1>{%if event.status == 'cancelled'%}CANCELLED: {% endif %}{{event.name}}</h1>
   </p>
 
   {% if event.video_vimeo_id %}
-    <iframe src="https://player.vimeo.com/video/{{event.video_vimeo_id}}?h=b9331c0f77&title=0" width="100%" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
-    <p><a href="https://vimeo.com/{{event.video_vimeo_id}}">View on Vimeo</a></p>
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="embed-responsive embed-responsive-16by9">
+          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/{{event.video_vimeo_id}}?h=b9331c0f77&title=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+        </div>
+        <p><a href="https://vimeo.com/{{event.video_vimeo_id}}">View on Vimeo</a></p>
+      </div>
+    </div>
   {% endif %}
   <hr />
   <div class="row">
     <div class="col-sm-10">
       {% if event.agenda.all %}
         <h4>Agenda: {{event.agenda.all|length}} items</h4>
-        <table class="table table table-responsive table-condensed">
+        <table class="table table-condensed rows-and-columns">
           <thead>
             <tr>
               <th>#</th>
@@ -45,15 +51,23 @@ <h4>Agenda: {{event.agenda.all|length}} items</h4>
             {% for agenda_item in event.agenda.all %}
               <tr>
                 {% if agenda_item.description|lower != 'page break' %}
-                  <td>{{ forloop.counter }}</td>
-                  <td>{{agenda_item.description}}</td>
+                  <td>
+                    <span class="visible-xs-block small-table-header">#</span>
+                    {{ forloop.counter }}
+                  </td>
+                  <td>
+                    <span class="visible-xs-block small-table-header">Description</span>
+                    {{agenda_item.description}}
+                  </td>
                   {% if agenda_item.bills %}
                     <td>
+                      <span class="visible-xs-block small-table-header">ID</span>
                       <a href="/legislation/{{agenda_item.bills.0.bill.councilmatic_bill.slug}}/">
                         {{ agenda_item.bills.0.bill.councilmatic_bill.friendly_name }}
                       </a>
                     </td>
                     <td>
+                      <span class="visible-xs-block small-table-header">Sponsor(s)</span>
                       {% for s in agenda_item.bills.0.bill.sponsors %}
                         {{ s.person.councilmatic_person.link_html | safe }}{% if not forloop.last %},{% endif %}
                       {% endfor %}
@@ -70,7 +84,7 @@ <h4>Agenda: {{event.agenda.all|length}} items</h4>
       {% endif %}
 
       <!-- only show attendance for past events that weren't cancelled -->
-      {% if event.status == 'passed' or event.status == 'confirmed' %}
+      {% if event.status == 'passed' %}
         {% if attendance_taken %}
           <h4>Alder Attendance: {{attendance_present}} Present, {{attendance_absent}} Absent</h4>
           <table class="table">

chicago/templates/legislation.html

@@ -110,7 +110,7 @@ <h3 class="no-pad-bottom"><i class='fa fa-fw fa-users'></i> Sponsors</h3>
       {% if legislation.actions %}
         <h3 class="no-pad-bottom"><i class='fa fa-fw fa-list-ul'></i> History</h3>
         <div class="table-responsive">
-          <table class='table table-responsive' id='committee-actions'>
+          <table class='table rows-and-columns' id='committee-actions'>
             <thead>
               <tr>
                 <th>Date</th>
@@ -122,19 +122,22 @@ <h3 class="no-pad-bottom"><i class='fa fa-fw fa-list-ul'></i> History</h3>
               {% for action in legislation.actions.all %}
                 <tr>
                   <td class='nowrap text-muted'>
+                    <span class="visible-xs-block small-table-header">Date</span>
                     <span datetime='{{action.date }}'>{{action.date}}</span>
                   </td>
                   <td>
+                    <span class="visible-xs-block small-table-header">Legislative body</span>
                     <a href="{% url 'committee_detail' action.organization.councilmatic_organization.slug %} %}">{{action.organization.name}}</a>
                   </td>
                   <td>
+                    <span class="visible-xs-block small-table-header">Action</span>
                     <span class='text-{{action.label}}'>{{action.description | remove_action_subj}}</span>
 
                     {% if action.vote.counts.all|length > 0 %}
                       {% if action.vote.motion_text %}
                         <p>{{action.vote.motion_text}}</p>
                       {% endif %}
-                      <table class='table table-responsive'>
+                      <table class='table'>
                         <thead>
                           <tr>
                             <th>Votes for</th>
@@ -145,6 +148,7 @@ <h3 class="no-pad-bottom"><i class='fa fa-fw fa-list-ul'></i> History</h3>
                         <tbody>
                           <tr>
                             <td>
+                              <span class="visible-xs-block small-table-header">Votes for</span>
                               {% for vote in action.vote.counts.all %}
                                 {% if vote.option == 'yes' %}
                                   <strong>{{vote.option|capfirst}}: {{vote.value}}</strong><br />
@@ -165,6 +169,7 @@ <h3 class="no-pad-bottom"><i class='fa fa-fw fa-list-ul'></i> History</h3>
                               </p>
                             </td>
                             <td>
+                              <span class="visible-xs-block small-table-header">Votes against</span>
                               {% for vote in action.vote.counts.all %}
                                 {% if vote.option == 'no' %}
                                   <strong>{{vote.option|capfirst}}: {{vote.value}}</strong><br />
@@ -185,6 +190,7 @@ <h3 class="no-pad-bottom"><i class='fa fa-fw fa-list-ul'></i> History</h3>
                               </p>
                             </td>
                             <td>
+                              <span class="visible-xs-block small-table-header">Other votes</span>
                               {% for vote in action.vote.counts.all %}
                                 {% if vote.option != 'yes' and vote.option != 'no' %}
                                   <strong>{{vote.option|capfirst}}: {{vote.value}}</strong><br />

chicago/templatetags/chicago_extras.py

@@ -1,4 +1,5 @@
 from django import template
+from django.core.exceptions import ObjectDoesNotExist
 from councilmatic.settings import ALDER_EXTRAS, CITY_VOCAB
 
 register = template.Library()
@@ -16,10 +17,12 @@ def get_person_headshot(person):
 
 @register.filter
 def get_legistar_link(object):
-    for source in object.sources.all():
+    try:
+        source = object.sources.get(note="web")
         return f"<a href='{source.url}' target='_blank' rel='nofollow'><i class='fa fa-fw fa-external-link'></i> View on the {CITY_VOCAB['SOURCE']} website</a>"  # noqa
 
-    return ""
+    except ObjectDoesNotExist:
+        return ""
 
 
 @register.filter