feat: card highlight system for cross-entity navigation
When clicking a CrossLink, the target entity ID is passed as ?highlight=<id> in the URL. The destination page: 1. Shows a semi-transparent dim overlay (z-index: 10) 2. Finds the card with data-entity-id matching the ID 3. Scrolls to it smoothly (block: center) 4. Applies a pulsing primary-color box-shadow animation (z-index: 11) 5. Cleans up overlay + animation after 2 seconds If the card isn't in DOM yet (data still loading), a MutationObserver waits up to 5 seconds for it to appear. Changes: - New highlight.ts utility with highlightFromUrl(), MutationObserver, dim overlay management - Card component accepts entityId prop → data-entity-id attribute - CrossLink accepts entityId prop → appends ?highlight=<id> to href - All 9 entity pages: Card elements have entityId, highlightFromUrl() called after data loads - CSS: cardHighlight keyframe animation + nav-dim-overlay styles
This commit is contained in:
@@ -183,3 +183,29 @@ a:focus-visible {
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Card highlight for cross-entity navigation */
|
||||
@keyframes cardHighlight {
|
||||
0%, 100% { box-shadow: none; }
|
||||
25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
|
||||
}
|
||||
|
||||
.card-highlight {
|
||||
animation: cardHighlight 2s ease-in-out;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.nav-dim-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-dim-overlay.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user