scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-08-28 05:27:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Roadmap: replace inline shipped descriptions with hover tooltip

Browse source 
Saves vertical space by showing only date + title in shipped rows,
with an info icon that reveals the description on hover.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-03-16 18:27:58 -04:00
parent 124894d0eb
commit aa8ff368df
No known key found for this signature in database
2 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/marketing/src/pages/roadmap.astro
View file

@ -73,10 +73,15 @@ const statusConfig = {
<div class="mt-6 space-y-0">
{shippedVisible.map((item, i) => (
<div class={`reveal reveal-d${i + 1} flex items-baseline gap-4 py-3 border-b border-navy-800/40`}>
<div class={`reveal reveal-d${i + 1} flex items-center gap-4 py-3 border-b border-navy-800/40`}>
<span class="shrink-0 w-20 text-xs font-mono text-mint/60">{item.data.date}</span>
<span class="font-display text-sm font-semibold text-ice-50">{item.data.title}</span>
<span class="text-sm text-ice-300/60 hidden sm:inline">&mdash; {item.data.description}</span>
<span class="shipped-info relative ml-auto shrink-0">
<svg class="h-4 w-4 text-ice-300/30 hover:text-ice-300/60 transition-colors cursor-help" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
<span class="shipped-info-tip">{item.data.description}</span>
</span>
</div>
))}
</div>
@ -112,10 +117,15 @@ const statusConfig = {
<div class="min-h-0">
<div class="space-y-0">
{shippedHidden.map((item) => (
<div class="flex items-baseline gap-4 py-3 border-b border-navy-800/40">
<div class="flex items-center gap-4 py-3 border-b border-navy-800/40">
<span class="shrink-0 w-20 text-xs font-mono text-mint/60">{item.data.date}</span>
<span class="font-display text-sm font-semibold text-ice-50">{item.data.title}</span>
<span class="text-sm text-ice-300/60 hidden sm:inline">&mdash; {item.data.description}</span>
<span class="shipped-info relative ml-auto shrink-0">
<svg class="h-4 w-4 text-ice-300/30 hover:text-ice-300/60 transition-colors cursor-help" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
<span class="shipped-info-tip">{item.data.description}</span>
</span>
</div>
))}
</div>

23
apps/marketing/src/styles/global.css
View file

@ -273,3 +273,26 @@
border-color: var(--color-navy-800);
margin: 2em 0;
}
/* Shipped feature info tooltip */
.shipped-info-tip {
display: none;
position: absolute;
right: 0;
bottom: calc(100% + 8px);
width: 280px;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--color-navy-800);
background: var(--color-navy-900);
color: var(--color-ice-300);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
z-index: 20;
}
.shipped-info:hover .shipped-info-tip {
display: block;
}