diff --git a/src/comp/comment.svelte b/src/comp/comment.svelte index 49633c2..d13d9a2 100644 --- a/src/comp/comment.svelte +++ b/src/comp/comment.svelte @@ -3,12 +3,18 @@ import Avatar from "./avatar.svelte"; import Mention from "./mention.svelte"; import Rating from "./rating.svelte"; + import Tablericon from "./tablericon.svelte"; /** * @type {import("$types/base").CommentTreeNode} */ export let commentNode; + /** + * @type {import("$types/base").CommentTreeNode | null} + */ + export let replyTo = null; + /** * @type {(function(import("$types/base").Comment): string[]) | undefined} */ @@ -54,32 +60,60 @@ .date { color: var(--white-dim); } + + .comment { + display: flex; + flex-flow: column nowrap; + width: 100%; + gap: 32px; + } + + .replyBar { + display: flex; + flex-flow: row nowrap; + gap: 4px; + align-items: center; + + font-size: 0.85em; + }
-
-
-
- - {#each tags as tag} - {tag} - {/each} +
+
+
+
+ + {#each tags as tag} + {tag} + {/each} + + {#if replyTo} + + + reply + + + {/if} +
+ + {moment(comment.commentDate).fromNow()} +
+ +

{comment.content}

+ +
+
- - {moment(comment.commentDate).fromNow()}
- -

{comment.content}

- -
- -
- + + {#if commentNode.children.length}
{#each commentNode.children as reply} - + {/each}
+ {/if}
diff --git a/src/comp/page/post.svelte b/src/comp/page/post.svelte index aaf4c5a..f5a2304 100644 --- a/src/comp/page/post.svelte +++ b/src/comp/page/post.svelte @@ -45,7 +45,7 @@ .commentList { display: flex; flex-flow: column nowrap; - gap: 16px; + gap: 32px; } .comments { @@ -91,7 +91,7 @@ {#each commentTree as reply} { if (comment.author?.id == post.author?.id) { - return ["OP"]; + return ["OP 🖋️"]; } return []; }}>