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

This commit is contained in:
Tyler Kennedy 2022-12-22 16:28:28 -05:00 committed by GitHub
parent 6453c170f7
commit 7e5b5dc4e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 142 additions and 96 deletions

View file

@ -1,6 +1,6 @@
from django.db import models 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 from users.models import Identity
@ -33,6 +33,20 @@ class TimelineService:
"subject_post__mentions", "subject_post__mentions",
"subject_post__emojis", "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") .order_by("-published")
) )

View file

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

View file

@ -939,6 +939,9 @@ table.metadata td .emoji {
.post { .post {
margin-bottom: 20px; margin-bottom: 20px;
background: var(--color-bg-box);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
padding: 14px;
} }
.post.mini { .post.mini {
@ -953,13 +956,7 @@ table.metadata td .emoji {
overflow: hidden; 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); background-color: var(--color-bg-main);
} }
@ -1005,7 +1002,7 @@ table.metadata td .emoji {
} }
.post .summary { .post .summary {
margin: 12px 0 4px 64px; margin: 12px 0 4px 0;
padding: 3px 6px; padding: 3px 6px;
border-radius: 3px; border-radius: 3px;
background: var(--color-bg-menu); background: var(--color-bg-menu);
@ -1026,18 +1023,13 @@ table.metadata td .emoji {
} }
.post .edited { .post .edited {
margin-left: 64px;
font-weight: lighter; font-weight: lighter;
color: var(--color-text-duller); color: var(--color-text-duller);
} }
.post .content {
margin-left: 64px;
}
.post.mini .content, .post.mini .content,
.post.mini .edited { .post.mini .edited {
margin-left: 0px; margin-left: 0;
} }
.post .content.hidden { .post .content.hidden {
@ -1065,40 +1057,43 @@ table.metadata td .emoji {
} }
.post .actions { .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 { .post .actions a {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: var(--color-text-dull); color: var(--color-text-dull);
margin-right: 5px;
} }
.post .actions a.menu { .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 { .post .actions menu {
position: absolute;
display: none; display: none;
top: 25px;
right: 10px;
background-color: var(--color-bg-menu); background-color: var(--color-bg-menu);
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: absolute;
left: -130px;
top: -130px;
} }
.post .actions menu.enabled { .post .actions menu.enabled {
@ -1118,14 +1113,29 @@ table.metadata td .emoji {
width: 16px; 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; text-decoration: underline;
} }
@ -1167,7 +1177,7 @@ table.metadata td .emoji {
.mention-banner, .mention-banner,
.follow-banner, .follow-banner,
.like-banner { .like-banner {
padding: 0 0 3px 5px; padding: 3px 0 3px 10px;
} }
.boost-banner .emoji, .boost-banner .emoji,
@ -1328,6 +1338,20 @@ table.metadata td .emoji {
footer { footer {
display: none; 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 */ /* Copy to clipboard action */

View file

@ -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>

View file

@ -32,7 +32,7 @@
</a> boosted your post </a> boosted your post
</div> </div>
{% if not event.collapsed %} {% 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 %} {% endif %}
{% else %} {% else %}
Unknown event type {{event.type}} Unknown event type {{event.type}}

View file

@ -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>

View file

@ -25,44 +25,8 @@
{% endif %} {% endif %}
</time> </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"> <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> </a>
{% if post.summary %} {% if post.summary %}
@ -92,4 +56,43 @@
<small>Edited {{ post.edited | timedeltashort }} ago</small> <small>Edited {{ post.edited | timedeltashort }} ago</small>
</div> </div>
{% endif %} {% 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> </div>

View file

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