Redesign ticket list with CSS grid

This commit is contained in:
Drew DeVault 2018-08-25 10:52:07 -04:00
parent 6dee5ecd54
commit 25ed7ff22d
2 changed files with 49 additions and 37 deletions

View File

@ -66,3 +66,28 @@ select.form-control {
background: inherit;
}
}
.ticket-list {
display: grid;
grid-template-columns: auto 1fr auto auto auto auto;
border-right: 1px solid #ced4da;
border-bottom: 1px solid #ced4da;
margin-bottom: 1rem;
& > div {
padding: 0.1rem 0.5rem;
border-left: 1px solid #ced4da;
border-top: 1px solid #ced4da;
@for $i from 1 through 5 {
&:nth-child(5n+#{$i}) {
grid-column-start: $i;
}
// Striped rows
&:nth-child(10n+#{$i}) {
background: rgba(0,0,0,.05);
}
}
}
}

View File

@ -130,43 +130,30 @@
value="{{ search if search else "" }}" />
</form>
{% if len(tickets) %}
<table class="table table-striped">
<thead>
<tr>
<th style="width: 1px"></th>
<th></th>
<th></th>
<th></th>
<th style="width: 4rem; white-space: nowrap;"></th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr>
<td style="text-align: right"><a href="{{url_for("ticket.ticket_GET",
owner=tracker.owner.canonical_name(),
name=tracker.name,
ticket_id=ticket.scoped_id)}}">#{{ticket.scoped_id}}</a></td>
<td>{{ ticket.title }}</td>
<td>{{ ticket.updated | date }}</td>
<td>
<a href="{{url_for("html.user_GET",
username=ticket.submitter.username)}}"
>~{{ ticket.submitter.username }}</a>
</td>
{% if ticket.new_updates(current_user) %}
<td style="text-align: center">
{{ ticket.comments | length }}&nbsp;<span class="fa fa-fw fa-comments-o"></span>
</td>
{% else %}
<td style="text-align: center">
{{ ticket.comments | length }}&nbsp;<span class="fa fa-fw fa-comments"></span>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<div class="ticket-list">
{% for ticket in tickets %}
<div style="text-align: right"><a href="{{url_for("ticket.ticket_GET",
owner=tracker.owner.canonical_name(),
name=tracker.name,
ticket_id=ticket.scoped_id)}}">#{{ticket.scoped_id}}</a></div>
<div>{{ ticket.title }}</div>
<div>{{ ticket.updated | date }}</div>
<div>
<a href="{{url_for("html.user_GET",
username=ticket.submitter.username)}}"
>~{{ ticket.submitter.username }}</a>
</div>
{% if ticket.new_updates(current_user) %}
<div style="text-align: center">
{{ ticket.comments | length }}&nbsp;<span class="fa fa-fw fa-comments-o"></span>
</div>
{% else %}
<div style="text-align: center">
{{ ticket.comments | length }}&nbsp;<span class="fa fa-fw fa-comments"></span>
</div>
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="alert alert-info">No tickets found for this search criteria.</div>
{% endif %}