edufeed-org/polloer
2
0
Fork 0
mirror of https://github.com/edufeed-org/polloer.git synced 2025-12-09 16:24:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fancy layout, cleanup

Browse source
This commit is contained in:
Torsten Simon 2025-04-30 10:25:40 +02:00
parent e5e53d4968
commit a9c3d7e32a
2 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/lib/components/Comment.svelte
View file

@ -49,16 +49,32 @@
}); });
</script> </script>
<div class="w-full border p-2"> <div class="comment w-full border p-2">
<p>{event.content}</p> <p>{event.content}</p>
<div class="flex gap-2"> <div class="flex gap-2 reactions">
{#if $reacted} {#if $reacted}
<span>👍 {$reactions.length}</span> <span>👍 {$reactions.length}</span>
<span>Danke für deinen Vote!</span> <span class="thanks">Danke für deinen Vote!</span>
<button onclick={() => deleteVote()} class="btn">Vote zurückziehen</button> <button onclick={() => deleteVote()} class="btn">Vote zurückziehen</button>
{:else} {:else}
<button onclick={() => sendReaction()}>👍</button> <button onclick={() => sendReaction()} class="like">👍</button>
<span>{$reactions.length}</span> <span>{$reactions.length}</span>
{/if} {/if}
</div> </div>
</div> </div>
<style>
.like {
cursor: pointer;
}
.reactions {
padding-top: 10px;
align-items: center;
}
.thanks {
color: #777;
}
.comment {
border-radius: 20px;
border-color: #ccc;
}
</style>

4
src/routes/q/[id]/+page.svelte
View file

@ -61,7 +61,7 @@
<p>Error fetching question: {error.message}</p> <p>Error fetching question: {error.message}</p>
{/await} {/await}
<div class="mx-auto flex w-full flex-col items-center justify-center gap-2"> <div class="mx-auto flex w-full flex-col items-center justify-center gap-5">
{#each $comments as event} {#each $comments as event}
<Comment {event} /> <Comment {event} />
{/each} {/each}
@ -80,7 +80,7 @@
height: 100%; height: 100%;
} }
.question { .question {
border-radius: 10px; border-radius: 20px;
border-color: #ccc; border-color: #ccc;
} }
</style> </style>