cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-01 04:19:12 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat(views): keep group visible as header for the running event

Browse Source 
In the countdown view a user can subscribe to a group and to events
inside it. Once an event within the group started, the auto scroll
pushed the group card above the viewport, losing the context of which
group the running event belongs to. The operator view had the same
problem.

Group and its events are now wrapped in a section, and the group card is
pinned with position sticky, so it stays above the running event however
far down the group that event sits. The follow scroll offsets the sticky
header, and the follow button threshold discounts it so it keeps its
meaning.

A group holding the running event is now marked as active. In the
countdown the card keeps its background and gains a green outline, the
green fill stays reserved for the running event itself. In the operator
the card is already filled with the group colour, so the ring uses the
lighter active indicator over a dark frame to stay legible against any
group colour. Neither state was visible before: .sub--group overrode
both .sub--live and .sub--armed at equal specificity.

Also fixes the countdown handing the same selectedRef to both a group
row and its running child. React detaches refs before attaching them,
so the child unsetting the ref left it null while the group never
re-attached, silently disabling auto scroll.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GjX7D56AW8cL3FXjvtnjtL
This commit is contained in:
Claude
2026-08-10 17:36:56 +00:00
parent c6eccec30e
commit e4cfa1d17d
9 changed files with 299 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/countdown/Countdown.scss
+34 -2
View File
@@ -103,6 +103,22 @@ $item-height: 3.5rem;
padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
}
/* a subscribed group and its subscribed events, bounds the sticky header to its own section */
.sub-section {
display: flex;
flex-direction: column;
/* flex-grow is set inline from the row count, so that the rows keep the share they had in the list */
flex: 1 1 0;
}
/* scoped to the section, the select view shows the same cards in a flat list */
.sub-section .sub--group {
position: sticky;
/* sticky insets constrain the margin box, negate the row margin so the header sits flush */
top: -2px;
z-index: 1;
}
/* ====================== LIST-ITEM ======================*/
.sub {
margin: 2px;
@@ -196,9 +212,15 @@ $item-height: 3.5rem;
.sub--group {
box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
background:
/* the card colour is translucent, an opaque base keeps the rows from showing through the sticky header.
split into longhands since the shorthand only takes a colour in its last layer */
background-color: var(--background-color-override, $viewer-background-color);
background-image:
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
var(--card-background-color-override, $viewer-card-bg-color);
linear-gradient(
var(--card-background-color-override, $viewer-card-bg-color),
var(--card-background-color-override, $viewer-card-bg-color)
);
.sub__binder {
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
@@ -230,6 +252,16 @@ $item-height: 3.5rem;
}
}
/* a group holding the running event is only outlined, the green fill belongs to the event row itself */
.sub--group.sub--live {
box-shadow: inset 0 0 0 2px $active-green;
}
/* loaded but not yet running, subtle enough to not compete with the live ring */
.sub--group.sub--armed {
box-shadow: inset 0 0 0 2px $gray-1000;
}
.sub__title {
grid-area: title;
padding-bottom: 0.5rem;