From 1783330708f5183c9ab27fa5087e8c098e347f45 Mon Sep 17 00:00:00 2001
From: Adam Kelly <adam@cthulahoops.org>
Date: Wed, 8 Apr 2020 18:04:45 +0100
Subject: [PATCH 1/6] Add css dropdown to select alternative shelves.

---
 fedireads/static/format.css                   | 49 +++++++++++++++++++
 .../templates/snippets/shelve_button.html     | 15 +++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index 21077896a..0db8d49f0 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -716,3 +716,52 @@ th, td {
     background-color: #FF1654;
     text-align: center;
 }
+
+div.dropdown {
+    display: block;
+    white-space: nowrap;
+    background-color: #EEE;
+    border: 2px solid #247BA0;
+    border-radius: 0.3em;
+    color: #247BA0;
+    width: max-content;
+}
+
+.dropdown form {
+    display: inline;
+}
+
+button.dropdown-button {
+    display: inline;
+    border: none;
+    border-radius: 0;
+    background-color: inherit;
+    color: inherit;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    align: left;
+    border-radius: 3px;
+    border: 2px solid #247BA0;
+}
+
+.dropdown-content button {
+    text-align: left;
+    width: 100%;
+    border-radius: 0;
+    border: none;
+}
+
+.dropdown-content button:hover {
+    background-color: #ddd;
+}
+
+.dropdown-content button {
+    border-radius: 0;
+}
+
+.dropdown-arrow:hover .dropdown-content {
+    display: block;
+}
diff --git a/fedireads/templates/snippets/shelve_button.html b/fedireads/templates/snippets/shelve_button.html
index 96e410dbe..80d76e9f4 100644
--- a/fedireads/templates/snippets/shelve_button.html
+++ b/fedireads/templates/snippets/shelve_button.html
@@ -2,12 +2,23 @@
 {% if request.user.is_authenticated %}
 {% if not pulldown %}
 
+<div class="dropdown secondary">
 <form name="shelve" action="/shelve/" method="post">
     {% csrf_token %}
     <input type="hidden" name="book" value="{{ book.id }}"></input>
     <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}"></input>
-    <button class="secondary" type="submit">{% shelve_button_text book %}</button>
-</form>
+    <button class="dropdown-button" type="submit" style="">{% shelve_button_text book %}</button></form><div class="dropdown-arrow" style="display: inline;"><button class="dropdown-button">&dArr;</button>
+<div class="dropdown-content">
+    <form name="shelve" action="/shelve/" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="book" value="{{ book.id }}"></input>
+        {% for shelf in request.user.shelf_set.all %}
+            <button class="secondary" name="shelf" type="submit" value="{{ shelf.identifier }}">{{ shelf.name }}</button>
+        {% endfor %}
+    </form>
+</div>
+</div>
+</div>
 
 {% else %}
 

From 97e752cc12856e3c625a895b663f8137d532880a Mon Sep 17 00:00:00 2001
From: Adam Kelly <adam@cthulahoops.org>
Date: Thu, 9 Apr 2020 11:23:08 +0100
Subject: [PATCH 2/6] Disable button for current shelf.

---
 fedireads/static/format.css                     | 8 ++++++++
 fedireads/templates/snippets/shelve_button.html | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index 0db8d49f0..b57f6f6a2 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -754,6 +754,14 @@ button.dropdown-button {
     border: none;
 }
 
+.dropdown-content button[disabled] {
+    color: #aaa;
+}
+
+.dropdown-content button[disabled]:hover {
+    background-color: #eee;
+}
+
 .dropdown-content button:hover {
     background-color: #ddd;
 }
diff --git a/fedireads/templates/snippets/shelve_button.html b/fedireads/templates/snippets/shelve_button.html
index 80d76e9f4..db40abc50 100644
--- a/fedireads/templates/snippets/shelve_button.html
+++ b/fedireads/templates/snippets/shelve_button.html
@@ -13,7 +13,7 @@
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}"></input>
         {% for shelf in request.user.shelf_set.all %}
-            <button class="secondary" name="shelf" type="submit" value="{{ shelf.identifier }}">{{ shelf.name }}</button>
+            <button class="secondary" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
         {% endfor %}
     </form>
 </div>

From 0d1395d6029b3fe37ca11059b0912969d8b49ddf Mon Sep 17 00:00:00 2001
From: Adam Kelly <adam@cthulahoops.org>
Date: Thu, 9 Apr 2020 11:23:37 +0100
Subject: [PATCH 3/6] Remove dead code for old shelf pulldown.

---
 .../templates/snippets/shelve_button.html      | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/fedireads/templates/snippets/shelve_button.html b/fedireads/templates/snippets/shelve_button.html
index db40abc50..5ee9aa86d 100644
--- a/fedireads/templates/snippets/shelve_button.html
+++ b/fedireads/templates/snippets/shelve_button.html
@@ -1,6 +1,5 @@
 {% load fr_display %}
 {% if request.user.is_authenticated %}
-{% if not pulldown %}
 
 <div class="dropdown secondary">
 <form name="shelve" action="/shelve/" method="post">
@@ -20,21 +19,4 @@
 </div>
 </div>
 
-{% else %}
-
-<form name="shelve" action="/shelve/" method="post">
-    {% csrf_token %}
-    <input type="hidden" name="book" value="{{ book.id }}"></input>
-
-    <select name="shelf">
-        {% for shelf in request.user.shelf_set.all %}
-        <option value="{{ shelf.identifier }}" {% if book in shelf.books.all %} selected {% endif %}>
-             {{ shelf.name }}{% if book in shelf.books.all %} ✓ {% endif %}
-        </option>
-        {% endfor %}
-    </select>
-    <button class="secondary" type="submit">Shelve</button>
-</form>
-
-{% endif %}
 {% endif %}

From 0a4524a5243f2ec5e1075546d25fc86a35b76796 Mon Sep 17 00:00:00 2001
From: Adam Kelly <adam@cthulahoops.org>
Date: Thu, 9 Apr 2020 22:33:51 +0100
Subject: [PATCH 4/6] Reuse the pull css styling from the user menu.

---
 fedireads/static/format.css                   | 105 ++++++++----------
 .../templates/snippets/shelve_button.html     |   8 +-
 2 files changed, 53 insertions(+), 60 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index b57f6f6a2..ab56a07d0 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -139,7 +139,9 @@ body {
 
 .pulldown-container {
     position: relative;
+    display: inline;
 }
+
 .pulldown {
     display: none;
     position: absolute;
@@ -149,14 +151,61 @@ body {
     right: 0;
     box-shadow: 0 5px 10px rgba(0,0,0,0.15);
     width: max-content;
+    border: 2px solid #247BA0;
+    align: left;
 }
+
 .pulldown-container:hover .pulldown {
     display: block;
 }
+
 .pulldown li {
     margin-bottom: 0.5em;
 }
 
+div.pulldown-button {
+    background-color: #eee;
+    border: 2px solid #247BA0;
+    border-radius: 0.3em;
+    color: #247BA0;
+    width: max-content;
+    white-space: nowrap;
+}
+
+.pulldown-button form {
+    display: inline;
+}
+
+div.pulldown-button button {
+    display: inline;
+    border: none;
+    border-radius: 0;
+    background-color: inherit;
+    color: #247BA0;
+}
+
+div.pulldown button {
+    display: block;
+    text-align: left;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    background-color: white;
+    color: #247BA0;
+}
+
+.pulldown button[disabled] {
+    color: #aaa;
+}
+
+.pulldown button[disabled]:hover {
+    background-color: white;
+}
+
+.pulldown button:hover {
+    background-color: #ddd;
+}
+
 /* content area */
 .content-container {
     margin: 1rem;
@@ -717,59 +766,3 @@ th, td {
     text-align: center;
 }
 
-div.dropdown {
-    display: block;
-    white-space: nowrap;
-    background-color: #EEE;
-    border: 2px solid #247BA0;
-    border-radius: 0.3em;
-    color: #247BA0;
-    width: max-content;
-}
-
-.dropdown form {
-    display: inline;
-}
-
-button.dropdown-button {
-    display: inline;
-    border: none;
-    border-radius: 0;
-    background-color: inherit;
-    color: inherit;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    align: left;
-    border-radius: 3px;
-    border: 2px solid #247BA0;
-}
-
-.dropdown-content button {
-    text-align: left;
-    width: 100%;
-    border-radius: 0;
-    border: none;
-}
-
-.dropdown-content button[disabled] {
-    color: #aaa;
-}
-
-.dropdown-content button[disabled]:hover {
-    background-color: #eee;
-}
-
-.dropdown-content button:hover {
-    background-color: #ddd;
-}
-
-.dropdown-content button {
-    border-radius: 0;
-}
-
-.dropdown-arrow:hover .dropdown-content {
-    display: block;
-}
diff --git a/fedireads/templates/snippets/shelve_button.html b/fedireads/templates/snippets/shelve_button.html
index 5ee9aa86d..c4fdabe19 100644
--- a/fedireads/templates/snippets/shelve_button.html
+++ b/fedireads/templates/snippets/shelve_button.html
@@ -1,18 +1,18 @@
 {% load fr_display %}
 {% if request.user.is_authenticated %}
 
-<div class="dropdown secondary">
+<div class="pulldown-button">
 <form name="shelve" action="/shelve/" method="post">
     {% csrf_token %}
     <input type="hidden" name="book" value="{{ book.id }}"></input>
     <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}"></input>
-    <button class="dropdown-button" type="submit" style="">{% shelve_button_text book %}</button></form><div class="dropdown-arrow" style="display: inline;"><button class="dropdown-button">&dArr;</button>
-<div class="dropdown-content">
+    <button type="submit" style="">{% shelve_button_text book %}</button></form><div class="pulldown-container"><button>&dArr;</button>
+<div class="pulldown">
     <form name="shelve" action="/shelve/" method="post">
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}"></input>
         {% for shelf in request.user.shelf_set.all %}
-            <button class="secondary" name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
+        <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
         {% endfor %}
     </form>
 </div>

From 6fcc183377032e0e22c5e04e8eaf2871319c2591 Mon Sep 17 00:00:00 2001
From: Adam Kelly <adam@cthulahoops.org>
Date: Thu, 9 Apr 2020 22:39:12 +0100
Subject: [PATCH 5/6] Switch to using a list for buttons.

---
 fedireads/static/format.css                     | 5 +++--
 fedireads/templates/snippets/shelve_button.html | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index ab56a07d0..dbb076a76 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -159,7 +159,8 @@ body {
     display: block;
 }
 
-.pulldown li {
+.pulldown a {
+    display: block;
     margin-bottom: 0.5em;
 }
 
@@ -184,7 +185,7 @@ div.pulldown-button button {
     color: #247BA0;
 }
 
-div.pulldown button {
+ul.pulldown button {
     display: block;
     text-align: left;
     width: 100%;
diff --git a/fedireads/templates/snippets/shelve_button.html b/fedireads/templates/snippets/shelve_button.html
index c4fdabe19..222dc486a 100644
--- a/fedireads/templates/snippets/shelve_button.html
+++ b/fedireads/templates/snippets/shelve_button.html
@@ -7,15 +7,17 @@
     <input type="hidden" name="book" value="{{ book.id }}"></input>
     <input type="hidden" name="shelf" value="{% shelve_button_identifier book %}"></input>
     <button type="submit" style="">{% shelve_button_text book %}</button></form><div class="pulldown-container"><button>&dArr;</button>
-<div class="pulldown">
+<ul class="pulldown">
     <form name="shelve" action="/shelve/" method="post">
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}"></input>
         {% for shelf in request.user.shelf_set.all %}
+        <li>
         <button name="shelf" type="submit" value="{{ shelf.identifier }}" {% if shelf in book.shelf_set.all %} disabled {% endif %}>{{ shelf.name }} {% if shelf in book.shelf_set.all %} ✓ {% endif %}</button>
+        </li>
         {% endfor %}
     </form>
-</div>
+</ul>
 </div>
 </div>
 

From facbe33e37d335c5ee19cb267be25b9d6ea4131e Mon Sep 17 00:00:00 2001
From: Adam Kelly <adam@cthulahoops.org>
Date: Thu, 9 Apr 2020 22:40:24 +0100
Subject: [PATCH 6/6] Remove stray newline.

---
 fedireads/static/format.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index dbb076a76..64861200f 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -766,4 +766,3 @@ th, td {
     background-color: #FF1654;
     text-align: center;
 }
-