add CommentCount
This commit is contained in:
parent
11deee34a7
commit
da1c2809d9
3 changed files with 36 additions and 2 deletions
24
src/lib/CommentCount.svelte
Normal file
24
src/lib/CommentCount.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { RiChat3Line } from "svelte-remixicon";
|
||||||
|
|
||||||
|
|
||||||
|
let { count } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="comment-count">
|
||||||
|
<RiChat3Line />
|
||||||
|
<strong>{count??'-'}</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.comment-count {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-count :global(svg) {
|
||||||
|
color: var(--border);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,9 +3,10 @@
|
||||||
import PostMeta from "./PostMeta.svelte";
|
import PostMeta from "./PostMeta.svelte";
|
||||||
import { SvelteShowdown } from "svelte-showdown";
|
import { SvelteShowdown } from "svelte-showdown";
|
||||||
import VoteButton from "./VoteButton.svelte";
|
import VoteButton from "./VoteButton.svelte";
|
||||||
|
import CommentCount from "./CommentCount.svelte";
|
||||||
|
|
||||||
let { post }: { post: PostEntry } = $props();
|
let { post }: { post: PostEntry } = $props();
|
||||||
let { id, title, content = "", votes, my_vote } = post;
|
let { id, title, content = "", votes, my_vote, comment_count } = post;
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -20,6 +21,7 @@ let { id, title, content = "", votes, my_vote } = post;
|
||||||
</div>
|
</div>
|
||||||
<aside class="message-stats">
|
<aside class="message-stats">
|
||||||
<VoteButton score={votes} vote={my_vote} {id} />
|
<VoteButton score={votes} vote={my_vote} {id} />
|
||||||
|
<CommentCount count={comment_count} />
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
@ -40,6 +42,10 @@ let { id, title, content = "", votes, my_vote } = post;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
.shorten {
|
.shorten {
|
||||||
max-height: 18em;
|
max-height: 18em;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
|
|
||||||
|
|
@ -12,13 +12,14 @@
|
||||||
import { SvelteShowdown } from "svelte-showdown";
|
import { SvelteShowdown } from "svelte-showdown";
|
||||||
import VoteButton from "./VoteButton.svelte";
|
import VoteButton from "./VoteButton.svelte";
|
||||||
import { getMe } from "./globals.svelte";
|
import { getMe } from "./globals.svelte";
|
||||||
|
import CommentCount from "./CommentCount.svelte";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let { post }: { post: PostEntry } = $props();
|
let { post }: { post: PostEntry } = $props();
|
||||||
|
|
||||||
let me = getMe();
|
let me = getMe();
|
||||||
let { title, id, content = '', to, votes, my_vote } = post;
|
let { title, id, content = '', to, votes, my_vote, comment_count } = post;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SLayout title={to.display_name + (to.type === 'guild' ? ` (+${to.name})` : to.type === 'user' ? ` (@${to.username})` : '')}>
|
<SLayout title={to.display_name + (to.type === 'guild' ? ` (+${to.name})` : to.type === 'user' ? ` (@${to.username})` : '')}>
|
||||||
|
|
@ -37,6 +38,7 @@ let { title, id, content = '', to, votes, my_vote } = post;
|
||||||
<aside class="message-stats">
|
<aside class="message-stats">
|
||||||
<!-- upvotes / downvotes -->
|
<!-- upvotes / downvotes -->
|
||||||
<VoteButton score={votes} vote={my_vote} {id} />
|
<VoteButton score={votes} vote={my_vote} {id} />
|
||||||
|
<CommentCount count={comment_count} />
|
||||||
</aside>
|
</aside>
|
||||||
<ul class="message-options row">
|
<ul class="message-options row">
|
||||||
{#if me && me.id !== post.author?.id}
|
{#if me && me.id !== post.author?.id}
|
||||||
|
|
@ -49,6 +51,8 @@ let { title, id, content = '', to, votes, my_vote } = post;
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{#snippet left()}
|
{#snippet left()}
|
||||||
{#if to.type === 'guild'}
|
{#if to.type === 'guild'}
|
||||||
<GuildMenu guild={to} />
|
<GuildMenu guild={to} />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue