Add dashboard crosslinks and card drag-and-drop reordering
Dashboard cards (targets, auto-start, profiles) are now clickable, navigating to the full entity card on the appropriate tab. Card sections support drag-and-drop reordering via grip handles with localStorage persistence. Fix crosslink navigation scoping to avoid matching dashboard cards, and fix highlight race on rapid clicks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -76,6 +76,87 @@ section {
|
||||
animation: cardEnter 0.25s ease-out both;
|
||||
}
|
||||
|
||||
/* ── Card drag-and-drop reordering ── */
|
||||
|
||||
.card-drag-handle {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
opacity: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
transition: opacity 0.2s ease, background 0.15s ease;
|
||||
z-index: 2;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.card:hover > .card-drag-handle,
|
||||
.template-card:hover > .card-drag-handle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.card-drag-handle:hover {
|
||||
opacity: 1 !important;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.card-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Clone floating during drag */
|
||||
.card-drag-clone {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
opacity: 0.92;
|
||||
transform: scale(1.03) rotate(0.8deg);
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
|
||||
transition: none;
|
||||
will-change: left, top;
|
||||
}
|
||||
|
||||
/* Placeholder in grid */
|
||||
.card-drag-placeholder {
|
||||
border: 2px dashed var(--primary-color);
|
||||
border-radius: 8px;
|
||||
background: rgba(33, 150, 243, 0.04);
|
||||
min-height: 80px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Suppress hover effects during drag */
|
||||
.cs-dragging .card,
|
||||
.cs-dragging .template-card {
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.cs-dragging .card-drag-handle {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide drag handles when filter is active */
|
||||
.cs-filtering .card-drag-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card-drag-clone {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-tutorial-btn {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
||||
Reference in New Issue
Block a user