Various UX tweaks and front end fixes. (#230)
This commit is contained in:
Tyler Kennedy
GitHub
parent
6453c170f7
commit
7e5b5dc4e4
|
|
@ -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")
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 & 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 & 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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue