add upvote count, fix loading issues
This commit is contained in:
parent
55455c1693
commit
cd92a4b12e
4 changed files with 70 additions and 1 deletions
|
|
@ -10,6 +10,7 @@
|
|||
import PostMeta from "./PostMeta.svelte";
|
||||
import GuildMenu from "./GuildMenu.svelte";
|
||||
import { SvelteShowdown } from "svelte-showdown";
|
||||
import VoteButton from "./VoteButton.svelte";
|
||||
|
||||
|
||||
|
||||
|
|
@ -32,6 +33,7 @@ let { title, created_at, id, content = '', to } = post;
|
|||
</div><!-- .post-body -->
|
||||
<div class="message-stats">
|
||||
<!-- upvotes / downvotes -->
|
||||
<VoteButton />
|
||||
</div>
|
||||
<ul class="message-options row">
|
||||
</ul>
|
||||
|
|
@ -56,7 +58,23 @@ let { title, created_at, id, content = '', to } = post;
|
|||
</SLayout>
|
||||
|
||||
<style>
|
||||
.post-frame {
|
||||
position: relative;
|
||||
}
|
||||
.post-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.post-body {
|
||||
margin-inline-start: 3em;
|
||||
}
|
||||
.message-stats {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
width: 3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
41
src/lib/VoteButton.svelte
Normal file
41
src/lib/VoteButton.svelte
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script lang="ts">
|
||||
import { RiHeartFill, RiHeartLine, RiThumbDownFill, RiThumbDownLine } from "svelte-remixicon";
|
||||
|
||||
|
||||
let vote = $state(0);
|
||||
let { score } : { score?: number | null } = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div class="upvote-button">
|
||||
{#if vote > 0}
|
||||
<button class="inline">
|
||||
<RiHeartFill />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="inline">
|
||||
<RiHeartLine />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<strong>{score ?? '-'}</strong>
|
||||
|
||||
{#if vote > 0}
|
||||
<button class="inline">
|
||||
<RiThumbDownFill />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="inline">
|
||||
<RiThumbDownLine />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.upvote-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -47,3 +47,6 @@ export function activeUserCount (): number{
|
|||
return health.user_count || 0;
|
||||
}
|
||||
|
||||
export async function sleep (ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue