From 0a71fb094fb8fbf994103f800ee84b4cd3b8bda3 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Thu, 29 Apr 2021 21:41:43 +0200
Subject: [PATCH] Move counter in Ordered List

---
 bookwyrm/static/css/bookwyrm.css   | 34 ++++++++++++++++++++++++++++++
 bookwyrm/templates/lists/list.html |  8 ++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 9e74d69f..0d9cbe3a 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -346,3 +346,37 @@ body {
         display: none;
     }
 }
+
+/* Book list
+ ******************************************************************************/
+
+ol.ordered-list {
+    list-style: none;
+    counter-reset: books;
+}
+
+ol.ordered-list li {
+  counter-increment: books
+}
+
+ol.ordered-list li::before {
+  content: counter(books);
+  position: absolute;
+  left: -20px;
+  width: 20px;
+  height: 24px;
+
+  border: 1px solid #dbdbdb;
+  border-right: 0;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-items: center;
+
+  color: #888;
+  font-size: 0.8em;
+  font-weight: bold;
+}
diff --git a/bookwyrm/templates/lists/list.html b/bookwyrm/templates/lists/list.html
index e61caf9c..cfecfd4b 100644
--- a/bookwyrm/templates/lists/list.html
+++ b/bookwyrm/templates/lists/list.html
@@ -26,7 +26,7 @@
         {% if not items.object_list.exists %}
         <p>{% trans "This list is currently empty" %}</p>
         {% else %}
-        <ol start="{{ items.start_index }}">
+        <ol start="{{ items.start_index }}" class="ordered-list">
         {% for item in items %}
             <li class="block pb-3">
                 <div class="card">
@@ -40,7 +40,7 @@
                             {% include 'snippets/shelve_button/shelve_button.html' with book=item.book %}
                         </div>
                     </div>
-                    <div class="card-footer has-background-white-bis is-align-items-baseline">
+                    <div class="card-footer has-background-white-bis">
                         <div class="card-footer-item">
                             <div>
                             <p>{% blocktrans with username=item.user.display_name user_path=user.local_path %}Added by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p>
@@ -50,6 +50,9 @@
                         <div class="card-footer-item">
                             <form name="set-position" method="post" action="{% url 'list-set-book-position' item.id %}">
                                 <div class="field has-addons mb-0">
+                                    <div class="control">
+                                        <label for="input-list-position" class="button is-transparent is-small">{% trans "List position" %}</label>
+                                    </div>
                                     {% csrf_token %}
                                     <div class="control">
                                         <input id="input-list-position" class="input is-small" type="number" min="1" name="position" value="{{ item.order }}">
@@ -58,7 +61,6 @@
                                         <button type="submit" class="button is-info is-small is-tablet">{% trans "Set" %}</button>
                                     </div>
                                 </div>
-                                <label for="input-list-position" class="help">{% trans "List position" %}</label>
                             </form>
                         </div>
                         <form name="add-book" method="post" action="{% url 'list-remove-book' list.id %}" class="card-footer-item">