Merge pull request #2460 from viviicat/visual-tweaks

Visual tweaks

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
  ******************************************************************************/

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;

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 %}

bookwyrm/templates/author/author.html

@@ -144,7 +144,7 @@
         {% for book in books %}
         {% with book=book|author_edition:author %}
             <div class="column is-one-fifth-tablet is-half-mobile is-flex is-flex-direction-column">
-                <div class="is-flex-grow-1">
+                <div class="is-flex-grow-1 mb-3">
                     {% include 'landing/small-book.html' with book=book %}
                 </div>
                 {% include 'snippets/shelve_button/shelve_button.html' with book=book %}

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,15 +189,15 @@
 
                 {% 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 %}">
                         {% csrf_token %}
-                        <p class="fields is-grouped">
+                        <div class="field">
                             <label class="label" for="id_description_{{ book.id }}">{% trans "Description:" %}</label>
                             <textarea name="description" cols="None" rows="None" class="textarea" id="id_description_{{ book.id }}"></textarea>
-                        </p>
+                        </div>
                         <div class="field">
                             <button class="button is-primary" type="submit">{% trans "Save" %}</button>
                             {% trans "Cancel" as button_text %}
@@ -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>

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>

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 %}

bookwyrm/templates/lists/layout.html

@@ -12,12 +12,16 @@
         </p>
     </div>
 
-    <div class="column is-narrow is-flex">
+    <div class="column is-narrow is-flex field is-grouped">
         {% if request.user == list.user %}
+        <div class="control">
             {% trans "Edit List" as button_text %}
             {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit_list" focus="edit_list_header" %}
+        </div>
         {% endif %}
-        {% include "lists/bookmark_button.html" with list=list %}
+        <div class="control">
+            {% include "lists/bookmark_button.html" with list=list %}
+        </div>
     </div>
 </header>
 

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 %}

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>

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 %}

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 }})

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>

bookwyrm/templates/shelf/shelf.html

@@ -134,7 +134,7 @@
     {% endif %}
 </div>
 
-<div class="block">
+<div class="block mt-2">
     {% include 'shelf/edit_shelf_form.html' with controls_text="edit_shelf_form" %}
 </div>
 

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>