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

Render tables as cards on mobile #370

Merged
merged 5 commits into from
Oct 1, 2023
Merged

Render tables as cards on mobile #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f2b18a1
better way to show source links
derekeder Sep 28, 2023
54d420f
card view for tables on xs screens
derekeder Sep 28, 2023
766d9f1
simplified moble card table styles
derekeder Sep 29, 2023
81aad4e
using bootstrap embed class for vimeo video
derekeder Sep 29, 2023
56923e2
applied new card styles to legislation actions, cleaned up class names
derekeder Sep 29, 2023
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
42 changes: 42 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 @@ -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 {
Expand Down
26 changes: 20 additions & 6 deletions chicago/templates/event.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 %}
Expand All @@ -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">
Expand Down
10 changes: 8 additions & 2 deletions chicago/templates/legislation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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 />
Expand All @@ -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 />
Expand All @@ -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 />
Expand Down
7 changes: 5 additions & 2 deletions chicago/templatetags/chicago_extras.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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
Expand Down