Various UX tweaks and front end fixes. (#230)

activities/services/timeline.py

@@ -1,6 +1,6 @@
 from django.db import models
 
-from activities.models import Hashtag, Post, TimelineEvent
+from activities.models import Hashtag, Post, PostInteraction, TimelineEvent
 from users.models import Identity
 
 
@@ -33,6 +33,20 @@ class TimelineService:
                 "subject_post__mentions",
                 "subject_post__emojis",
             )
+            .annotate(
+                like_count=models.Count(
+                    "subject_post__interactions",
+                    filter=models.Q(
+                        subject_post__interactions__type=PostInteraction.Types.like
+                    ),
+                ),
+                boost_count=models.Count(
+                    "subject_post__interactions",
+                    filter=models.Q(
+                        subject_post__interactions__type=PostInteraction.Types.boost
+                    ),
+                ),
+            )
             .order_by("-published")
         )
 

docker/run.sh

@@ -6,6 +6,7 @@ sed -i s/__CACHESIZE__/${CACHE_SIZE}/g /takahe/docker/nginx.conf
 
 # Run nginx and gunicorn
 nginx -c "/takahe/docker/nginx.conf" &
+
 gunicorn takahe.wsgi:application -b 0.0.0.0:8001 &
 
 # Wait for any process to exit

static/css/style.css

@@ -939,6 +939,9 @@ table.metadata td .emoji {
 
 .post {
     margin-bottom: 20px;
+    background: var(--color-bg-box);
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+    padding: 14px;
 }
 
 .post.mini {
@@ -953,13 +956,7 @@ table.metadata td .emoji {
     overflow: hidden;
 }
 
-.left-column .post {
+form .post {
-    background: var(--color-bg-box);
-    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
-    padding: 10px;
-}
-
-.left-column form .post {
     background-color: var(--color-bg-main);
 }
 
@@ -1005,7 +1002,7 @@ table.metadata td .emoji {
 }
 
 .post .summary {
-    margin: 12px 0 4px 64px;
+    margin: 12px 0 4px 0;
     padding: 3px 6px;
     border-radius: 3px;
     background: var(--color-bg-menu);
@@ -1026,18 +1023,13 @@ table.metadata td .emoji {
 }
 
 .post .edited {
-    margin-left: 64px;
     font-weight: lighter;
     color: var(--color-text-duller);
 }
 
-.post .content {
-    margin-left: 64px;
-}
-
 .post.mini .content,
 .post.mini .edited {
-    margin-left: 0px;
+    margin-left: 0;
 }
 
 .post .content.hidden {
@@ -1065,40 +1057,43 @@ table.metadata td .emoji {
 }
 
 .post .actions {
-    position: relative;
+    display: flex;
-    float: right;
+    justify-content: space-between;
-    padding: 3px 5px 0 0;
+    padding: 8px 0 0 0;
+    align-items: center;
+    align-content: center;
+    margin-bottom: -8px;
+}
+
+.post .post-action {
+    padding: 2px 4px;
+    border-radius: 4px;
+    min-width: 60px;
+    text-align: center;
+}
+
+.post .post-action:hover {
+    background-color: var(--color-bg-main);
 }
 
 .post .actions a {
     text-align: center;
     cursor: pointer;
     color: var(--color-text-dull);
-    margin-right: 5px;
 }
 
 .post .actions a.menu {
-    width: 16px;
-    display: inline-block;
-}
-
-.post .actions a:hover {
-    color: var(--color-text-main);
-}
-
-.post .actions a.active {
-    color: var(--color-highlight);
 }
 
 .post .actions menu {
-    position: absolute;
     display: none;
-    top: 25px;
-    right: 10px;
     background-color: var(--color-bg-menu);
     border-radius: 5px;
     padding: 5px 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    position: absolute;
+    left: -130px;
+    top: -130px;
 }
 
 .post .actions menu.enabled {
@@ -1118,14 +1113,29 @@ table.metadata td .emoji {
     width: 16px;
 }
 
-.post a.hashtag,
+.post .actions .dropdown {
-.post.mini a.hashtag {
+    position: relative;
-    text-decoration: none;
-    color: var(--color-text-link);
 }
 
-.post a.hashtag:hover,
+.post .actions a:hover {
-.post.mini a.hashtag:hover {
+    color: var(--color-text-main);
+}
+
+.post .actions a.active {
+    color: var(--color-highlight);
+}
+
+.post .handle .link:hover {
+    text-decoration: underline;
+}
+
+.post .content a {
+    word-break: break-all;
+    text-decoration: none;
+    color: var(--color-highlight);
+}
+
+.post .content a:hover {
     text-decoration: underline;
 }
 
@@ -1167,7 +1177,7 @@ table.metadata td .emoji {
 .mention-banner,
 .follow-banner,
 .like-banner {
-    padding: 0 0 3px 5px;
+    padding: 3px 0 3px 10px;
 }
 
 .boost-banner .emoji,
@@ -1328,6 +1338,20 @@ table.metadata td .emoji {
     footer {
         display: none;
     }
+
+    #main-content {
+        padding: 0;
+    }
+
+    #side-navigation,
+    header menu .identity {
+        border-left: 1px solid var(--color-input-border);
+    }
+
+    .post {
+        margin-bottom: 0;
+        border-bottom: 1px solid var(--color-input-border);
+    }
 }
 
 /* Copy to clipboard action */

templates/activities/_boost.html

@@ -1,9 +1,11 @@
-{% if post.pk in interactions.boost %}
+<span class="post-action">
-    <a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
+  {% if post.pk in interactions.boost %}
-        <i class="fa-solid fa-retweet"></i>
+      <a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
-    </a>
+          <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
-{% else %}
+      </a>
-    <a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
+  {% else %}
-        <i class="fa-solid fa-retweet"></i>
+      <a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
-    </a>
+          <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
-{% endif %}
+      </a>
+  {% endif %}
+</span>

templates/activities/_event.html

@@ -32,7 +32,7 @@
         </a> boosted your post
     </div>
     {% if not event.collapsed %}
-    {% include "activities/_post.html" with post=event.subject_post %}
+    {% include "activities/_post.html" with post=event.subject_post event=event %}
     {% endif %}
 {% else %}
     Unknown event type {{event.type}}

templates/activities/_like.html

@@ -1,9 +1,11 @@
-{% if post.pk in interactions.like %}
+<span class="post-action">
-    <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
+  {% if post.pk in interactions.like %}
-        <i class="fa-solid fa-star"></i>
+      <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
-    </a>
+          <i class="fa-solid fa-star"></i> {{ event.like_count }}
-{% else %}
+      </a>
-    <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
+  {% else %}
-        <i class="fa-solid fa-star"></i>
+      <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
-    </a>
+          <i class="fa-solid fa-star"></i> {{ event.like_count }}
-{% endif %}
+      </a>
+  {% endif %}
+</span>

templates/activities/_post.html

@@ -25,44 +25,8 @@
         {% endif %}
     </time>
 
-    {% if request.identity %}
-    <div class="actions" role="menubar">
-        {% include "activities/_reply.html" %}
-        {% include "activities/_like.html" %}
-        {% include "activities/_boost.html" %}
-        <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
-            <i class="fa-solid fa-caret-down"></i>
-        </a>
-        <menu>
-            <a href="{{ post.urls.view }}" role="menuitem">
-                <i class="fa-solid fa-comment"></i> View Post &amp; Replies
-            </a>
-            <a href="{{ post.urls.action_report }}" role="menuitem">
-                <i class="fa-solid fa-flag"></i> Report
-            </a>
-            {% if post.author == request.identity %}
-            <a href="{{ post.urls.action_edit }}" role="menuitem">
-                <i class="fa-solid fa-pen-to-square"></i> Edit
-            </a>
-            <a href="{{ post.urls.action_delete }}" role="menuitem">
-                <i class="fa-solid fa-trash"></i> Delete
-            </a>
-            {% elif not post.local and post.url %}
-              <a href="{{ post.url }}" role="menuitem">
-                <i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
-              </a>
-            {% endif %}
-            {% if request.user.admin %}
-            <a href="{{ post.urls.admin_edit }}" role="menuitem">
-                <i class="fa-solid fa-gear"></i> View In Admin
-            </a>
-            {% endif %}
-        </menu>
-    </div>
-    {% endif %}
-
     <a href="{{ post.author.urls.view }}" class="handle">
-        {{ post.author.html_name_or_handle }} <small>@{{ post.author.handle }}</small>
+        <span class="link">{{ post.author.html_name_or_handle }}</span> <small>@{{ post.author.handle }}</small>
     </a>
 
     {% if post.summary %}
@@ -92,4 +56,43 @@
         <small>Edited {{ post.edited | timedeltashort }} ago</small>
     </div>
     {% endif %}
+
+    {% if request.identity %}
+      <div class="actions" role="menubar">
+        {% include "activities/_reply.html" %}
+        {% include "activities/_like.html" %}
+        {% include "activities/_boost.html" %}
+        <div class="dropdown">
+          <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
+            <i class="fa-solid fa-caret-down"></i>
+          </a>
+          <menu>
+            <a href="{{ post.urls.view }}" role="menuitem">
+              <i class="fa-solid fa-comment"></i> View Post &amp; Replies
+            </a>
+            <a href="{{ post.urls.action_report }}" role="menuitem">
+              <i class="fa-solid fa-flag"></i> Report
+            </a>
+            {% if post.author == request.identity %}
+              <a href="{{ post.urls.action_edit }}" role="menuitem">
+                <i class="fa-solid fa-pen-to-square"></i> Edit
+              </a>
+              <a href="{{ post.urls.action_delete }}" role="menuitem">
+                <i class="fa-solid fa-trash"></i> Delete
+              </a>
+            {% elif not post.local and post.url %}
+              <a href="{{ post.url }}" role="menuitem">
+                <i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
+              </a>
+            {% endif %}
+            {% if request.user.admin %}
+              <a href="{{ post.urls.admin_edit }}" role="menuitem">
+                <i class="fa-solid fa-gear"></i> View In Admin
+              </a>
+            {% endif %}
+          </menu>
+        </div>
+      </div>
+    {% endif %}
+
 </div>

templates/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <title>{% block title %}{% endblock %} - {{ config.site_name }}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />