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

feat(teleprompter): let the cue arrow use the margin it has

Browse Source 
The text width option leaves a wide gutter which the indicator was barely
touching. It is now sized against that gutter rather than against the
viewport, so it fills a useful part of the space beside the line: roughly
three times the area at the default width, and it grows with the font.

Sizing it from the gutter also fixes a case the fixed width did not handle.
A column set to the full width leaves nowhere for the arrow to go, and it
now collapses instead of being drawn over the first word.

Prompted by a look at how Ikan's PrompterPro presents the same control,
where the eyeline indicator is a large arrow sitting clear of the script.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf
This commit is contained in:
Claude
2026-08-18 12:26:39 +00:00
parent 1d78090e19
commit 6ef04d9a92
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/teleprompter/Teleprompter.scss
+12 -3
View File
@@ -162,12 +162,21 @@
position: absolute;
top: 0;
bottom: 0;
/* sits in the gutter beside the column, never over the words */
right: calc(100% + 0.35em);
width: 0.45em;
background: $accent-color;
clip-path: polygon(0 0, 100% 50%, 0 100%);
/* em here is the script's own size, so the arrow grows with the text */
font-size: var(--tp-font-size);
/**
* The text width option leaves a gutter on each side, and the arrow is sized
* against it rather than against the viewport: it fills a good part of the
* space it has, and it cannot land on the words when the column is widened.
* A column at the full width leaves no gutter and no arrow, which is the
* honest outcome, since there is nowhere for it to go.
*/
--tp-gutter: max(0px, calc((100vw - 100%) / 2));
width: min(1.2em, calc(var(--tp-gutter) * 0.6));
right: calc(100% + var(--tp-gutter) * 0.2);
}
.teleprompter__controls {