Redesign of interaction panel

fedireads/static/format.css

@@ -364,10 +364,39 @@ blockquote {
 .interaction {
     background-color: #B2DBBF;
     border-radius: 0 0 0.5em 0.5em;
+    display: flex;
+    flex-direction: row;
+    padding: 0.5em;
+}
+.interaction > * {
+    margin-right: 0.5em;
+}
+.interaction button:hover {
+    box-shadow: #247BA0 0em 0em 1em 0em;
+    color: #247BA0;
+}
+.interaction button.active:hover .icon {
+    color: #888;
+}
+.interaction button {
+    background: white;
+    height: 2em;
+    min-width: 3em;
+    padding: 0;
+    color: #888;
+}
+.interaction button.active .icon {
+    color: #FF1654;
 }
-
 .interaction textarea {
     height: 2em;
+    width: 23em;
+    float: left;
+    padding: 0.25em;
+    margin-right: 0.5em;
+}
+.interaction textarea:valid, .interaction textarea:focus {
+    height: 4em;
 }
 
 table {
@@ -408,6 +437,10 @@ th, td {
     position: relative;
     right: 2em;
 }
+.post .time-ago {
+    position: relative;
+    left: 2em;
+}
 .post .user-pic, .compose-suggestion .user-pic {
     right: 0.25em;
 }

fedireads/templates/snippets/interaction.html

@@ -1,26 +1,33 @@
 {% load fr_display %}
 <div class="interaction">
-    {% if activity.favorites.all %}
-    <span>
-        {{ activity.favorites.count }} like{{activity.favorites.count|pluralize }}
-    </span>
-    {% endif %}
-    {% if activity|reply_count %}
-    <span>
-        <a href="{{ activity.absolute_id }}">
-            {{ activity|reply_count }} repl{{ activity|reply_count|pluralize:'y,ies' }}
-        </a>
-    </span>
-    {% endif %}
-    <form name="favorite" action="/favorite/{{ activity.id }}" method="post">
-        {% csrf_token %}
-        <button>⭐️ Like</button>
-    </form>
+
     <form name="comment" action="/comment" method="post">
         {% csrf_token %}
         <input type="hidden" name="parent" value="{{ activity.id }}"></input>
-        <textarea name="content" cols="40" rows="10" id="id_content"></textarea>
-        <button type="submit">Comment</button>
+        <textarea name="content" placeholder="Leave a comment..." id="id_content" required="true"></textarea>
+        <button type="submit" class="comment">
+            <span class="icon icon-comment">
+                <span class="hidden-text">Comment</span>
+            </span>
+        </button>
+    </form>
+
+    <form name="boost" action="/boost/{{ activity.id }}" method="post">
+        {% csrf_token %}
+        <button type="submit" class="{% if False %}active{% endif %}">
+            <span class="icon icon-boost">
+                <span class="hidden-text">Boost status</span>
+            </span>
+        </button>
+    </form>
+
+    <form name="favorite" action="/favorite/{{ activity.id }}" method="post">
+        {% csrf_token %}
+        <button type="submit" class="{% if request.user|liked:status %}active{% endif %}">
+            <span class="icon icon-heart">
+                <span class="hidden-text">Like status</span>
+            </span>
+        </button>
     </form>
 </div>
 

fedireads/templatetags/fr_display.py

@@ -70,6 +70,15 @@ def get_parent(status):
     return models.Status.objects.filter(id=status.reply_parent_id).select_subclasses().get()
 
 
+@register.filter(name='liked')
+def get_user_liked(user, status):
+    try:
+        models.Favorite.objects.get(user=user, status=status)
+        return True
+    except models.Favorite.DoesNotExist:
+        return False
+
+
 @register.simple_tag(takes_context=True)
 def shelve_button_identifier(context, book):
     ''' check what shelf a user has a book on, if any '''