add: followers/following ui
This commit is contained in:
trisua
parent
17564ede49
commit
e183a01887
13 changed files with 469 additions and 86 deletions
|
|
@ -226,6 +226,10 @@ a {
|
|||
color: var(--color-link);
|
||||
}
|
||||
|
||||
a.flush {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -633,6 +637,7 @@ nav .button:not(.inner *) {
|
|||
transition:
|
||||
opacity 0.15s,
|
||||
transform 0.15s;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
nav button:not(.inner *):hover,
|
||||
|
|
|
|||
|
|
@ -87,94 +87,107 @@ community %}
|
|||
{% endif %}
|
||||
</button>
|
||||
{%- endmacro %} {% macro post(post, owner, secondary=false, community=false,
|
||||
show_community=true) -%}
|
||||
<div class="card flex flex-col gap-2 {% if secondary %}secondary{% endif %}">
|
||||
<div class="w-full flex gap-2">
|
||||
<a href="/user/{{ owner.username }}">
|
||||
{{ components::avatar(username=post.owner, size="52px",
|
||||
selector_type="id") }}
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col w-full gap-1">
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
<a href="/user/{{ owner.username }}"
|
||||
>{{ components::username(user=owner) }}</a
|
||||
>
|
||||
|
||||
<span class="fade date">{{ post.created }}</span>
|
||||
|
||||
{% if show_community %}
|
||||
<a href="/api/v1/communities/find/{{ post.community }}">
|
||||
<!-- prettier-ignore -->
|
||||
{% if community %}
|
||||
{{ components::community_avatar(id=post.community,
|
||||
community=community) }}
|
||||
{% else %}
|
||||
{{ components::community_avatar(id=post.community) }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<span id="post-content:{{ post.id }}"
|
||||
>{{ post.content|markdown|safe }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center gap-2 w-full">
|
||||
{% if user %}
|
||||
<div
|
||||
class="flex gap-1 reactions_box"
|
||||
hook="check_reactions"
|
||||
hook-arg:id="{{ post.id }}"
|
||||
show_community=true) -%} {% if community and show_community %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
<a
|
||||
href="/api/v1/communities/find/{{ post.community }}"
|
||||
class="flush flex gap-1 items-center"
|
||||
>
|
||||
{{ components::likes(id=post.id, asset_type="Post",
|
||||
likes=post.likes, dislikes=post.dislikes) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex gap-1 buttons_box">
|
||||
<a href="/post/{{ post.id }}" class="button camo small">
|
||||
{{ icon "message-circle" }}
|
||||
<span>{{ post.comment_count }}</span>
|
||||
{{ components::community_avatar(id=post.community,
|
||||
community=community) }}
|
||||
<b>{{ community.title }}</b>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div
|
||||
class="card flex flex-col gap-2 {% if secondary %}secondary{% endif %}"
|
||||
>
|
||||
<div class="w-full flex gap-2">
|
||||
<a href="/@{{ owner.username }}">
|
||||
{{ components::avatar(username=post.owner, size="52px",
|
||||
selector_type="id") }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/post/{{ post.id }}"
|
||||
class="button camo small"
|
||||
target="_blank"
|
||||
>
|
||||
{{ icon "external-link" }}
|
||||
</a>
|
||||
|
||||
{% if user %} {% if (user.id == post.owner) or is_helper %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
>
|
||||
{{ icon "ellipsis" }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
<button
|
||||
class="red"
|
||||
onclick="trigger('me::remove_post', ['{{ post.id }}'])"
|
||||
<div class="flex flex-col w-full gap-1">
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
<a href="/@{{ owner.username }}"
|
||||
>{{ components::username(user=owner) }}</a
|
||||
>
|
||||
{{ icon "trash" }}
|
||||
<span>{{ text "general:action.delete" }}</span>
|
||||
</button>
|
||||
|
||||
<span class="fade date">{{ post.created }}</span>
|
||||
|
||||
{% if show_community %}
|
||||
<a href="/api/v1/communities/find/{{ post.community }}">
|
||||
<!-- prettier-ignore -->
|
||||
{% if not community %}
|
||||
{{ components::community_avatar(id=post.community) }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<span id="post-content:{{ post.id }}"
|
||||
>{{ post.content|markdown|safe }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center gap-2 w-full">
|
||||
{% if user %}
|
||||
<div
|
||||
class="flex gap-1 reactions_box"
|
||||
hook="check_reactions"
|
||||
hook-arg:id="{{ post.id }}"
|
||||
>
|
||||
{{ components::likes(id=post.id, asset_type="Post",
|
||||
likes=post.likes, dislikes=post.dislikes) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex gap-1 buttons_box">
|
||||
<a href="/post/{{ post.id }}" class="button camo small">
|
||||
{{ icon "message-circle" }}
|
||||
<span>{{ post.comment_count }}</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/post/{{ post.id }}"
|
||||
class="button camo small"
|
||||
target="_blank"
|
||||
>
|
||||
{{ icon "external-link" }}
|
||||
</a>
|
||||
|
||||
{% if user %} {% if (user.id == post.owner) or is_helper %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
>
|
||||
{{ icon "ellipsis" }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
<button
|
||||
class="red"
|
||||
onclick="trigger('me::remove_post', ['{{ post.id }}'])"
|
||||
>
|
||||
{{ icon "trash" }}
|
||||
<span>{{ text "general:action.delete" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %} {% endif %}
|
||||
</div>
|
||||
{% endif %} {% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if community and show_community %}
|
||||
</div>
|
||||
{%- endmacro %} {% macro notification(notification) -%}
|
||||
{% endif %} {%- endmacro %} {% macro notification(notification) -%}
|
||||
<div class="w-full card-nest">
|
||||
<div class="card small notif_title flex items-center">
|
||||
{% if not notification.read %}
|
||||
|
|
@ -222,4 +235,15 @@ show_community=true) -%}
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %} {% macro user_card(user) -%}
|
||||
<a
|
||||
class="card secondary w-full flex items-center gap-4"
|
||||
href="/@{{ user.username }}"
|
||||
>
|
||||
{{ components::avatar(username=user.username, size="48px") }}
|
||||
<div class="flex flex-col">
|
||||
<h3>{{ components::username(user=user) }}</h3>
|
||||
<span class="fade">{{ user.username }}</span>
|
||||
</div>
|
||||
</a>
|
||||
{%- endmacro %}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ show_lhs=true) -%}
|
|||
|
||||
<div class="inner">
|
||||
<b class="title">{{ user.username }}</b>
|
||||
<a href="/user/{{ user.username }}">
|
||||
<a href="/@{{ user.username }}">
|
||||
{{ icon "circle-user-round" }}
|
||||
<span>{{ text "auth:link.my_profile" }}</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,14 @@
|
|||
<div class="card flex flex-col gap-2" id="social">
|
||||
<div class="w-full flex">
|
||||
<a
|
||||
href="/user/{{ profile.username }}/followers"
|
||||
href="/@{{ profile.username }}/followers"
|
||||
class="w-full flex justify-center items-center gap-2"
|
||||
>
|
||||
<h4>{{ profile.follower_count }}</h4>
|
||||
<span>{{ text "auth:label.followers" }}</span>
|
||||
</a>
|
||||
<a
|
||||
href="/user/{{ profile.username }}/following"
|
||||
href="/@{{ profile.username }}/following"
|
||||
class="w-full flex justify-center items-center gap-2"
|
||||
>
|
||||
<h4>{{ profile.following_count }}</h4>
|
||||
|
|
|
|||
22
crates/app/src/public/html/profile/followers.html
Normal file
22
crates/app/src/public/html/profile/followers.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{% import "macros.html" as macros %} {% extends "profile/base.html" %} {% block
|
||||
content %}
|
||||
<div class="card-nest">
|
||||
<div class="card small flex gap-2 items-center">
|
||||
{{ icon "users-round" }}
|
||||
<span>{{ text "auth:label.followers" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<!-- prettier-ignore -->
|
||||
{% for item in list %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
Since <span class="date">{{ item[0].created }}</span>
|
||||
</div>
|
||||
|
||||
{{ components::user_card(user=item[1]) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
22
crates/app/src/public/html/profile/following.html
Normal file
22
crates/app/src/public/html/profile/following.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{% import "macros.html" as macros %} {% extends "profile/base.html" %} {% block
|
||||
content %}
|
||||
<div class="card-nest">
|
||||
<div class="card small flex gap-2 items-center">
|
||||
{{ icon "users-round" }}
|
||||
<span>{{ text "auth:label.following" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<!-- prettier-ignore -->
|
||||
{% for item in list %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
Since <span class="date">{{ item[0].created }}</span>
|
||||
</div>
|
||||
|
||||
{{ components::user_card(user=item[1]) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue