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

pull/237/head
Tyler Kennedy 2022-12-22 16:28:28 -05:00 zatwierdzone przez GitHub
rodzic 6453c170f7
commit 7e5b5dc4e4
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
8 zmienionych plików z 142 dodań i 96 usunięć

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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