mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-05-31 22:58:18 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #974 from joachimesque/list-table

Browse source 
Add mobile styles for book preview table
This commit is contained in:
Mouse Reeve 2021-04-25 10:42:27 -07:00 committed by GitHub
parent aa557e4758 e4836bd9b3
commit 2fd8e12b96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 109 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
bookwyrm/static/css/bookwyrm.css
View file

@ -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;
}
}

115
bookwyrm/templates/user/shelf.html
View file

@ -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 %}