Show suggestion list suggestions in columns

bookwyrm/templates/book/suggestion_list/list.html

@@ -3,16 +3,16 @@
 
 <h2 class="title is-3" id="suggestions-section">
     {% trans "Suggestions" %}
-    {% if book.suggestion_list %}
-    <a class="help has-text-weight-normal" href="{% url 'list' book.suggestion_list.id %}">
-        {% blocktrans trimmed  with count=book.suggestion_list.listitem_set.count|intcomma %}
-        View all {{ count }} suggestions
-        {% endblocktrans %}
-    </a>
-    {% endif %}
 </h2>
 
 {% if book.suggestion_list %}
+
+<p class="subtitle">
+    {% blocktrans trimmed with title=book.title %}
+    Readers who liked <em>{{ title }}</em> recommend giving these books a try:
+    {% endblocktrans %}
+</p>
+
 {% with book.suggestion_list.listitem_set.all|slice:3 as items %}
 
     {% if items|length == 0 %}
@@ -22,16 +22,22 @@
         </div>
     </section>
     {% else %}
+    <a class="help has-text-weight-normal" href="{% url 'list' book.suggestion_list.id %}">
+        {% blocktrans trimmed  with count=book.suggestion_list.listitem_set.count|intcomma %}
+        View all {{ count }} suggestions
+        {% endblocktrans %}
+    </a>
     <ol class="columns is-multiline">
     {% for item in items %}
         <li class="mb-5 column is-one-third">
             {% include "book/suggestion_list/book_card.html" %}
         </li>
     {% endfor %}
-        <li class="mb-5 column is-full">
-            {% include "book/suggestion_list/search.html" %}
-        </li>
     </ol>
+
+    <div class="mb-5 column is-full">
+        {% include "book/suggestion_list/search.html" %}
+    </div>
     {% endif %}
 {% endwith %}
 {% else %}

bookwyrm/templates/book/suggestion_list/search.html

@@ -12,7 +12,7 @@
     </summary>
     {% url 'book' book_id=book.id as partial_url %}
     {% with search_url=partial_url|add:"#add-suggestions" %}
-    {% include "lists/suggestion_search.html" with is_suggestion=True query_param="suggestion_query" %}
+    {% include "lists/suggestion_search.html" with is_suggestion=True query_param="suggestion_query" columns=True %}
     {% endwith %}
 </details>
 {% endwith %}

bookwyrm/templates/lists/list_item_notes.html

@@ -2,20 +2,22 @@
 {% load utilities %}
 
 {% if item.notes %}
-<div class="media notification">
-    <figure class="media-left" aria-hidden="true">
-        {% include "snippets/avatar.html" with user=item.user %}
-    </figure>
-    <div class="media-content">
-        <div class="content">
-            <header>
-                {% url 'user-feed' item.user|username as user_path %}
-                {% blocktrans trimmed with username=item.user.display_name %}
-                <a href="{{ user_path }}">{{ username }}</a> says:
-                {% endblocktrans %}
-            </header>
-            {% include 'snippets/trimmed_text.html' with no_trim=no_trim full=item.notes %}
-        </div>
+<div class="notification">
+    <div class="is-flex mb-3">
+        <figure class="mr-3" aria-hidden="true">
+            {% include "snippets/avatar.html" with user=item.user %}
+        </figure>
+        <header>
+            {% url 'user-feed' item.user|username as user_path %}
+            {% blocktrans trimmed with username=item.user.display_name %}
+            <a href="{{ user_path }}">{{ username }}</a> says:
+            {% endblocktrans %}
+        </header>
+    </div>
+    <div class="block">
+
+        {% include 'snippets/trimmed_text.html' with no_trim=no_trim full=item.notes %}
+
         {% if item.user == request.user and not hide_edit %}
         <div>
             <details class="details-panel box">

bookwyrm/templates/lists/suggestion_search.html

@@ -27,7 +27,9 @@
 {% endif %}
 
 {% if suggested_books|length > 0 %}
+<div{% if columns %} class="columns is-multiline"{% endif %}>
     {% for book in suggested_books %}
+    <div class="block {% if columns %}column is-5 m-0{% endif %}">
         <div class="columns is-mobile is-gapless">
             <a
                 class="column is-2-mobile is-3-tablet is-cover align to-c"
@@ -37,7 +39,7 @@
                 {% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto is-h-s-mobile align to-t' size='small' %}
             </a>
 
-            <div class="column ml-3">
+            <div class="column ml-3 control">
                 <p>{% include 'snippets/book_titleby.html' with book=book %}</p>
 
                 {% join "add_item" list.id book.id as modal_id %}
@@ -55,6 +57,8 @@
                 {% include "lists/add_item_modal.html" with id=modal_id is_suggestion=is_suggestion %}
             </div>
         </div>
+    </div>
     {% endfor %}
+</div>
 {% endif %}