From c813ce1144d31a90d16f556428578f8e63c3f628 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sat, 4 Dec 2021 10:41:42 -0800
Subject: [PATCH 1/2] Creates consistent styling for details element

---
 bookwyrm/static/css/bookwyrm.css  | 13 +++++
 bookwyrm/templates/feed/feed.html | 83 ++++++++++++++++---------------
 2 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 0d280fd53..8f6167b78 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -115,6 +115,19 @@ input[type=file]::file-selector-button:hover {
     color: #363636;
 }
 
+summary::marker {
+    content: none;
+}
+.detail-pinned-button summary {
+    position: absolute;
+    right: 0;
+}
+.detail-pinned-button form {
+    float: left;
+    width: -webkit-fill-available;
+    margin-top: 1em;
+}
+
 /** Shelving
  ******************************************************************************/
 
diff --git a/bookwyrm/templates/feed/feed.html b/bookwyrm/templates/feed/feed.html
index 1a2488afe..eda4c0c03 100644
--- a/bookwyrm/templates/feed/feed.html
+++ b/bookwyrm/templates/feed/feed.html
@@ -6,49 +6,54 @@
 <h1 class="title">
     {{ tab.name }}
 </h1>
-<div class="tabs">
-    <ul>
-        {% for stream in streams %}
-        <li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
-            <a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
-        </li>
-        {% endfor %}
-    </ul>
-</div>
+<div class="block is-clipped">
+    <div class="is-pulled-left">
+        <div class="tabs">
+            <ul>
+                {% for stream in streams %}
+                <li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
+                    <a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 
-{# feed settings #}
-<details class="mb-5" {% if settings_saved %}open{% endif %}>
-    <summary>
-        <span class="has-text-weight-bold">
-            {{ _("Feed settings") }}
-        </span>
-        {% if settings_saved %}
-            <span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
-        {% endif %}
-    </summary>
-    <form class="level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
-        {% csrf_token %}
+    {# feed settings #}
+    <details class="detail-pinned-button" {% if settings_saved %}open{% endif %}>
+        <summary class="control">
+            <span class="button">
+                <span class="icon icon-dots-three m-0-mobile" aria-hidden="true"></span>
+                <span class="is-sr-only-mobile">{{ _("Feed settings") }}</span>
+            </span>
+            {% if settings_saved %}
+                <span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
+            {% endif %}
+        </summary>
+        <form class="notification level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
+            {% csrf_token %}
 
-        <div class="level-left">
-            <div class="field">
-                <div class="control">
-                    <label class="label mt-2 mb-1">Status types</label>
-                    {% for name, value in feed_status_types_options %}
-                    <label class="mr-2">
-                        <input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
-                        {{ value }}
-                    </label>
-                    {% endfor %}
+            <div class="level-left">
+                <div class="field">
+                    <div class="control">
+                        <label class="label mt-2 mb-1">Status types</label>
+                        {% for name, value in feed_status_types_options %}
+                        <label class="mr-2">
+                            <input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
+                            {{ value }}
+                        </label>
+                        {% endfor %}
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="level-right control">
-            <button class="button is-small is-primary is-outlined" type="submit">
-                {{ _("Save settings") }}
-            </button>
-        </div>
-    </form>
-</details>
+            <div class="level-right control">
+                <button class="button is-small is-primary is-outlined" type="submit">
+                    {{ _("Save settings") }}
+                </button>
+            </div>
+        </form>
+    </details>
+</div>
 
 {# announcements and system messages #}
 {% if not activities.number > 1 %}

From 56609bbc2bf0d3b5f13b488815421213fda1a5ca Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sat, 4 Dec 2021 11:18:41 -0800
Subject: [PATCH 2/2] Css linting

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

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 8f6167b78..ca164244c 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -118,10 +118,12 @@ input[type=file]::file-selector-button:hover {
 summary::marker {
     content: none;
 }
+
 .detail-pinned-button summary {
     position: absolute;
     right: 0;
 }
+
 .detail-pinned-button form {
     float: left;
     width: -webkit-fill-available;