From ab43134cc02ea72d5aa9db0cec06fe375303062f Mon Sep 17 00:00:00 2001
From: Vivianne Langdon <puttabutta@gmail.com>
Date: Sat, 26 Nov 2022 14:46:35 -0800
Subject: [PATCH] many minor visual tweaks to fix spacing and usability

---
 bookwyrm/static/css/bookwyrm/_all.scss         |  4 ++++
 .../css/bookwyrm/components/_details.scss      | 18 +++++++++++++-----
 bookwyrm/templates/annual_summary/layout.html  |  2 +-
 bookwyrm/templates/book/book.html              |  8 ++++----
 .../templates/book/edit/edit_book_form.html    |  2 +-
 .../templates/feed/status_types_filter.html    |  2 +-
 bookwyrm/templates/lists/list.html             |  2 +-
 bookwyrm/templates/preferences/2fa.html        |  2 +-
 bookwyrm/templates/search/book.html            |  2 +-
 bookwyrm/templates/settings/automod/rules.html |  2 +-
 .../settings/link_domains/link_domains.html    |  8 ++++----
 .../snippets/filters_panel/filters_panel.html  |  4 ++--
 12 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm/_all.scss b/bookwyrm/static/css/bookwyrm/_all.scss
index 31e732ebe..bb8b032d4 100644
--- a/bookwyrm/static/css/bookwyrm/_all.scss
+++ b/bookwyrm/static/css/bookwyrm/_all.scss
@@ -140,6 +140,10 @@ button:focus-visible .button-invisible-overlay {
     opacity: 1;
 }
 
+button .button-paragraph {
+    vertical-align: middle;
+}
+
 
 /** States
  ******************************************************************************/
diff --git a/bookwyrm/static/css/bookwyrm/components/_details.scss b/bookwyrm/static/css/bookwyrm/components/_details.scss
index de29629c8..4145554eb 100644
--- a/bookwyrm/static/css/bookwyrm/components/_details.scss
+++ b/bookwyrm/static/css/bookwyrm/components/_details.scss
@@ -81,7 +81,19 @@ details.dropdown .dropdown-menu a:focus-visible {
 details.details-panel {
     box-shadow: 0 0 0 1px $border;
     transition: box-shadow 0.2s ease;
-    padding: 0.75rem;
+    padding: 0;
+
+    > * {
+        padding: 0.75rem;
+    }
+
+    summary {
+        position: relative;
+
+        .details-close {
+            padding: 0.75rem;
+        }
+    }
 }
 
 details[open].details-panel,
@@ -89,10 +101,6 @@ details.details-panel:hover {
     box-shadow: 0 0 0 1px $border;
 }
 
-details.details-panel summary {
-    position: relative;
-}
-
 details summary .details-close {
     position: absolute;
     right: 0;
diff --git a/bookwyrm/templates/annual_summary/layout.html b/bookwyrm/templates/annual_summary/layout.html
index 3d1796250..597604504 100644
--- a/bookwyrm/templates/annual_summary/layout.html
+++ b/bookwyrm/templates/annual_summary/layout.html
@@ -53,7 +53,7 @@
                 {% trans "Share this page" %}
             </span>
         </summary>
-        <div class="columns mt-3">
+        <div class="columns">
             <div class="column is-three-fifths is-offset-one-fifth">
 
             {% if year_key %}
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index 4e7862f7a..c5736776d 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -135,7 +135,7 @@
                         {% trans "View on OpenLibrary" %}
                     </a>
                     {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
-                    <button class="button is-small" type="button" data-modal-open="openlibrary_sync">
+                    <button class="button is-small button-paragraph" type="button" data-modal-open="openlibrary_sync">
                         <span class="icon icon-download" title="{{ button_text }}"></span>
                         <span class="is-sr-only-mobile">{{ button_text }}</span>
                     </button>
@@ -150,7 +150,7 @@
                     </a>
 
                     {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
-                    <button class="button is-small" type="button" data-modal-open="inventaire_sync">
+                    <button class="button is-small button-paragraph" type="button" data-modal-open="inventaire_sync">
                         <span class="icon icon-download" title="{{ button_text }}"></span>
                         <span class="is-sr-only-mobile">{{ button_text }}</span>
                     </button>
@@ -189,7 +189,7 @@
 
                 {% if user_authenticated and can_edit_book and not book|book_description %}
                 {% trans 'Add Description' as button_text %}
-                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="add_description" controls_uid=book.id focus="id_description" hide_active=True id="hide_description" %}
+                {% include 'snippets/toggle/open_button.html' with class="mb-2" text=button_text controls_text="add_description" controls_uid=book.id focus="id_description" hide_active=True id="hide_description" %}
 
                 <div class="box is-hidden" id="add_description_{{ book.id }}">
                     <form name="add-description" method="POST" action="{% url "add-description" book.id %}">
@@ -231,7 +231,7 @@
                 {% for shelf in user_shelfbooks %}
                     <li class="box">
                         <a href="{{ shelf.shelf.local_path }}">{{ shelf.shelf.name }}</a>
-                        <div class="mb-3">
+                        <div class="is-pulled-right">
                             {% include 'snippets/shelf_selector.html' with shelf=shelf.shelf class="is-small" readthrough=readthrough %}
                         </div>
                     </li>
diff --git a/bookwyrm/templates/book/edit/edit_book_form.html b/bookwyrm/templates/book/edit/edit_book_form.html
index bf5404be5..ff77443e7 100644
--- a/bookwyrm/templates/book/edit/edit_book_form.html
+++ b/bookwyrm/templates/book/edit/edit_book_form.html
@@ -81,7 +81,7 @@
                     {% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
                 </div>
 
-                <div>
+                <div class="field">
                     <label class="label" for="id_add_subjects">
                         {% trans "Subjects:" %}
                     </label>
diff --git a/bookwyrm/templates/feed/status_types_filter.html b/bookwyrm/templates/feed/status_types_filter.html
index 1a6255b6e..ff1e800f8 100644
--- a/bookwyrm/templates/feed/status_types_filter.html
+++ b/bookwyrm/templates/feed/status_types_filter.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block filter %}
-<label class="label mt-2 mb-1">Status types</label>
+<label class="label mb-1">Status types</label>
 
 <div class="is-flex is-flex-direction-row is-flex-direction-column-mobile">
     {% for name, value in feed_status_types_options %}
diff --git a/bookwyrm/templates/lists/list.html b/bookwyrm/templates/lists/list.html
index cc9956ab5..6824f5007 100644
--- a/bookwyrm/templates/lists/list.html
+++ b/bookwyrm/templates/lists/list.html
@@ -51,7 +51,7 @@
         {% endif %}
 
         {% if not items.object_list.exists %}
-        <p>{% trans "This list is currently empty" %}</p>
+        <p class="block">{% trans "This list is currently empty." %}</p>
         {% else %}
         <ol start="{{ items.start_index }}" class="ordered-list">
         {% for item in items %}
diff --git a/bookwyrm/templates/preferences/2fa.html b/bookwyrm/templates/preferences/2fa.html
index 27ef026fb..7db3c0bcb 100644
--- a/bookwyrm/templates/preferences/2fa.html
+++ b/bookwyrm/templates/preferences/2fa.html
@@ -44,7 +44,7 @@
     {% csrf_token %}
         <p>{% trans "Scan the QR code with your authentication app and then enter the code from  your app below to confirm your app is set up." %}</p>
         <div class="columns">
-            <section class="column is-narrow">
+            <section class="column">
                 <figure class="m-4" id="qrcode">{{ qrcode | safe }}</figure>
                 <details class="details-panel box">
                     <summary>
diff --git a/bookwyrm/templates/search/book.html b/bookwyrm/templates/search/book.html
index f44a55026..262dcf2f9 100644
--- a/bookwyrm/templates/search/book.html
+++ b/bookwyrm/templates/search/book.html
@@ -58,7 +58,7 @@
                 <span class="details-close icon icon-x" aria-hidden="true"></span>
             </summary>
 
-        <div class="mt-5">
+        <div>
             <div class="is-flex is-flex-direction-row-reverse">
                 <ul class="is-flex-grow-1">
                     {% for result in result_set.results %}
diff --git a/bookwyrm/templates/settings/automod/rules.html b/bookwyrm/templates/settings/automod/rules.html
index 128ff20b7..bb13a8d7a 100644
--- a/bookwyrm/templates/settings/automod/rules.html
+++ b/bookwyrm/templates/settings/automod/rules.html
@@ -145,7 +145,7 @@
 
 <div class="block content">
     <h2 class="title is-4">{% trans "Current Rules" %}</h2>
-    <details class="details-panel">
+    <details class="details-panel box">
         <summary>
             <span class="title is-5" role="heading" aria-level="3">
                 {% trans "Show rules" %} ({{ rules.count }})
diff --git a/bookwyrm/templates/settings/link_domains/link_domains.html b/bookwyrm/templates/settings/link_domains/link_domains.html
index c6957f570..e418bf678 100644
--- a/bookwyrm/templates/settings/link_domains/link_domains.html
+++ b/bookwyrm/templates/settings/link_domains/link_domains.html
@@ -40,23 +40,23 @@
                 </h2>
             </header>
             <div class="column is-narrow">
-                <button type="button" class="button" data-modal-open="{{ domain_modal }}">
+                <button type="button" class="button is-small" data-modal-open="{{ domain_modal }}">
                     <span class="icon icon-pencil m-0-mobile" aria-hidden="treu"></span>
                     <span class="is-sr-only-mobile">{% trans "Set display name" %}</span>
                 </button>
             </div>
         </div>
         <div class="block">
-            <details class="details-panel">
+            <details class="details-panel box">
                 <summary>
-                    <span role="heading" aria-level="3" class="title is-6 mb-0">
+                    <span role="heading" aria-level="3" class="title is-6">
                         {% trans "View links" %}
                         ({{ domain.links.count }})
                     </span>
                     <span class="details-close icon icon-x" aria-hidden="true"></span>
                 </summary>
 
-                <div class="table-container mt-4">
+                <div class="table-container pt-0">
                     {% include "settings/link_domains/link_table.html" with links=domain.links.all|slice:10 %}
                 </div>
             </details>
diff --git a/bookwyrm/templates/snippets/filters_panel/filters_panel.html b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
index f0fe5d3f1..928b4f69b 100644
--- a/bookwyrm/templates/snippets/filters_panel/filters_panel.html
+++ b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
@@ -25,7 +25,7 @@
         <span class="details-close icon icon-x is-{{ size|default:'normal' }}" aria-hidden="true"></span>
     </summary>
 
-    <div class="mt-3">
+    <div>
         <form id="filters" method="{{ method|default:'get' }}" action="{{ action|default:request.path }}">
             {% if method == 'post' %}
                 {% csrf_token %}
@@ -34,7 +34,7 @@
             {% if sort %}
             <input type="hidden" name="sort" value="{{ sort }}">
             {% endif %}
-            <div class="mt-3 columns filters-fields is-align-items-stretch">
+            <div class="columns filters-fields is-align-items-stretch">
                 {% block filter_fields %}
                 {% endblock %}
             </div>