From 4c021e63572dc8707ed44200419a87d952489d2d Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Sun, 2 May 2021 21:34:43 +0200
Subject: [PATCH] Add Mobile styles

---
 bookwyrm/static/css/bookwyrm.css   | 27 ++++++++++++++++++++++++---
 bookwyrm/templates/lists/list.html |  2 +-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index f2c6a0280..2fa909131 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -47,6 +47,14 @@ body {
     .m-0-mobile {
         margin: 0 !important;
     }
+
+    .card-footer.is-stacked-mobile {
+        flex-direction: column;
+    }
+    .card-footer.is-stacked-mobile .card-footer-item:not(:last-child) {
+        border-bottom: 1px solid #ededed;
+        border-right: 0;
+    }
 }
 
 .button.is-transparent {
@@ -352,19 +360,20 @@ body {
 
 ol.ordered-list {
     list-style: none;
-    counter-reset: books;
+    counter-reset: list-counter;
 }
 
 ol.ordered-list li {
-    counter-increment: books;
+    counter-increment: list-counter;
 }
 
 ol.ordered-list li::before {
-    content: counter(books);
+    content: counter(list-counter);
     position: absolute;
     left: -20px;
     width: 20px;
     height: 24px;
+    background-color: #fff;
     border: 1px solid #dbdbdb;
     border-right: 0;
     border-top-left-radius: 2px;
@@ -376,3 +385,15 @@ ol.ordered-list li::before {
     font-size: 0.8em;
     font-weight: bold;
 }
+
+@media only screen and (max-width: 768px) {
+    ol.ordered-list li::before {
+        left: 0;
+        z-index: 1;
+        border: 0;
+        border-right: 1px solid #dbdbdb;
+        border-bottom: 1px solid #dbdbdb;
+        border-radius: 0;
+        border-bottom-right-radius: 2px;
+    }
+}
diff --git a/bookwyrm/templates/lists/list.html b/bookwyrm/templates/lists/list.html
index cfecfd4b0..da092656a 100644
--- a/bookwyrm/templates/lists/list.html
+++ b/bookwyrm/templates/lists/list.html
@@ -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">
+                    <div class="card-footer is-stacked-mobile 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>