Make status footer more mobile friendly

bookwyrm/templates/snippets/boost_button.html

@@ -0,0 +1,19 @@
+{% load fr_display %}
+{% with activity.id|uuid as uuid %}
+<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 }}-{{ uuid }}">
+    {% csrf_token %}
+    <button class="button is-small" type="submit">
+        <span class="icon icon-boost">
+            <span class="is-sr-only">Boost status</span>
+        </span>
+    </button>
+</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 }}-{{ uuid }}">
+    {% csrf_token %}
+    <button class="button is-small is-success" type="submit">
+        <span class="icon icon-boost">
+            <span class="is-sr-only">Un-boost status</span>
+        </span>
+    </button>
+</form>
+{% endwith %}

bookwyrm/templates/snippets/fav_button.html

@@ -0,0 +1,19 @@
+{% load fr_display %}
+{% with activity.id|uuid as uuid %}
+<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 }}-{{ uuid }}">
+    {% csrf_token %}
+    <button class="button is-small" type="submit">
+        <span class="icon icon-heart">
+            <span class="is-sr-only">Like status</span>
+        </span>
+    </button>
+</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 }}-{{ uuid }}">
+    {% csrf_token %}
+    <button class="button is-success is-small" type="submit">
+        <span class="icon icon-heart">
+            <span class="is-sr-only">Un-like status</span>
+        </span>
+    </button>
+</form>
+{% endwith %}

bookwyrm/templates/snippets/reply_form.html

@@ -0,0 +1,33 @@
+{% load fr_display %}
+{% with activity.id|uuid as uuid %}
+<form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)">
+    <div class="columns">
+        {% csrf_token %}
+        <input type="hidden" name="reply_parent" value="{{ activity.id }}">
+        <input type="hidden" name="user" value="{{ request.user.id }}">
+        <div class="column">
+            <div class="field">
+                <textarea class="textarea" name="content" placeholder="Leave a comment..." id="id_content_{{ activity.id }}-{{ uuid }}" required="true"></textarea>
+            </div>
+        </div>
+
+        <div class="column is-narrow">
+            <div class="field">
+                <div class="select">
+                    <select name="privacy">
+                        <option value="public" selected>Public</option>
+                        <option value="unlisted">Unlisted</option>
+                        <option value="followers">Followers only</option>
+                        <option value="direct">Private</option>
+                    </select>
+                </div>
+            </div>
+            <div class="field">
+                <button class="button is-primary" type="submit">
+                    post reply
+                </button>
+            </div>
+        </div>
+    </div>
+</form>
+{% endwith %}

bookwyrm/templates/snippets/status.html

@@ -47,10 +47,8 @@
             <div class="card-footer-item">
                 {% if request.user.is_authenticated %}
 
-                <label class="button" for="show-comment-{{ status.id }}">
+                <label class="button is-small" for="show-comment-{{ status.id }}">
-                    <span class="ic-n icon-comment">
+                    <span class="icon icon-comment"><span class="is-sr-only">Comment</span></span>
-                        <span class="is-sr-only">Comment</span>
-                    </span>
                 </label>
                 {% if status.status_type == 'Boost' %}
                 {% include 'snippets/boost_button.html' with status=status|boosted_status %}
@@ -95,35 +93,38 @@
                     <span class="is-sr-only">Private post</span>
                 </span>
                 {% endif %}
+            </div>
 
-                <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
+            <div class="card-footer-item">
-
+                <a href="{{ status.remote_id }}">{{ status.published_date | post_date }}</a>
-                {% if status.user == request.user %}
+            </div>
+            {% if status.user == request.user %}
+            <div class="card-footer-item">
                 <label class="button" for="more-info-{{ status.id }}">
                     <div class="icon icon-dots-three">
                         <span class="is-sr-only">More options</span>
                     </div>
                 </label>
-                {% endif %}
-            </div>
-        </div>
-
-        <input class="toggle-control" type="checkbox" name="more-info-{{ status.id }}" id="more-info-{{ status.id }}">
-        <div class="toggle-content hidden card-footer">
-            {% if status.user == request.user %}
-            <div class="card-footer-item">
-                <form name="delete-{{status.id}}" action="/delete-status" method="post">
-                    {% csrf_token %}
-                    <input type="hidden" name="status" value="{{ status.id }}">
-                    <button type="submit" class="button">
-                        <span class="icon icon-x">
-                            <span class="is-sr-only">Delete post</span>
-                        </span>
-                    </button>
-                </form>
             </div>
             {% endif %}
         </div>
+
+        <div>
+            <input class="toggle-control" type="checkbox" name="more-info-{{ status.id }}" id="more-info-{{ status.id }}">
+            <div class="toggle-content hidden card-footer">
+                {% if status.user == request.user %}
+                <div class="card-footer-item">
+                    <form name="delete-{{status.id}}" action="/delete-status" method="post">
+                        {% csrf_token %}
+                        <input type="hidden" name="status" value="{{ status.id }}">
+                        <button type="submit" class="button">
+                            Delete post
+                        </button>
+                    </form>
+                </div>
+                {% endif %}
+            </div>
+        </div>
     </footer>
 </div>
 {% else %}

bookwyrm/templatetags/fr_display.py

@@ -1,6 +1,10 @@
 ''' template filters '''
 from uuid import uuid4
+from datetime import datetime
+
+from dateutil.relativedelta import relativedelta
 from django import template
+from django.utils import timezone
 
 from bookwyrm import models
 
@@ -133,6 +137,26 @@ def get_uuid(identifier):
     return '%s%s' % (identifier, uuid4())
 
 
+@register.filter(name="post_date")
+def time_since(date):
+    ''' concise time ago function '''
+    if not isinstance(date, datetime):
+        return ''
+    now = timezone.now()
+    delta = now - date
+
+    if date < (now - relativedelta(weeks=1)):
+        return date.strftime('%b %-d')
+    delta = relativedelta(now, date)
+    if delta.days:
+        return '%dd' % delta.days
+    if delta.hours:
+        return '%dh' % delta.hours
+    if delta.minutes:
+        return '%dm' % delta.minutes
+    return '%ds' % delta.seconds
+
+
 @register.simple_tag(takes_context=True)
 def shelve_button_identifier(context, book):
     ''' check what shelf a user has a book on, if any '''