Redesign ticket list with CSS grid
This commit is contained in:
parent
6dee5ecd54
commit
25ed7ff22d
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 }} <span class="fa fa-fw fa-comments-o"></span>
|
||||
</td>
|
||||
{% else %}
|
||||
<td style="text-align: center">
|
||||
{{ ticket.comments | length }} <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 }} <span class="fa fa-fw fa-comments-o"></span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align: center">
|
||||
{{ ticket.comments | length }} <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 %}
|
||||
|
|
Loading…
Reference in New Issue