Fixes UI for statuses

bookwyrm/models/status.py

@@ -214,7 +214,7 @@ class Boost(Status):
         ActivityMapping('object', 'boosted_status'),
     ]
 
-    activity_serializer = activitypub.Like
+    activity_serializer = activitypub.Boost
 
     # This constraint can't work as it would cross tables.
     # class Meta:

bookwyrm/static/css/format.css

@@ -31,7 +31,7 @@ input.toggle-control {
     display: none;
 }
 
-.toggle-content.hidden {
+.hidden {
     display: none;
 }
 

bookwyrm/templates/feed.html

@@ -5,7 +5,7 @@
 <section class="section" id="feed">
     <div class="container">
         {% for activity in activities %}
-        <div class="card">
+        <div class="block">
         {% include 'snippets/status.html' with status=activity %}
         </div>
         {% endfor %}

bookwyrm/templates/snippets/book_titleby.html

@@ -1,8 +1,8 @@
-<span class="title">
+<span>
     <a href="/book/{{ book.id }}">{{ book.title }}</a>
 </span>
 {% if book.authors %}
-<span class="author">
+<span>
     by {% include 'snippets/authors.html' with book=book %}
 </span>
 {% endif %}

bookwyrm/templates/snippets/interaction.html

@@ -1,20 +1,22 @@
 {% load fr_display %}
-<div class="nav level">
+<div class="card-footer-item">
     {% if request.user.is_authenticated %}
     <form name="reply" action="/reply" method="post" onsubmit="return reply(event)">
+        <div class="field is-grouped">
         {% csrf_token %}
         <input type="hidden" name="parent" value="{{ activity.id }}">
         <textarea name="content" placeholder="Leave a comment..." id="id_content" required="true"></textarea>
-        <button type="submit">
+        <button class="button" type="submit">
             <span class="icon icon-comment">
                 <span class="hidden-text">Comment</span>
             </span>
         </button>
+        </div>
     </form>
 
     <form name="boost" action="/boost/{{ activity.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}">
         {% csrf_token %}
-        <button type="submit">
+        <button class="button" type="submit">
             <span class="icon icon-boost">
                 <span class="hidden-text">Boost status</span>
             </span>
@@ -22,7 +24,7 @@
     </form>
     <form name="unboost" action="/unboost/{{ activity.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}">
         {% csrf_token %}
-        <button type="submit">
+        <button class="button is-success" type="submit">
             <span class="icon icon-boost">
                 <span class="hidden-text">Un-boost status</span>
             </span>
@@ -31,7 +33,7 @@
 
     <form name="favorite" action="/favorite/{{ activity.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}">
         {% csrf_token %}
-        <button type="submit">
+        <button class="button" type="submit">
             <span class="icon icon-heart">
                 <span class="hidden-text">Like status</span>
             </span>
@@ -39,7 +41,7 @@
     </form>
     <form name="unfavorite" action="/unfavorite/{{ activity.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}">
         {% csrf_token %}
-        <button type="submit">
+        <button class="button is-success" type="submit">
             <span class="icon icon-heart">
                 <span class="hidden-text">Un-like status</span>
             </span>
@@ -62,3 +64,8 @@
     {% endif %}
 </div>
 
+<div class="card-footer-item">
+    <span class="icon icon-public">
+        <span class="hidden-text">Public post</span>
+    </span>
+</div>

bookwyrm/templates/snippets/status.html

@@ -1,23 +1,24 @@
 {% load fr_display %}
 
-<div class="post{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
+
-    <h2 class="level">
+<div class="card{% if depth %}depth-{{ depth }} {% if main %}main{% else %}reply{% endif %}{% endif %}">
-    {% if status.boosted_status %}
+    <header class="card-header level">
-        {% include 'snippets/status_header.html' with status=status.boosted_status %}
-        <small class="subhead">{% include 'snippets/status_header.html' with status=status %}</small>
-    {% else %}
     {% include 'snippets/status_header.html' with status=status %}
-    {% endif %}
+    </header>
-    </h2>
 
-    <div class="status-content">
+    <div class="card-content">
-        {% include 'snippets/status_content.html' with status=status %}
-    </div>
-
-</div>
         {% if status.status_type == 'Boost' %}
-{% include 'snippets/interaction.html' with activity=status|boosted_status %}
+        {% include 'snippets/status_content.html' with status=status.boosted_status %}
+        {% else %}
+        {% include 'snippets/status_content.html' with status=status %}
+        {% endif %}
+    </div>
+
+    <footer class="card-footer">
+        {% if status.status_type == 'Boost' %}
+        {% include 'snippets/interaction.html' with activity=status.boosted_status %}
         {% else %}
         {% include 'snippets/interaction.html' with activity=status %}
         {% endif %}
-
+    </footer>
+</div>

bookwyrm/templates/snippets/status_content.html

@@ -5,7 +5,6 @@
     <div class="media-left">
         {% for book in status.mention_books.all|slice:"0:4" %}
         <div>
-            <div class="cover-container">
             {% include 'snippets/book_cover.html' with book=book %}
             {% if status.mention_books.count > 1 %}
             <p>{% include 'snippets/book_titleby.html' with book=book %}</p>
@@ -13,23 +12,18 @@
             {% include 'snippets/rate_action.html' with book=book user=request.user %}
             {% include 'snippets/shelve_button.html' with book=book %}
         </div>
-            {% if status.mention_books.count == 1 %}
-            <div>
-                <p>{% include 'snippets/book_titleby.html' with book=book %}</p>
-                {% include 'snippets/book_description.html' with book=book %}
-            </div>
-            {% endif %}
-        </div>
         {% endfor %}
     </div>
     {% endif %}
 
     {% if not hide_book and status.book %}
     <div class="media-left">
+        <div>
         {% include 'snippets/book_cover.html' with book=status.book %}
         {% include 'snippets/rate_action.html' with book=status.book user=request.user %}
         {% include 'snippets/shelve_button.html' with book=status.book %}
         </div>
+    </div>
     {% endif %}
 
     <div class="media-content">
@@ -48,10 +42,14 @@
         </div>
         {% endif %}
 
-        {% if status.content and  status.status_type != 'Update' and status.status_type != 'Boost' %}
+        {% if status.content and  status.status_type != 'GeneratedNote' and status.status_type != 'Boost' %}
             <blockquote>{{ status.content | safe }}</blockquote>
         {% endif %}
 
+        {% if status.mention_books.count == 1 and not status.book %}
+            {% include 'snippets/book_description.html' with book=status.mention_books.first %}
+        {% endif %}
+
         {% if not status.content and status.book and not hide_book and status.status_type != 'Boost' %}
             {% include 'snippets/book_description.html' with book=status.book %}
         {% endif %}

bookwyrm/templates/snippets/status_header.html

@@ -1,12 +1,14 @@
 {% load humanize %}
 {% load fr_display %}
-<div class="level-left">
+<div class="level-left card-header-title">
-    <div>
+    <p>
         {% include 'snippets/avatar.html' with user=status.user %}
 
         {% include 'snippets/username.html' with user=status.user %}
-        {% if status.status_type == 'Update' %}
+        {% if status.status_type == 'GeneratedNote' %}
-            {{ status.content | safe }}
+            {{ status.content | safe }} {% include 'snippets/book_titleby.html' with book=status.mention_books.first %}
+        {% elif status.status_type == 'Boost' %}
+            boosted {% include 'snippets/avatar.html' with user=status.boosted_status.user %}{% include 'snippets/username.html' with user=status.boosted_status.user possessive=True %} status
         {% elif status.status_type == 'Review' and not status.name and not status.content%}
             rated <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
         {% elif status.status_type == 'Review' %}
@@ -15,17 +17,15 @@
             commented on <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
         {% elif status.status_type == 'Quotation' %}
             quoted <a href="/book/{{ status.book.id }}">{{ status.book.title }}</a>
-        {% elif status.status_type == 'Boost' %}
-            boosted
         {% elif status.reply_parent %}
             {% with parent_status=status|parent %}
-            replied to {% include 'snippets/username.html' with user=parent_status.user possessive=True %} <a href="{{parent_status.remote_id }}">{{ parent_status.status_type | lower }}</a>
+            replied to {% include 'snippets/username.html' with user=parent_status.user possessive=True %} <a href="{{parent_status.remote_id }}">{% if parent_status.status_type == 'GeneratedNote' %}update{% else %}{{ parent_status.status_type | lower }}{% endif %}</a>
             {% endwith %}
         {% endif %}
+    </p>
 </div>
-</div>
+<div class="level-right card-header-title">
-<div class="level-right">
+    <p>
-    <div>
         <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
-    </div>
+    </p>
 </div>