add: profiles ui, communities ui, posts ui
This commit is contained in:
trisua
parent
00abbc8fa2
commit
eecf357325
36 changed files with 1460 additions and 147 deletions
87
crates/app/src/public/html/communities/base.html
Normal file
87
crates/app/src/public/html/communities/base.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "root.html" %} {% block head %}
|
||||
<title>{{ community.context.display_name }} - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav() }}
|
||||
<article>
|
||||
<div class="content_container">
|
||||
<div class="w-full flex gap-4 flex-collapse">
|
||||
<div
|
||||
class="lhs flex flex-col gap-2 sm:w-full"
|
||||
style="min-width: 20rem"
|
||||
>
|
||||
<div class="card-nest w-full">
|
||||
<div class="card flex gap-2" id="community_avatar_and_name">
|
||||
{{
|
||||
components::community_avatar(id=community.id,size="72px")
|
||||
}}
|
||||
<div class="flex flex-col">
|
||||
<!-- prettier-ignore -->
|
||||
<h3 id="title" class="title">
|
||||
{% if community.context.display_name %}
|
||||
{{ community.context.display_name }}
|
||||
{% else %}
|
||||
{{ community.username }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
|
||||
<span class="fade">{{ community.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if user %}
|
||||
<div class="card flex" id="join_or_leave">
|
||||
{% if not is_owner %} {% if not is_member %}
|
||||
<button class="primary">
|
||||
{{ icon "circle-plus" }}
|
||||
<span>{{ text "communities:action.join" }}</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="camo red">
|
||||
{{ icon "circle-minus" }}
|
||||
<span>{{ text "communities:action.leave" }}</span>
|
||||
</button>
|
||||
{% endif %} {% else %}
|
||||
<a
|
||||
href="/community/{{ community.title }}/manage"
|
||||
class="button primary"
|
||||
>
|
||||
{{ icon "settings" }}
|
||||
<span
|
||||
>{{ text "communities:action.configure" }}</span
|
||||
>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card-nest flex flex-col">
|
||||
<div id="bio" class="card small">
|
||||
{{ community.context.description }}
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-2">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<span class="notification chip">ID</span>
|
||||
<button
|
||||
title="Copy"
|
||||
onclick="trigger('atto::copy_text', [{{ community.id }}])"
|
||||
class="camo small"
|
||||
>
|
||||
{{ icon "copy" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<span class="notification chip">Created</span>
|
||||
<span class="date">{{ community.created }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rhs w-full">{% block content %}{% endblock %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endblock %}
|
||||
79
crates/app/src/public/html/communities/feed.html
Normal file
79
crates/app/src/public/html/communities/feed.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "communities/base.html" %} {% block content %}
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
{% if user %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
<b>{{ text "communities:label.create_post" }}</b>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="card flex flex-col gap-2"
|
||||
onsubmit="create_post_from_form(event)"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="content"
|
||||
>{{ text "communities:label.content" }}</label
|
||||
>
|
||||
<textarea
|
||||
type="text"
|
||||
name="content"
|
||||
id="content"
|
||||
placeholder="content"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="4096"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button class="primary">
|
||||
{{ text "communities:action.create" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-nest">
|
||||
<div class="card small flex gap-2 items-center">
|
||||
{{ icon "newspaper" }}
|
||||
<span>{{ text "communities:label.posts" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<!-- prettier-ignore -->
|
||||
{% for post in feed %}
|
||||
{{ components::post(post=post[0], owner=post[1], secondary=true, show_community=false) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function create_post_from_form(e) {
|
||||
e.preventDefault();
|
||||
fetch("/api/v1/posts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: e.target.content.value,
|
||||
community: "{{ community.id }}",
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
window.location.href = `/post/${res.payload}`;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,13 +1,18 @@
|
|||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
|
||||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "root.html" %} {% block head %}
|
||||
<title>My communities - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
|
||||
<main class="flex flex-col gap-2">
|
||||
{% if user %}
|
||||
<div class="card-nest">
|
||||
<div class="card">
|
||||
<div class="card small">
|
||||
<b>{{ text "communities:label.create_new" }}</b>
|
||||
</div>
|
||||
|
||||
<form class="card flex flex-col gap-2">
|
||||
<form
|
||||
class="card flex flex-col gap-2"
|
||||
onsubmit="create_community_from_form(event)"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="">{{ text "communities:label.name" }}</label>
|
||||
<input
|
||||
|
|
@ -26,5 +31,35 @@
|
|||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %} {% for item in list %} {{
|
||||
components::community_listing_card(community=item) }} {% endfor %}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function create_community_from_form(e) {
|
||||
e.preventDefault();
|
||||
fetch("/api/v1/communities", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: e.target.title.value,
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
window.location.href = `/community/${res.payload}`;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
86
crates/app/src/public/html/communities/post.html
Normal file
86
crates/app/src/public/html/communities/post.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "root.html" %} {% block head %}
|
||||
<title>Post - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav() }}
|
||||
<main class="flex flex-col gap-2">
|
||||
{% if post.replying_to %}
|
||||
<a href="/post/{{ post.replying_to }}" class="button">
|
||||
{{ icon "arrow-up" }}
|
||||
<span>{{ text "communities:action.continue_thread" }}</span>
|
||||
</a>
|
||||
{% endif %} {{ components::post(post=post, owner=owner, community=community,
|
||||
show_community=true) }} {% if user %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
<b>{{ text "communities:label.create_reply" }}</b>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="card flex flex-col gap-2"
|
||||
onsubmit="create_reply_from_form(event)"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="content"
|
||||
>{{ text "communities:label.content" }}</label
|
||||
>
|
||||
<textarea
|
||||
type="text"
|
||||
name="content"
|
||||
id="content"
|
||||
placeholder="content"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="4096"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button class="primary">
|
||||
{{ text "communities:action.create" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-nest w-full">
|
||||
<div class="card small flex items-center gap-2">
|
||||
{{ icon "newspaper" }}
|
||||
<span>{{ text "communities:label.replies" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
{% for post in replies %} {{ components::post(post=post[0],
|
||||
owner=post[1], secondary=true, show_community=false) }} {% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function create_reply_from_form(e) {
|
||||
e.preventDefault();
|
||||
fetch("/api/v1/posts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: e.target.content.value,
|
||||
community: "{{ community.id }}",
|
||||
replying_to: "{{ post.id }}",
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
window.location.href = `/post/${res.payload}`;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
125
crates/app/src/public/html/components.html
Normal file
125
crates/app/src/public/html/components.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
{% macro avatar(username, size="24px", selector_type="username") -%}
|
||||
<img
|
||||
title="{{ username }}'s avatar"
|
||||
src="/api/v1/auth/profile/{{ username }}/avatar?selector_type={{ selector_type }}"
|
||||
alt="@{{ username }}"
|
||||
class="avatar shadow"
|
||||
style="--size: {{ size }}"
|
||||
/>
|
||||
{%- endmacro %} {% macro community_avatar(id, community=false, size="24px") -%}
|
||||
{% if community %}
|
||||
<img
|
||||
src="/api/v1/communities/{{ id }}/avatar"
|
||||
alt="{{ community.title }}"
|
||||
class="avatar shadow"
|
||||
style="--size: {{ size }}"
|
||||
/>
|
||||
{% else %}
|
||||
<img
|
||||
src="/api/v1/communities/{{ id }}/avatar"
|
||||
alt="{{ id }}"
|
||||
class="avatar shadow"
|
||||
style="--size: {{ size }}"
|
||||
/>
|
||||
{% endif %} {%- endmacro %} {% macro community_listing_card(community) -%}
|
||||
<a
|
||||
class="card w-full flex items-center gap-4"
|
||||
href="/community/{{ community.title }}"
|
||||
>
|
||||
{{ components::community_avatar(id=community.id, community=community,
|
||||
size="48px") }}
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3>{{ community.context.display_name }}</h3>
|
||||
<span class="fade"><b>{{ community.member_count }}</b> members</span>
|
||||
</div>
|
||||
</a>
|
||||
{%- endmacro %} {% macro username(user) -%}
|
||||
<div style="display: contents">
|
||||
{% if user.settings.display_name %} {{ user.settings.display_name }} {% else
|
||||
%} {{ user.username }} {% endif %}
|
||||
</div>
|
||||
{%- 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 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center gap-2 w-full">
|
||||
<div class="flex gap-1 reactions_box">
|
||||
{% if user %}
|
||||
<button title="Like" class="primary small">
|
||||
{{ icon "heart" }}
|
||||
</button>
|
||||
<button title="Dislike" class="secondary small">
|
||||
{{ icon "heart-crack" }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{% macro nav(selected="", show_lhs=true) -%}
|
||||
{% import "components.html" as components %} {% macro nav(selected="",
|
||||
show_lhs=true) -%}
|
||||
<nav>
|
||||
<div class="content_container">
|
||||
<div class="flex nav_side">
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
exclude="dropdown"
|
||||
style="gap: 0.25rem !important"
|
||||
>
|
||||
{{ macros::avatar(username=user.username, size="24px") }}
|
||||
{{ components::avatar(username=user.username, size="24px") }}
|
||||
{{ icon "chevron-down" c(dropdown-arrow) }}
|
||||
</button>
|
||||
|
||||
|
|
@ -94,12 +95,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{%- endmacro %} {% macro avatar(username, size="24px") -%}
|
||||
<img
|
||||
title="{{ username }}'s avatar"
|
||||
src="/api/v1/auth/profile/{{ username }}/avatar"
|
||||
alt="@{{ username }}"
|
||||
class="avatar shadow"
|
||||
style="--size: {{ size }}"
|
||||
/>
|
||||
{%- endmacro %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
>
|
||||
<div class="card-nest w-full">
|
||||
<div class="card flex gap-2" id="user_avatar_and_name">
|
||||
{{ macros::avatar(username=profile.username,size="72px")
|
||||
{{
|
||||
components::avatar(username=profile.username,size="72px")
|
||||
}}
|
||||
<div class="flex flex-col">
|
||||
<!-- prettier-ignore -->
|
||||
|
|
@ -77,14 +78,21 @@
|
|||
<div class="card-nest">
|
||||
<div class="card small flex gap-2 items-center">
|
||||
{{ icon "users-round" }}
|
||||
<span>{{ text "auth:label.joined_journals" }}</span>
|
||||
<span>{{ text "auth:label.joined_communities" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-wrap gap-2"></div>
|
||||
<div class="card flex flex-wrap gap-2">
|
||||
{% for community in communities %}
|
||||
<a href="/community/{{ community.title }}">
|
||||
{{ components::community_avatar(id=community.id,
|
||||
community=community, size="48px") }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rhs sm:w-full">{% block content %}{% endblock %}</div>
|
||||
<div class="rhs w-full">{% block content %}{% endblock %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,16 @@
|
|||
{% import "macros.html" as macros %} {% extends "profile/base.html" %} {% block
|
||||
content %}<span></span>{% endblock %}
|
||||
content %}
|
||||
<div class="card-nest">
|
||||
<div class="card small flex gap-2 items-center">
|
||||
{{ icon "clock" }}
|
||||
<span>{{ text "auth:label.recent_posts" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<!-- prettier-ignore -->
|
||||
{% for post in posts %}
|
||||
{{ components::post(post=post[0], owner=post[1], secondary=true, community=post[2], show_community=true) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue