From 482774f1e1a59190d0a1e7af0270906a29e92e13 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 21 Apr 2021 21:25:37 +0200
Subject: [PATCH 1/3] Add mobile styles for book preview table

---
 bookwyrm/static/css/bookwyrm.css   |  38 ++++++++++
 bookwyrm/templates/user/shelf.html | 115 +++++++++++++++--------------
 2 files changed, 97 insertions(+), 56 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 67eb1ebac..a8a29fa2e 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -256,3 +256,41 @@ body {
     opacity: 0.5;
     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;
+    }
+}
diff --git a/bookwyrm/templates/user/shelf.html b/bookwyrm/templates/user/shelf.html
index 0732327be..947e9f70b 100644
--- a/bookwyrm/templates/user/shelf.html
+++ b/bookwyrm/templates/user/shelf.html
@@ -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 %}

From 2ae9085e55e8bdd25c3660560e95b4a97e3d6a3e Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 21 Apr 2021 21:26:20 +0200
Subject: [PATCH 2/3] Vertically align cells in desktop view

---
 bookwyrm/static/css/bookwyrm.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index a8a29fa2e..5b5b32587 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -260,6 +260,10 @@ body {
 /* 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;

From e4836bd9b3321c79e1496cad1c9e6b6af4ed9791 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 21 Apr 2021 21:29:28 +0200
Subject: [PATCH 3/3] Fix for lint

---
 bookwyrm/static/css/bookwyrm.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 5b5b32587..c019f996c 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -265,15 +265,18 @@ body {
 }
 
 @media only screen and (max-width: 768px) {
-    table.is-mobile, table.is-mobile tbody {
+    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;
@@ -281,20 +284,25 @@ body {
         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-size: 0.75em;
         font-weight: bold;
     }
+
     table.is-mobile td:empty {
         padding: 0;
     }
-    table.is-mobile th, table.is-mobile thead {
+
+    table.is-mobile th,
+    table.is-mobile thead {
         display: none;
     }
 }