Page Progress #397

Closed
opened 2026-02-04 19:26:49 +03:00 by OVERLORD · 11 comments
Owner

Originally created by @Shackelford-Arden on GitHub (Aug 8, 2017).

Desired Feature

This is a nice to have, really not something that is a deal breaker.

As we add headers and whatnot to a page, BookStack adds page links on the right. I'd think it would be cool to have the page "follow" the user through the page. So, if I'm head section 3, the link on the right is highlighted in some way (arrow, color change, underline, whatever).

Would just be nice so I can keep track of my progress while I read :).

Note: I'm not worried about the page remembering where I left off.

Originally created by @Shackelford-Arden on GitHub (Aug 8, 2017). Desired Feature This is a nice to have, really not something that is a deal breaker. As we add headers and whatnot to a page, BookStack adds page links on the right. I'd think it would be cool to have the page "follow" the user through the page. So, if I'm head section 3, the link on the right is highlighted in some way (arrow, color change, underline, whatever). Would just be nice so I can keep track of my progress while I read :). Note: I'm not worried about the page remembering where I left off.
OVERLORD added the 🛠️ Enhancement🎨 Design labels 2026-02-04 19:26:49 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Aug 9, 2017):

@Shackelford-Arden Yeah, I agree. Think it should be fairly subtle so maybe text color change or font weight change to avoid it being distracting.

@ssddanbrown commented on GitHub (Aug 9, 2017): @Shackelford-Arden Yeah, I agree. Think it should be fairly subtle so maybe text color change or font weight change to avoid it being distracting.
Author
Owner

@Shackelford-Arden commented on GitHub (Aug 9, 2017):

I agree, it really shouldn't distract. Best used as a reference.

@Shackelford-Arden commented on GitHub (Aug 9, 2017): I agree, it really shouldn't distract. Best used as a reference.
Author
Owner

@ssddanbrown commented on GitHub (Aug 10, 2017):

Just for reference, Would be nice to do this efficiently using IntersectionObservers:
https://developers.google.com/web/updates/2016/04/intersectionobserver

@ssddanbrown commented on GitHub (Aug 10, 2017): Just for reference, Would be nice to do this efficiently using IntersectionObservers: https://developers.google.com/web/updates/2016/04/intersectionobserver
Author
Owner

@Abijeet commented on GitHub (Sep 12, 2017):

@ssddanbrown - If we use IntersectionObservers the supported browsers will be slightly narrow - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility

If you are ok with that...I can take a crack at it.

@Abijeet commented on GitHub (Sep 12, 2017): @ssddanbrown - If we use `IntersectionObservers` the supported browsers will be slightly narrow - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility If you are ok with that...I can take a crack at it.
Author
Owner

@ssddanbrown commented on GitHub (Sep 14, 2017):

@Abijeet Ahh, Don't really care about IE but shame about safari. Since this is a non-essential feature I'd say lets not worry about safari for now, It'll catch up at some point soon. As long as no errors are thrown.

Yeah, That would be great, Feel free to take a crack at it.

@ssddanbrown commented on GitHub (Sep 14, 2017): @Abijeet Ahh, Don't really care about IE but shame about safari. Since this is a non-essential feature I'd say lets not worry about safari for now, It'll catch up at some point soon. As long as no errors are thrown. Yeah, That would be great, Feel free to take a crack at it.
Author
Owner

@Abijeet commented on GitHub (Sep 28, 2017):

I'll not be able to work on this over the next week either, so if you wanted to implement this for the next release, please go ahead. Otherwise, I'd still like to take a crack at it after my vacation.

@Abijeet commented on GitHub (Sep 28, 2017): I'll not be able to work on this over the next week either, so if you wanted to implement this for the next release, please go ahead. Otherwise, I'd still like to take a crack at it after my vacation.
Author
Owner

@ssddanbrown commented on GitHub (Sep 28, 2017):

Thanks for letting me know @Abijeet.

If I feel like writing some JS at the weekend I might sneak it into the next bugfix release otherwise it'll likely remain up for grabs.

Enjoy your vacation!

@ssddanbrown commented on GitHub (Sep 28, 2017): Thanks for letting me know @Abijeet. If I feel like writing some JS at the weekend I might sneak it into the next bugfix release otherwise it'll likely remain up for grabs. Enjoy your vacation!
Author
Owner

@Abijeet commented on GitHub (Oct 23, 2017):

Started working on this.

@Abijeet commented on GitHub (Oct 23, 2017): Started working on this.
Author
Owner

@Abijeet commented on GitHub (Nov 1, 2017):

I've had a chance to work on this, I'll try to give an update by end of the week.

@Abijeet commented on GitHub (Nov 1, 2017): I've had a chance to work on this, I'll try to give an update by end of the week.
Author
Owner

@Abijeet commented on GitHub (Nov 1, 2017):

Created pull request here - https://github.com/BookStackApp/BookStack/pull/580

There's an issue that I'm not sure how to solve -

screenshot-127 0 0 1-8000-2017-11-02-01-16-55-784

The current header is decided based on the proximity of a heading to the top of the viewport. To be precise, if a heading is 100px within the top corner of the viewport it is marked as the current heading. Problem is with this heading at the bottom, it never gets close to 100px of the top of the viewport.

@Abijeet commented on GitHub (Nov 1, 2017): Created pull request here - https://github.com/BookStackApp/BookStack/pull/580 There's an issue that I'm not sure how to solve - ![screenshot-127 0 0 1-8000-2017-11-02-01-16-55-784](https://user-images.githubusercontent.com/1685517/32294332-daac33ea-bf6b-11e7-8a0d-367ed477c649.png) The current header is decided based on the proximity of a heading to the top of the viewport. To be precise, if a heading is 100px within the top corner of the viewport it is marked as the current heading. Problem is with this heading at the bottom, it never gets close to 100px of the top of the viewport.
Author
Owner

@Shackelford-Arden commented on GitHub (Dec 7, 2017):

Woohoo! haha :D

@Shackelford-Arden commented on GitHub (Dec 7, 2017): Woohoo! haha :D
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#397