Improves import table ui

adds table container, plays with display a bit
This commit is contained in:
Mouse Reeve
2021-11-13 09:43:52 -08:00
parent 60fb1ac2e6
commit 659d0f19eb
2 changed files with 103 additions and 102 deletions

View File

@ -69,86 +69,92 @@
{% endblock %}
</h2>
{% block actions %}{% endblock %}
<table class="table">
<tr>
<th>
{% trans "Row" %}
</th>
<th>
{% trans "Title" %}
</th>
<th>
{% trans "ISBN" %}
</th>
<th>
{% trans "Author" %}
</th>
<th>
{% trans "Shelf" %}
</th>
<th>
{% trans "Review" %}
</th>
{% block import_cols_headers %}
<th>
{% trans "Book" %}
</th>
<th>
{% trans "Status" %}
</th>
{% endblock %}
</tr>
{% for item in items %}
<tr>
{% block index_col %}
<td>
{{ item.index }}
</td>
{% endblock %}
<td>
{{ item.normalized_data.title }}
</td>
<td>
{{ item.isbn }}
</td>
<td>
{{ item.normalized_data.authors }}
</td>
<td>
{{ item.normalized_data.shelf }}
</td>
<td>
<p>{% include 'snippets/stars.html' with rating=item.rating %}</p>
<p>{{ item.review|truncatechars:100 }}</p>
</td>
{% block import_cols %}
<td>
{% if item.book %}
<a href="{{ item.book.local_path }}">
{% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' size='small' %}
</a>
{% endif %}
</td>
<td>
{% if item.book %}
<span class="icon icon-check has-text-success" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Imported" %}</span>
<div class="table-container">
<table class="table is-striped">
<tr>
<th>
{% trans "Row" %}
</th>
<th>
{% trans "Title" %}
</th>
<th>
{% trans "ISBN" %}
</th>
<th>
{% trans "Author" %}
</th>
<th>
{% trans "Shelf" %}
</th>
<th>
{% trans "Review" %}
</th>
{% block import_cols_headers %}
<th>
{% trans "Book" %}
</th>
<th>
{% trans "Status" %}
</th>
{% endblock %}
</tr>
{% for item in items %}
<tr>
{% block index_col %}
<td>
{{ item.index }}
</td>
{% endblock %}
<td>
{{ item.normalized_data.title }}
</td>
<td>
{{ item.isbn }}
</td>
<td>
{{ item.normalized_data.authors }}
</td>
<td>
{{ item.normalized_data.shelf }}
</td>
<td>
<p>{% include 'snippets/stars.html' with rating=item.rating %}</p>
<p>{{ item.review|truncatechars:100 }}</p>
</td>
{% block import_cols %}
<td>
{% if item.book %}
<a href="{{ item.book.local_path }}">
{% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' size='small' %}
</a>
{% endif %}
</td>
<td>
{% if item.book %}
<span class="icon icon-check" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Imported" %}</span>
{% elif item.fail_reason %}
<span class="icon icon-x has-text-danger" aria-hidden="true"></span>
<span class="is-sr-only-mobile">
{{ item.fail_reason }}
</span>
{% else %}
<span class="icon icon-dots-three" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Pending" %}</span>
{% endif %}
</td>
{% endblock %}
</tr>
{% block action_row %}{% endblock %}
{% endfor %}
</table>
{% elif item.fail_reason %}
<span class="icon icon-x has-text-danger" aria-hidden="true"></span>
<span class="is-sr-only-mobile">
{% if item.book_guess %}
{% trans "Needs manual review" %}
{% else %}
{{ item.fail_reason }}
{% endif %}
</span>
{% else %}
<span class="icon icon-dots-three" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Pending" %}</span>
{% endif %}
</td>
{% endblock %}
</tr>
{% block action_row %}{% endblock %}
{% endfor %}
</table>
</div>
</div>
<div>