Cleans up styling on author page

Better mobile display, trim long text blocks

bookwyrm/templates/author/author.html

@@ -23,41 +23,54 @@
     </div>
 </div>
 
-<div class="block columns content" itemscope itemtype="https://schema.org/Person">
+<div class="block columns is-flex-direction-row-reverse" itemscope itemtype="https://schema.org/Person">
     <meta itemprop="name" content="{{ author.name }}">
+    {% if author.bio %}
+    <div class="column">
+        {% include "snippets/trimmed_text.html" with full=author.bio trim_length=200 %}
+    </div>
+    {% endif %}
 
-    {% if author.aliases or author.born or author.died or author.wikipedia_link or author.openlibrary_key or author.inventaire_id or author.isni %}
+    {% firstof author.aliases author.born author.died as details %}
+    {% firstof author.wikipedia_link author.openlibrary_key author.inventaire_id author.isni as links %}
+    {% if details or links %}
     <div class="column is-two-fifths">
-        <div class="box py-2">
+        {% if details %}
-            <dl>
+        <section class="block content">
+            <h2 class="title is-4">{% trans "Author details" %}</h2>
+            <dl class="box">
                 {% if author.aliases %}
-                <div class="is-flex is-flex-wrap-wrap my-1">
+                <div class="is-flex is-flex-wrap-wrap mr-1">
                     <dt class="has-text-weight-bold mr-1">{% trans "Aliases:" %}</dt>
-                    {% for alias in author.aliases %}
+                    <dd>
-                        <dd itemprop="alternateName" content="{{alias}}">
+                        {% include "snippets/trimmed_list.html" with items=author.aliases itemprop="alternateName" %}
-                            {{alias}}{% if not forloop.last %},&nbsp;{% endif %}
                     </dd>
-                    {% endfor %}
                 </div>
                 {% endif %}
 
                 {% if author.born %}
-                <div class="is-flex my-1">
+                <div class="is-flex mt-1">
                     <dt class="has-text-weight-bold mr-1">{% trans "Born:" %}</dt>
                     <dd itemprop="birthDate">{{ author.born|naturalday }}</dd>
                 </div>
                 {% endif %}
 
                 {% if author.died %}
-                <div class="is-flex my-1">
+                <div class="is-flex mt-1">
                     <dt class="has-text-weight-bold mr-1">{% trans "Died:" %}</dt>
                     <dd itemprop="deathDate">{{ author.died|naturalday }}</dd>
                 </div>
                 {% endif %}
             </dl>
+        </section>
+        {% endif %}
 
+        {% if links %}
+        <section>
+            <h2 class="title is-4">{% trans "External links" %}</h2>
+            <div class="box">
                 {% if author.wikipedia_link %}
-            <p class="my-1">
+                <p>
                     <a itemprop="sameAs" href="{{ author.wikipedia_link }}" rel="noopener" target="_blank">
                         {% trans "Wikipedia" %}
                     </a>
@@ -65,7 +78,7 @@
                 {% endif %}
 
                 {% if author.isni %}
-            <p class="my-1">
+                <p>
                     <a itemprop="sameAs" href="{{ author.isni_link }}" rel="noopener" target="_blank">
                         {% trans "View ISNI record" %}
                     </a>
@@ -73,7 +86,7 @@
                 {% endif %}
 
                 {% if author.openlibrary_key %}
-            <p class="my-1">
+                <p>
                     <a itemprop="sameAs" href="{{ author.openlibrary_link }}" target="_blank" rel="noopener">
                         {% trans "View on OpenLibrary" %}
                     </a>
@@ -87,7 +100,7 @@
                 {% endif %}
 
                 {% if author.inventaire_id %}
-            <p class="my-1">
+                <p>
                     <a itemprop="sameAs" href="{{ author.inventaire_link }}" target="_blank" rel="noopener">
                         {% trans "View on Inventaire" %}
                     </a>
@@ -101,7 +114,7 @@
                 {% endif %}
 
                 {% if author.librarything_key %}
-            <p class="my-1">
+                <p>
                     <a itemprop="sameAs" href="https://www.librarything.com/author/{{ author.librarything_key }}" target="_blank" rel="noopener">
                         {% trans "View on LibraryThing" %}
                     </a>
@@ -109,28 +122,29 @@
                 {% endif %}
 
                 {% if author.goodreads_key %}
-            <p class="my-1">
+                <p>
                     <a itemprop="sameAs" href="https://www.goodreads.com/author/show/{{ author.goodreads_key }}" target="_blank" rel="noopener">
                         {% trans "View on Goodreads" %}
                     </a>
                 </p>
                 {% endif %}
             </div>
-    </div>
+        </section>
-    {% endif %}
-    <div class="column">
-        {% if author.bio %}
-            {{ author.bio|to_markdown|safe }}
         {% endif %}
     </div>
+    {% endif %}
 </div>
 
+<hr aria-hidden="true">
+
 <div class="block">
-    <h3 class="title is-4">{% blocktrans with name=author.name %}Books by {{ name }}{% endblocktrans %}</h3>
+    <h2 class="title is-4">{% blocktrans with name=author.name %}Books by {{ name }}{% endblocktrans %}</h2>
     <div class="columns is-multiline is-mobile">
     {% for book in books %}
-        <div class="column is-one-fifth">
+        <div class="column is-one-fifth-tablet is-half-mobile is-flex is-flex-direction-column">
+            <div class="is-flex-grow-1">
                 {% include 'landing/small-book.html' with book=book %}
+            </div>
             {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
         </div>
     {% endfor %}

bookwyrm/templates/snippets/trimmed_list.html

@@ -0,0 +1,34 @@
+{% spaceless %}
+{% load i18n %}
+{% load humanize %}
+{% firstof limit 3 as limit %}
+{% with subtraction_value='-'|add:limit %}
+{% with remainder_count=items|length|add:subtraction_value %}
+{% with remainder_count_display=remainder_count|intcomma %}
+
+<details>
+    <summary>
+    {% for item in items|slice:limit %}
+        <span
+            {% if itemprop %}itemprop="{{ itemprop }}"{% endif %}
+        >{{ item }}</span>{% if not forloop.last %}, {% elif remainder_count > 0 %}, {% blocktrans trimmed count counter=remainder_count %}
+            and {{ remainder_count_display }} other
+        {% plural %}
+            and {{ remainder_count_display }} others
+        {% endblocktrans %}
+        {% endif %}
+    {% endfor %}
+    </summary>
+
+    {% for item in items|slice:"3:" %}
+    <span
+        {% if itemprop %}itemprop="{{ itemprop }}"{% endif %}
+    >{{ item }}</span>{% if not forloop.last %}, {% endif %}
+    {% endfor %}
+</details>
+
+
+{% endwith %}
+{% endwith %}
+{% endwith %}
+{% endspaceless %}