mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-31 11:59:10 +00:00
Carlos Valente
0d5228f1e5
Three things measured wrong once the preview showed a real render: - the pip timer kept leading zeros where the timer view drops them by default, so the preview read 00:59:07 against the stage's 59:07 - and its own secondary line already dropped them - the extracted /messagecontrol route has no flex parent for the panel to grow into, so the stage collapsed to its minimum instead of filling the window - a tall panel caps the stage at its own width, and the slack it leaves now sits either side of the stage rather than all below it Covers the screen state controls in the e2e spec: the secondary source select puts the typed text on the stage, blackout reaches the timer view, and clear screen resets the state while keeping the text. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra
43 lines
1.0 KiB
SCSS
43 lines
1.0 KiB
SCSS
.preview {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* the stage caps at the panel width, so centre whatever slack a tall panel leaves */
|
|
justify-content: center;
|
|
gap: $element-inner-spacing;
|
|
}
|
|
|
|
/* the stage is the only elastic element in the panel, the controls below it keep their size */
|
|
.stage {
|
|
flex: 1 1 auto;
|
|
min-height: 3rem;
|
|
/* keep the height driven frame from growing wider than the panel */
|
|
max-height: calc(100cqw * 9 / 16);
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
/* the frame is a query container so that the embedded timer scales to the preview, not to the viewport */
|
|
.stageFrame {
|
|
position: relative;
|
|
container-type: inline-size;
|
|
contain: paint;
|
|
overflow: hidden;
|
|
aspect-ratio: 16 / 9;
|
|
height: 100%;
|
|
border-radius: $component-border-radius-md;
|
|
}
|
|
|
|
/* keep the pop-out affordances reachable above the blackout and message overlays */
|
|
.stageCorners {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: calc($zindex-floating + 2);
|
|
pointer-events: none;
|
|
|
|
> * {
|
|
pointer-events: auto;
|
|
}
|
|
}
|