From 7e5b5dc4e4d39fffc8e6a5532ed16bed9f2b25a2 Mon Sep 17 00:00:00 2001 From: Tyler Kennedy Date: Thu, 22 Dec 2022 16:28:28 -0500 Subject: [PATCH] Various UX tweaks and front end fixes. (#230) --- activities/services/timeline.py | 16 ++++- docker/run.sh | 1 + static/css/style.css | 100 +++++++++++++++++++------------ templates/activities/_boost.html | 20 ++++--- templates/activities/_event.html | 2 +- templates/activities/_like.html | 20 ++++--- templates/activities/_post.html | 77 ++++++++++++------------ templates/base.html | 2 +- 8 files changed, 142 insertions(+), 96 deletions(-) diff --git a/activities/services/timeline.py b/activities/services/timeline.py index b013228..c67a2fc 100644 --- a/activities/services/timeline.py +++ b/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") ) diff --git a/docker/run.sh b/docker/run.sh index a825de6..083b166 100644 --- a/docker/run.sh +++ b/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 diff --git a/static/css/style.css b/static/css/style.css index d4c1f7c..4045864 100644 --- a/static/css/style.css +++ b/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 { - background: var(--color-bg-box); - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); - padding: 10px; -} - -.left-column form .post { +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; - float: right; - padding: 3px 5px 0 0; + display: flex; + justify-content: space-between; + 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.mini a.hashtag { - text-decoration: none; - color: var(--color-text-link); +.post .actions .dropdown { + position: relative; } -.post a.hashtag:hover, -.post.mini a.hashtag:hover { +.post .actions a: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 */ diff --git a/templates/activities/_boost.html b/templates/activities/_boost.html index 8e90045..9bf6e4f 100644 --- a/templates/activities/_boost.html +++ b/templates/activities/_boost.html @@ -1,9 +1,11 @@ -{% if post.pk in interactions.boost %} - - - -{% else %} - - - -{% endif %} + + {% if post.pk in interactions.boost %} + + {{ event.boost_count }} + + {% else %} + + {{ event.boost_count }} + + {% endif %} + diff --git a/templates/activities/_event.html b/templates/activities/_event.html index 10d1ce4..a7b5896 100644 --- a/templates/activities/_event.html +++ b/templates/activities/_event.html @@ -32,7 +32,7 @@ boosted your post {% 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}} diff --git a/templates/activities/_like.html b/templates/activities/_like.html index 07dc01d..780c312 100644 --- a/templates/activities/_like.html +++ b/templates/activities/_like.html @@ -1,9 +1,11 @@ -{% if post.pk in interactions.like %} - - - -{% else %} - - - -{% endif %} + + {% if post.pk in interactions.like %} + + {{ event.like_count }} + + {% else %} + + {{ event.like_count }} + + {% endif %} + diff --git a/templates/activities/_post.html b/templates/activities/_post.html index 785a2df..c900904 100644 --- a/templates/activities/_post.html +++ b/templates/activities/_post.html @@ -25,44 +25,8 @@ {% endif %} - {% if request.identity %} - - {% endif %} - - {{ post.author.html_name_or_handle }} @{{ post.author.handle }} + {{ post.author.html_name_or_handle }} @{{ post.author.handle }} {% if post.summary %} @@ -92,4 +56,43 @@ Edited {{ post.edited | timedeltashort }} ago {% endif %} + + {% if request.identity %} + + {% endif %} + diff --git a/templates/base.html b/templates/base.html index 4614223..832e0f2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,5 +1,5 @@ - + {% block title %}{% endblock %} - {{ config.site_name }}