108 lines
2.2 KiB
Svelte
108 lines
2.2 KiB
Svelte
<script>
|
|
import moment from "moment";
|
|
import Mention from "$comp/mention.svelte";
|
|
import Comment from "$comp/comment.svelte";
|
|
import UserItem from "$comp/useritem.svelte";
|
|
import { buildCommentTree } from "$lib/client/nodetree";
|
|
import { getNamedId, gotoNamedId } from "$lib/util";
|
|
import { onMount } from "svelte";
|
|
import Rating from "$comp/rating.svelte";
|
|
import CommentList from "$comp/commentlist.svelte";
|
|
import Avatar from "$comp/avatar.svelte";
|
|
import Ago from "$comp/ago.svelte";
|
|
import Actionbar from "$comp/actionbar.svelte";
|
|
|
|
/**
|
|
* @type {import("$types/base").Post}
|
|
*/
|
|
export let post;
|
|
|
|
/**
|
|
* @type {import("$types/base").CommentTreeNode[] | null}
|
|
*/
|
|
export let commentTree = null;
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.body {
|
|
width: 100%;
|
|
}
|
|
|
|
.post {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
gap: 16px
|
|
}
|
|
|
|
.titleBar {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: start;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.postHead {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.commentsPart {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
gap: 32px;
|
|
}
|
|
|
|
.commentsHead {
|
|
width: 100%;
|
|
border-bottom: 1px solid var(--gray);
|
|
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.postInfo {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 12px;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div class="body">
|
|
<article class="post">
|
|
<div class="postHead">
|
|
<Avatar size={64}></Avatar>
|
|
<div class="titleBar">
|
|
<div class="postInfo">
|
|
<Mention user={post.author}></Mention>
|
|
<Ago date={post.postDate}></Ago>
|
|
</div>
|
|
<h1 class="typeTitle">{post.name}</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="postContent">
|
|
{post.content}
|
|
</p>
|
|
|
|
<Actionbar message={post}></Actionbar>
|
|
</article>
|
|
|
|
{#if commentTree}
|
|
<div class="commentsPart">
|
|
<div class="commentsHead"></div>
|
|
|
|
<CommentList commentTreeList={commentTree} getTags={(comment) => {
|
|
if (comment.author?.id == post.author?.id) {
|
|
return ["Original 🖋️"];
|
|
}
|
|
return [];
|
|
}}></CommentList>
|
|
</div>
|
|
{/if}
|
|
</div>
|