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

View file

@ -19,9 +19,6 @@
{% endblock %} {% endblock %}
{% block import_cols_headers %} {% block import_cols_headers %}
<th>
{% trans "Actions" %}
</th>
{% endblock %} {% endblock %}
{% block index_col %} {% block index_col %}
@ -31,30 +28,11 @@
{% endblock %} {% endblock %}
{% block import_cols %} {% block import_cols %}
<td>
<div class="content is-flex">
<form class="pr-2" name="approve-{{ item.id }}" method="POST" action="{% url 'import-approve' job.id item.id %}">
{% csrf_token %}
<button type="submit" class="button is-success">
<span class="icon icon-check" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Approve" %}</span>
</button>
</form>
<form name="delete-{{ item.id }}" method="POST" action="{% url 'import-delete' job.id item.id %}">
{% csrf_token %}
<button type="submit" class="button is-danger is-light is-outlined">
<span class="icon icon-x" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Delete" %}</span>
</button>
</form>
</div>
</td>
{% endblock %} {% endblock %}
{% block action_row %} {% block action_row %}
<tr> <tr>
<td colspan="6"> <td colspan="5">
<div class="columns is-mobile"> <div class="columns is-mobile">
{% with guess=item.book_guess %} {% with guess=item.book_guess %}
<div class="column is-narrow"> <div class="column is-narrow">
@ -64,6 +42,23 @@
</div> </div>
<div class="column"> <div class="column">
{% include 'snippets/book_titleby.html' with book=guess %} {% include 'snippets/book_titleby.html' with book=guess %}
<div class="content is-flex">
<form class="pr-2" name="approve-{{ item.id }}" method="POST" action="{% url 'import-approve' job.id item.id %}">
{% csrf_token %}
<button type="submit" class="button is-success">
<span class="icon icon-check m-0-mobile" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Approve" %}</span>
</button>
</form>
<form name="delete-{{ item.id }}" method="POST" action="{% url 'import-delete' job.id item.id %}">
{% csrf_token %}
<button type="submit" class="button is-danger is-light is-outlined">
<span class="icon icon-x m-0-mobile" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{% trans "Delete" %}</span>
</button>
</form>
</div>
</div> </div>
{% endwith %} {% endwith %}
</div> </div>