mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-26 11:31:08 +00:00
Merge pull request #974 from joachimesque/list-table
Add mobile styles for book preview table
This commit is contained in:
Mouse Reeve
GitHub
commit
2fd8e12b96
2 changed files with 109 additions and 56 deletions
|
|
@ -286,3 +286,53 @@ body {
|
|||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Book preview table
|
||||
******************************************************************************/
|
||||
|
||||
.book-preview td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
table.is-mobile,
|
||||
table.is-mobile tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table.is-mobile tr {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
table.is-mobile td {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 100%;
|
||||
order: 2;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
table.is-mobile td.book-preview-top-row {
|
||||
order: 1;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
table.is-mobile td[data-title]:not(:empty)::before {
|
||||
content: attr(data-title);
|
||||
display: block;
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.is-mobile td:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.is-mobile th,
|
||||
table.is-mobile thead {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,63 +68,66 @@
|
|||
<div class="block">
|
||||
<div>
|
||||
{% if books|length > 0 %}
|
||||
<div class="scroll-x">
|
||||
<table class="table is-striped is-fullwidth">
|
||||
|
||||
<tr class="book-preview">
|
||||
<th>{% trans "Cover" %}</th>
|
||||
<th>{% trans "Title" %}</th>
|
||||
<th>{% trans "Author" %}</th>
|
||||
<th>{% trans "Shelved" %}</th>
|
||||
<th>{% trans "Started" %}</th>
|
||||
<th>{% trans "Finished" %}</th>
|
||||
{% if ratings %}<th>{% trans "Rating" %}</th>{% endif %}
|
||||
{% if shelf.user == request.user %}
|
||||
<th aria-hidden="true"></th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% for book in books %}
|
||||
<tr class="book-preview">
|
||||
<td>
|
||||
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ book.local_path }}">{{ book.title }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% include 'snippets/authors.html' %}
|
||||
</td>
|
||||
<td>
|
||||
{{ book.created_date | naturalday }}
|
||||
</td>
|
||||
{% latest_read_through book user as read_through %}
|
||||
<td>
|
||||
{{ read_through.start_date | naturalday |default_if_none:""}}
|
||||
</td>
|
||||
<td>
|
||||
{{ read_through.finish_date | naturalday |default_if_none:""}}
|
||||
</td>
|
||||
{% if ratings %}
|
||||
<td>
|
||||
{% include 'snippets/stars.html' with rating=ratings|dict_key:book.id %}
|
||||
</td>
|
||||
{% endif %}
|
||||
{% if shelf.user == request.user %}
|
||||
<td>
|
||||
{% with right=True %}
|
||||
{% if not shelf.id %}
|
||||
{% active_shelf book as current %}
|
||||
{% include 'snippets/shelf_selector.html' with current=current.shelf class="is-small" %}
|
||||
{% else %}
|
||||
{% include 'snippets/shelf_selector.html' with current=shelf class="is-small" %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<table class="table is-striped is-fullwidth is-mobile">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Cover" %}</th>
|
||||
<th>{% trans "Title" %}</th>
|
||||
<th>{% trans "Author" %}</th>
|
||||
<th>{% trans "Shelved" %}</th>
|
||||
<th>{% trans "Started" %}</th>
|
||||
<th>{% trans "Finished" %}</th>
|
||||
{% if ratings %}<th>{% trans "Rating" %}</th>{% endif %}
|
||||
{% if shelf.user == request.user %}
|
||||
<th aria-hidden="true"></th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for book in books %}
|
||||
{% spaceless %}
|
||||
<tr class="book-preview">
|
||||
<td class="book-preview-top-row">
|
||||
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
|
||||
</td>
|
||||
<td data-title="{% trans "Title" %}">
|
||||
<a href="{{ book.local_path }}">{{ book.title }}</a>
|
||||
</td>
|
||||
<td data-title="{% trans "Author" %}">
|
||||
{% include 'snippets/authors.html' %}
|
||||
</td>
|
||||
<td data-title="{% trans "Shelved" %}">
|
||||
{{ book.created_date | naturalday }}
|
||||
</td>
|
||||
{% latest_read_through book user as read_through %}
|
||||
<td data-title="{% trans "Started" %}">
|
||||
{{ read_through.start_date | naturalday |default_if_none:""}}
|
||||
</td>
|
||||
<td data-title="{% trans "Finished" %}">
|
||||
{{ read_through.finish_date | naturalday |default_if_none:""}}
|
||||
</td>
|
||||
{% if ratings %}
|
||||
<td data-title="{% trans "Rating" %}">
|
||||
{% include 'snippets/stars.html' with rating=ratings|dict_key:book.id %}
|
||||
</td>
|
||||
{% endif %}
|
||||
{% if shelf.user == request.user %}
|
||||
<td class="book-preview-top-row has-text-right">
|
||||
{% with right=True %}
|
||||
{% if not shelf.id %}
|
||||
{% active_shelf book as current %}
|
||||
{% include 'snippets/shelf_selector.html' with current=current.shelf class="is-small" %}
|
||||
{% else %}
|
||||
{% include 'snippets/shelf_selector.html' with current=shelf class="is-small" %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endspaceless %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>{% trans "This shelf is empty." %}</p>
|
||||
{% if shelf.id and shelf.editable %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue