hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change background color

Browse source
This commit is contained in:
dtonon 2026-05-08 21:33:10 +01:00
parent 32104ea05d
commit a96af086ba
13 changed files with 153 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/lib/components/ThreadItem.svelte
View file

@ -28,7 +28,7 @@
<img src={a.picture} alt="" class={cls} />
{:else}
<span
class="{cls} flex items-center justify-center rounded-full bg-gray-200 text-[10px] font-semibold text-gray-500"
class="{cls} flex items-center justify-center rounded-full bg-neutral-200 text-[10px] font-semibold text-neutral-500"
>
{a.name[0].toUpperCase()}
</span>
@ -37,20 +37,26 @@
<a
href="/thread/{thread.id}"
class="flex items-center gap-6 border-b border-gray-100 py-4 hover:bg-gray-50"
class="flex items-center gap-6 border-b border-neutral-100 py-4 hover:bg-neutral-50"
>
<!-- Col 1: title + byline -->
<div class="flex-1 min-w-0">
<div class="text-lg mb-1.5 text-gray-900 leading-6">{thread.title}</div>
<div class="flex items-center gap-1.5 text-sm text-gray-500">
<div class="text-lg mb-1.5 text-neutral-900 leading-6">{thread.title}</div>
<div class="flex items-center gap-1.5 text-sm text-neutral-500">
<span>by</span>
{@render avatar(thread.author, "h-5 w-5 rounded-full object-cover")}
{#if thread.repliers.length > 0}
<span>and</span>
<div class="flex -space-x-1.5">
{#each thread.repliers as r, i}
<span class="relative" style="z-index: {thread.repliers.length - i}">
{@render avatar(r, "h-5 w-5 rounded-full object-cover ring-1 ring-white")}
<span
class="relative"
style="z-index: {thread.repliers.length - i}"
>
{@render avatar(
r,
"h-5 w-5 rounded-full object-cover ring-1 ring-white",
)}
</span>
{/each}
</div>
@ -68,21 +74,24 @@
<!-- Col 3: replies | score | activity -->
<div class="flex shrink-0 items-center gap-6">
<div class="flex flex-col items-center gap-0.5">
<span class="text-gray-800">{thread.replyCount}</span>
<span class="text-sm text-gray-400">replies</span>
<span class="text-neutral-800">{thread.replyCount}</span>
<span class="text-sm text-neutral-400">replies</span>
</div>
<div class="flex flex-col items-center gap-0.5">
<span class="text-accent">{thread.score}</span>
<span class="text-sm text-gray-400">score</span>
<span class="text-sm text-neutral-400">score</span>
</div>
<div class="flex flex-col items-center gap-0.5">
<div class="flex items-center gap-1">
{@render avatar(thread.lastActiveAuthor, "h-5 w-5 rounded-full object-cover")}
<span class="text-gray-800">{thread.lastActivity}</span>
{@render avatar(
thread.lastActiveAuthor,
"h-5 w-5 rounded-full object-cover",
)}
<span class="text-neutral-800">{thread.lastActivity}</span>
</div>
<span class="text-sm text-gray-400">activity</span>
<span class="text-sm text-neutral-400">activity</span>
</div>
</div>
</a>