mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2025-02-01 03:42:22 +00:00
Add mobile styles for book preview table
This commit is contained in:
Joachim
parent
69192d4d6e
commit
482774f1e1
2 changed files with 97 additions and 56 deletions
|
|
@ -256,3 +256,41 @@ body {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Book preview table
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
@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: .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 class="block">
|
||||||
<div>
|
<div>
|
||||||
{% if books|length > 0 %}
|
{% if books|length > 0 %}
|
||||||
<div class="scroll-x">
|
<table class="table is-striped is-fullwidth is-mobile">
|
||||||
<table class="table is-striped is-fullwidth">
|
<thead>
|
||||||
|
<tr>
|
||||||
<tr class="book-preview">
|
<th>{% trans "Cover" %}</th>
|
||||||
<th>{% trans "Cover" %}</th>
|
<th>{% trans "Title" %}</th>
|
||||||
<th>{% trans "Title" %}</th>
|
<th>{% trans "Author" %}</th>
|
||||||
<th>{% trans "Author" %}</th>
|
<th>{% trans "Shelved" %}</th>
|
||||||
<th>{% trans "Shelved" %}</th>
|
<th>{% trans "Started" %}</th>
|
||||||
<th>{% trans "Started" %}</th>
|
<th>{% trans "Finished" %}</th>
|
||||||
<th>{% trans "Finished" %}</th>
|
{% if ratings %}<th>{% trans "Rating" %}</th>{% endif %}
|
||||||
{% if ratings %}<th>{% trans "Rating" %}</th>{% endif %}
|
{% if shelf.user == request.user %}
|
||||||
{% if shelf.user == request.user %}
|
<th aria-hidden="true"></th>
|
||||||
<th aria-hidden="true"></th>
|
{% endif %}
|
||||||
{% endif %}
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
{% for book in books %}
|
<tbody>
|
||||||
<tr class="book-preview">
|
{% for book in books %}
|
||||||
<td>
|
{% spaceless %}
|
||||||
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
|
<tr class="book-preview">
|
||||||
</td>
|
<td class="book-preview-top-row">
|
||||||
<td>
|
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
|
||||||
<a href="{{ book.local_path }}">{{ book.title }}</a>
|
</td>
|
||||||
</td>
|
<td data-title="{% trans "Title" %}">
|
||||||
<td>
|
<a href="{{ book.local_path }}">{{ book.title }}</a>
|
||||||
{% include 'snippets/authors.html' %}
|
</td>
|
||||||
</td>
|
<td data-title="{% trans "Author" %}">
|
||||||
<td>
|
{% include 'snippets/authors.html' %}
|
||||||
{{ book.created_date | naturalday }}
|
</td>
|
||||||
</td>
|
<td data-title="{% trans "Shelved" %}">
|
||||||
{% latest_read_through book user as read_through %}
|
{{ book.created_date | naturalday }}
|
||||||
<td>
|
</td>
|
||||||
{{ read_through.start_date | naturalday |default_if_none:""}}
|
{% latest_read_through book user as read_through %}
|
||||||
</td>
|
<td data-title="{% trans "Started" %}">
|
||||||
<td>
|
{{ read_through.start_date | naturalday |default_if_none:""}}
|
||||||
{{ read_through.finish_date | naturalday |default_if_none:""}}
|
</td>
|
||||||
</td>
|
<td data-title="{% trans "Finished" %}">
|
||||||
{% if ratings %}
|
{{ read_through.finish_date | naturalday |default_if_none:""}}
|
||||||
<td>
|
</td>
|
||||||
{% include 'snippets/stars.html' with rating=ratings|dict_key:book.id %}
|
{% if ratings %}
|
||||||
</td>
|
<td data-title="{% trans "Rating" %}">
|
||||||
{% endif %}
|
{% include 'snippets/stars.html' with rating=ratings|dict_key:book.id %}
|
||||||
{% if shelf.user == request.user %}
|
</td>
|
||||||
<td>
|
{% endif %}
|
||||||
{% with right=True %}
|
{% if shelf.user == request.user %}
|
||||||
{% if not shelf.id %}
|
<td class="book-preview-top-row has-text-right">
|
||||||
{% active_shelf book as current %}
|
{% with right=True %}
|
||||||
{% include 'snippets/shelf_selector.html' with current=current.shelf class="is-small" %}
|
{% if not shelf.id %}
|
||||||
{% else %}
|
{% active_shelf book as current %}
|
||||||
{% include 'snippets/shelf_selector.html' with current=shelf class="is-small" %}
|
{% include 'snippets/shelf_selector.html' with current=current.shelf class="is-small" %}
|
||||||
{% endif %}
|
{% else %}
|
||||||
{% endwith %}
|
{% include 'snippets/shelf_selector.html' with current=shelf class="is-small" %}
|
||||||
</td>
|
{% endif %}
|
||||||
{% endif %}
|
{% endwith %}
|
||||||
</tr>
|
</td>
|
||||||
{% endfor %}
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
{% endspaceless %}
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<p>{% trans "This shelf is empty." %}</p>
|
<p>{% trans "This shelf is empty." %}</p>
|
||||||
{% if shelf.id and shelf.editable %}
|
{% if shelf.id and shelf.editable %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue