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/ActivityDetail.svelte
+4 -2
View File
@@ -41,7 +41,9 @@
localDescription = e.detail.description;
}
$: trackUrl = activity.track_url ? `${base}data/${activity.track_url}` : null;
$: trackUrl = activity.track_url
? (activity.track_url.startsWith('http') ? activity.track_url : `${base}data/${activity.track_url}`)
: null;
$: color = sportColor(activity.sport);
function lightboxPrev() { if (lightboxIndex !== null) lightboxIndex = (lightboxIndex - 1 + galleryImages.length) % galleryImages.length; }
@@ -169,7 +171,7 @@
</span>
{/if}
<span class="text-xs text-zinc-500">
{formatDate(activity.started_at)} · {formatTime(activity.started_at)}
{formatDate(activity.started_at)} · {formatTime(activity.started_at)}{#if activity.handle} · <a href="{base}u/{activity.handle}/" class="hover:text-zinc-300 transition-colors">@{activity.handle}</a>{/if}
</span>
</div>
<div class="flex items-center gap-3">
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>