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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue