feat: update article outline visibility and styling in SingleContent - #1942
Merged
Conversation
johan-bell
force-pushed
the
1857-app-reading-bar-on-single-contents-topbar
branch
from
August 26, 2026 09:35
83cf230 to
5bedcd3
Compare
MrDirkelz
commented
Aug 28, 2026
MrDirkelz
left a comment
MrDirkelz
left a comment
Collaborator
Author
There was a problem hiding this comment.
Code looks good to me
- Mobile: renders a thin progress bar above the bottom nav via a teleported element in BasePage, driven by a new rAF-throttled scroll tracker in useReadingProgressTracker. - Desktop: adds a left-gutter ArticleOutline (heading nav + progress rail) and reflows the article into a 3-column grid to make room for it.
Introduces ArticleOutline.vue for SingleContent pages: scans h2/h3 headings from the rendered article, generates stable ids for scroll-to-heading links, tracks the active section on scroll, and renders a sticky side rail whose fill reflects overall reading progress.
…hapter dropdown stand out
…he top chrome engine-independently
…ad of a top-edge bar
…so it fills from the first scroll
…put while scrolling
The pill now opens as a 'Continue where you left off' offer when a saved position exists, then becomes the chapter dropdown on the same track. The track shows the dwell-confirmed reading progress instead of a separate scroll position, so the pill, the resume offer and the homepage Continue row all report the same number. Removes ContinueReadingPrompt, the scroll-progress value in the tracker, and the sidebar width variable that only served the old prompt.
…e saved reading progress
johan-bell
force-pushed
the
1857-app-reading-bar-on-single-contents-topbar
branch
from
September 1, 2026 06:51
fa1204d to
19976a7
Compare
ivanslabbert
approved these changes
Sep 1, 2026
ivanslabbert
left a comment
ivanslabbert
left a comment
Contributor
There was a problem hiding this comment.
Approved with comments
| <template> | ||
| <span | ||
| v-if="showResumeOffer" | ||
| class="relative flex max-w-full items-center rounded-lg bg-zinc-100/70 shadow-md ring-1 ring-zinc-900/10 backdrop-blur-sm dark:bg-slate-700/70 dark:ring-white/10" |
Contributor
There was a problem hiding this comment.
Do not use blur, only transparency. Blur is resource heavy, and our target devices are often budget devices.
| </span> | ||
| <span | ||
| v-else-if="visible && !headings.length" | ||
| class="relative flex max-w-full items-center overflow-hidden rounded-lg bg-zinc-100/70 px-3.5 pb-2.5 pt-1.5 text-sm text-zinc-800 shadow-md ring-1 ring-zinc-900/10 backdrop-blur-sm dark:bg-slate-700/70 dark:text-slate-50 dark:ring-white/10" |
| > | ||
| <template #trigger> | ||
| <span | ||
| class="relative flex max-w-full items-center gap-1.5 overflow-hidden rounded-lg bg-zinc-100/70 px-3.5 pb-2.5 pt-1.5 text-sm text-zinc-800 shadow-md ring-1 ring-zinc-900/10 backdrop-blur-sm hover:bg-zinc-200 dark:bg-slate-700/70 dark:text-slate-50 dark:ring-white/10 dark:hover:bg-slate-600" |
…on-single-contents-topbar # Conflicts: # app/src/pages/SingleContent/SingleContent.vue
Backdrop blur is expensive to composite on the budget devices the app targets. The translucent backgrounds carry the effect on their own. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
johan-bell
deleted the
1857-app-reading-bar-on-single-contents-topbar
branch
September 4, 2026 14:57
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.