timescale.info#254 · Center the timeline in the stage, whatever its height (#253)
- timeline-app
- pull request
Closes #253. The axis was placed 192 px from the top of the stage. That's the middle only for a 384 px stage, and the stage is 330–410 px tall or fills the window in full screen. So in full screen the timeline opened well above the middle. The vertical pan limits were built around the same position, so it couldn't be dragged down to the middle either. ## Changes (`src/app.ts`) - **`centeredOffset()`** is the vertical offset that puts the axis in the middle of the stage's real height. For a comparison, it centers the middle of the rows' axes while they fit, and otherwise starts at the first row. - It's used when a timeline opens, by **Center axis**, when a comparison starts or changes, and in the vertical pan limits, so the middle can always be reached by dragging. - **A stage that grows or shrinks** (entering full screen, resizing the window) keeps the timeline's distance from the middle. A centered timeline stays centered in full screen, and a panned one keeps its place. - Leaving a comparison restores the earlier view's distance from the middle rather than from the top, since the stage may have changed size meanwhile. On the normal 365 px desktop stage, the axis moves up about 10 px to the true middle. ## Tests - `test/fullscreen-browser.mjs`: entering full screen keeps the timeline's distance from the middle, and Center axis then puts the axis in the middle of the taller stage. - `test/plugins-browser.mjs`: Center axis is checked by the axis line's position, not by `translateY(0px)`, which was only the center at 384 px. - `npm test` (304) passes. `test/browser.mjs` passes in Chromium, Firefox and WebKit, and `test/plugins-browser.mjs` in Chromium (all run in the Playwright 1.58.2 container).
Sources
Open #254 · Center the timeline in the stage, whatever its height (#253) in the timeline