Add re-order, spotlight/focus, and auto-position-snapshots features
- HTML5 drag-and-drop reordering of strip participants (per-GM flag) - Shift+click toggles spotlight focus on a participant (gold ring indicator) - Escape exits focus mode - Auto-save strip position on drag end + every 30s with viewport validation - Reset strip position button in Director's Board - French locale strings for reset button
This commit is contained in:
@@ -136,6 +136,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── Small tile shell sizing (all S layouts) ─────────────────────────────────
|
||||
// Base .sp-avatar__shell is 60×60 fixed — override to follow --sp-widget-width
|
||||
.scrying-pool.scrying-pool-strip.sp-layout-vertical-sm,
|
||||
.scrying-pool.scrying-pool-strip.sp-layout-horizontal-sm,
|
||||
.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm {
|
||||
.sp-participant-avatar .sp-avatar__shell {
|
||||
width: calc(var(--sp-widget-width) - 12px);
|
||||
height: calc(var(--sp-widget-width) - 12px);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Toolbar: grip + toggle + DB + close on one line ─────────────────────────
|
||||
// All chrome lives here; hidden at rest, revealed on strip hover.
|
||||
.sp-strip__toolbar {
|
||||
@@ -501,6 +512,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Spotlight focus state — gold ring (uses urgency-director token)
|
||||
// ============================================================
|
||||
.sp-participant-avatar.sp-state-focused {
|
||||
.sp-avatar__shell::after {
|
||||
box-shadow: inset 0 0 0 2px var(--sp-urgency-director);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Drag-and-drop reorder feedback
|
||||
// ============================================================
|
||||
.sp-strip__participant-item.sp-dragging {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.sp-strip__participant-item.sp-drag-over {
|
||||
box-shadow: inset 0 0 0 2px var(--sp-urgency-director);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// StateRing animations — gated under no-preference (AC-16)
|
||||
// ============================================================
|
||||
|
||||
Reference in New Issue
Block a user