brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

ActivityFeed — replaced the <button> inside <a> (invalid HTML, unreliable) with the stretched-link pattern: the card is now a <div>, the title <a> carries a ::before pseudo-element

Browse Source 
that covers the whole card making it clickable, and @handle is a proper <a> with z-index: 10 sitting above the stretched link. Clicking the handle navigates to /u/{handle}/; clicking
  anywhere else navigates to the activity.

  ActivityDetail — @handle link added in the date/time row of the header, linking to /u/{handle}/. Only shown when activity.handle is set (i.e. multi-user mode).
This commit is contained in:
Davide Scaini
2026-04-09 12:32:22 +02:00
parent 7dcb1e6dd0
commit 50cdeb3b6e
4 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ActivityFeed.svelte
+12 -7
View File
@@ -128,18 +128,23 @@
{:else}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{#each visible as a (a.id)}
<a
href={a.detail_url ? `${import.meta.env.BASE_URL}activity/${a.id}/` : `${import.meta.env.BASE_URL}activity/local/?id=${a.id}`}
class="block rounded-xl bg-zinc-900 border border-zinc-800 p-4 hover:border-zinc-600 hover:bg-zinc-800/80 transition-all group"
>
<!-- relative + isolate so the stretched activity link stays below the handle link -->
<div class="relative rounded-xl bg-zinc-900 border border-zinc-800 p-4 hover:border-zinc-600 hover:bg-zinc-800/80 transition-all group">
<!-- header -->
<div class="flex items-start justify-between gap-2 mb-3">
<div class="flex-1 min-w-0">
<p class="text-xs text-zinc-500 mb-0.5">
{formatDate(a.started_at)}{#if a.handle} · <button class="hover:text-zinc-300 transition-colors" on:click|stopPropagation={() => window.location.href = `${import.meta.env.BASE_URL}u/${a.handle}/`}>@{a.handle}</button>{/if}
{formatDate(a.started_at)}{#if a.handle} · <a
href="{import.meta.env.BASE_URL}u/{a.handle}/"
class="relative z-10 hover:text-zinc-300 transition-colors"
>@{a.handle}</a>{/if}
</p>
<!-- stretched link covers the whole card; sits below the handle link -->
<h3 class="font-semibold text-white truncate group-hover:text-[--accent] transition-colors">
{a.title}
<a
href={a.detail_url ? `${import.meta.env.BASE_URL}activity/${a.id}/` : `${import.meta.env.BASE_URL}activity/local/?id=${a.id}`}
class="before:absolute before:inset-0 before:content-['']"
>{a.title}</a>
</h3>
</div>
<span
@@ -195,7 +200,7 @@
{/if}
</div>
{/if}
</a>
</div>
{/each}
</div>