commit a0a4b778cc5899234bbbbb74788a0e134725a737 truex <truex@equwal.com> 2026-09-26 19:17:10 -0700 Move the Follow button over the page, out of the top bar On the phone the Follow button was the last item of the top bar. When it showed, the page label got 65 px narrower, and each button right of the label moved left (Next page from x 295 to 230, "audio to this page" from 371 to 306). A quick second tap on Next page then pressed "audio to this page" and moved the audio, and a tap on the usual place of play pressed Follow. The Follow button now floats over the lower right corner of the page, 48 px high. The buttons of the top bar stay where they are: at 360 CSS px, Next page and "audio to this page" keep x 244 and 320 when Follow shows. "Follow paused" stays in the strip.
README.md | 13 +++++++------ index.html | 17 +++++++++-------- src/style.css | 22 +++++++++++++++++++--- 3 files changed, 35 insertions(+), 17 deletions(-)
diff --git a/README.md b/README.md index 540a2e2..e7f04b8 100644 --- a/README.md +++ b/README.md @@ -125,12 +125,13 @@ text of the cue on it, then the next page. When you turn a page yourself (an arrow, a key, a swipe or the page jump), the follow holds: the page does not turn by itself, and a -"Follow" button shows in the top bar. The mark still shows when the cue -of now is on the page that you look at. The hold ends when you press -"Follow", when the audio reaches the page that you look at, when you -move the audio from the app (the cue list or "move the audio to this -page"), or when the player jumps. A new alignment after a page is read -does not end the hold. +"Follow" button shows over the lower right corner of the page. It is not +in the top bar, so the buttons there do not move. The mark still shows +when the cue of now is on the page that you look at. The hold ends when +you press "Follow", when the audio reaches the page that you look at, +when you move the audio from the app (the cue list or "move the audio +to this page"), or when the player jumps. A new alignment after a page +is read does not end the hold. ### The top bar diff --git a/index.html b/index.html index 2d84221..0f25ae5 100644 --- a/index.html +++ b/index.html @@ -55,14 +55,6 @@ <path class="solid" d="M10 10v7l5.5-3.5z" /> </svg> </button> - <button - id="follow-now" - aria-label="Follow the audio again" - title="Follow the audio again: go to its page" - hidden - > - Follow - </button> </header> <div id="strip"> @@ -171,6 +163,15 @@ <div id="overlay"></div> </div> </div> + <!-- Over the page, not in the top bar: a button that shows must not move the others. --> + <button + id="follow-now" + aria-label="Follow the audio again" + title="Follow the audio again: go to its page" + hidden + > + Follow + </button> </main> <script type="module" src="/src/main.ts"></script> diff --git a/src/style.css b/src/style.css index b4d0d1a..5d7b3a8 100644 --- a/src/style.css +++ b/src/style.css @@ -105,12 +105,26 @@ body { font-variant-numeric: tabular-nums; } -/* The Follow button shows while a page turn by the user holds the follow. */ -#topbar #follow-now { - padding: 0 0.6rem; +/* + * The Follow button shows while a page turn by the user holds the follow. + * It floats over the lower right corner of the page, so the buttons of the + * top bar stay where they are when it shows. + */ +#follow-now { + position: absolute; + right: 1rem; + bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); + z-index: 5; + min-height: 48px; + padding: 0 1.2rem; + font: inherit; font-weight: 600; color: #1a1a1a; background: var(--highlight-solid); + border: none; + border-radius: 24px; + box-shadow: 0 2px 8px #0006; + cursor: pointer; } #follow-note { @@ -309,7 +323,9 @@ body.menu-open #panel { background: var(--highlight); } +/* The frame of the Follow button. */ #main { + position: relative; flex: 1; min-height: 0; display: flex;