mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-17 11:19:36 +03:00
Navigation at the End of the Page #1132
Closed
opened 2026-02-04 23:54:59 +03:00 by OVERLORD
·
21 comments
No Branch/Tag Specified
development
l10n_development
release
v25-12
llm_only
vectors
v25-11
docker_env
drawio_rendering
user_permissions
ldap_host_failover
svg_image
prosemirror
captcha_example
fix/video-export
v25.12.3
v25.12.2
v25.12.1
v25.12
v25.11.6
v25.11.5
v25.11.4
v24.11.4
v25.11.3
v25.11.2
v25.11.1
v25.11
v25.07.3
v25.07.2
v25.07.1
v25.07
v25.05.2
v25.05.1
v25.05
v25.02.5
v25.02.4
v25.02.3
v25.02.2
v25.02.1
v25.02
v24.12.1
v24.12
v24.10.3
v24.10.2
v24.10.1
v24.10
v24.05.4
v24.05.3
v24.05.2
v24.05.1
v24.05
v24.02.3
v24.02.2
v24.02.1
v24.02
v23.12.3
v23.12.2
v23.12.1
v23.12
v23.10.4
v23.10.3
v23.10.2
v23.10.1
v23.10
v23.08.3
v23.08.2
v23.08.1
v23.08
v23.06.2
v23.06.1
v23.06
v23.05.2
v23.05.1
v23.05
v23.02.3
v23.02.2
v23.02.1
v23.02
v23.01.1
v23.01
v22.11.1
v22.11
v22.10.2
v22.10.1
v22.10
v22.09.1
v22.09
v22.07.3
v22.07.2
v22.07.1
v22.07
v22.06.2
v22.06.1
v22.06
v22.04.2
v22.04.1
v22.04
v22.03.1
v22.03
v22.02.3
v22.02.2
v22.02.1
v22.02
v21.12.5
v21.12.4
v21.12.3
v21.12.2
v21.12.1
v21.12
v21.11.3
v21.11.2
v21.11.1
v21.11
v21.10.3
v21.10.2
v21.10.1
v21.10
v21.08.6
v21.08.5
v21.08.4
v21.08.3
v21.08.2
v21.08.1
v21.08
v21.05.4
v21.05.3
v21.05.2
v21.05.1
v21.05
v21.04.6
v21.04.5
v21.04.4
v21.04.3
v21.04.2
v21.04.1
v21.04
v0.31.8
v0.31.7
v0.31.6
v0.31.5
v0.31.4
v0.31.3
v0.31.2
v0.31.1
v0.31.0
v0.30.7
v0.30.6
v0.30.5
v0.30.4
v0.30.3
v0.30.2
v0.30.1
v0.30.0
v0.29.3
v0.29.2
v0.29.1
v0.29.0
v0.28.3
v0.28.2
v0.28.1
v0.28.0
v0.27.5
v0.27.4
v0.27.3
v0.27.2
v0.27.1
v0.27
v0.26.4
v0.26.3
v0.26.2
v0.26.1
v0.26.0
v0.25.5
v0.25.4
v0.25.3
v0.25.2
v0.25.1
v0.25.0
v0.24.3
v0.24.2
v0.24.1
v0.24.0
v0.23.2
v0.23.1
v0.23.0
v0.22.0
v0.21.0
v0.20.3
v0.20.2
v0.20.1
v0.20.0
v0.19.0
v0.18.5
v0.18.4
v0.18.3
v0.18.2
v0.18.1
v0.18.0
v0.17.4
v0.17.3
v0.17.2
v0.17.1
v0.17.0
v0.16.3
v0.16.2
v0.16.1
v0.16.0
v0.15.3
v0.15.2
v0.15.1
v0.15.0
v0.14.3
v0.14.2
v0.14.1
v0.14.0
v0.13.1
v0.13.0
v0.12.2
v0.12.1
v0.12.0
v0.11.2
v0.11.1
v0.11.0
v0.10.0
v0.9.3
v0.9.2
v0.9.1
v0.9.0
v0.8.2
v0.8.1
v0.8.0
v0.7.6
v0.7.5
v0.7.4
v0.7.3
0.7.2
v.0.7.1
v0.7.0
v0.6.3
v0.6.2
v0.6.1
v0.6.0
v0.5.0
Labels
Clear labels
🎨 Design
📖 Docs Update
🐛 Bug
🐛 Bug
:cat2:🐈 Possible duplicate
💿 Database
☕ Open to discussion
💻 Front-End
🐕 Support
🚪 Authentication
🌍 Translations
🔌 API Task
🏭 Back-End
⛲ Upstream
🔨 Feature Request
🛠️ Enhancement
🛠️ Enhancement
🛠️ Enhancement
❤️ Happy feedback
🔒 Security
🔍 Pending Validation
💆 UX
📝 WYSIWYG Editor
🌔 Out of scope
🔩 API Request
:octocat: Admin/Meta
🖌️ View Customization
❓ Question
🚀 Priority
🛡️ Blocked
🚚 Export System
♿ A11y
🔧 Maintenance
> Markdown Editor
pull-request
Mirrored from GitHub Pull Request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: starred/BookStack#1132
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @blackshrub on GitHub (Apr 9, 2019).
It is better if there is a prev-next button at the end of every page rather than to navigate from the left sidebar. Prev-next button is more mobile-friendly.
@ssddanbrown commented on GitHub (Apr 9, 2019):
Thanks for the suggestion @blackshrub.
I'm surprised this has not been requested before tbh.
I guess the last page within a chapter should have a next button back to the chapter. Same for last chapter within a book, but returning to the book-level.
@ssddanbrown commented on GitHub (Sep 1, 2019):
Merged Matching Issue
Originally posted by @Wookbert:
Describe the feature you'd like
The name and UI concept clearly implies to organize your information in books with chapters and pages. Reading a book however comes with the experience and convenience of continuous reading through a simple page turn. This does not only apply for paper books, but also has been mimicked on any eBook reader.
On BookStack I'm missing this convenience however so far. Yes, we do have the Book Navigation in the left side panel next to the current page (hereunder; which BTW only follows your scrolling and thus is always in instant reach, if the browser window is wide enough, so that there’s enough space for a right side panel as well), but that’s just not as convenient as a simple page turn.
I therefore suggest to additionally place four buttons between the end of the page and the comments section:
Here’s a quick mockup of how that could look:
Further behaviour
Discussion: Floating navigation?
Another concept might be to have this navigation with its 4 buttons visible not only when reaching the end of the page, but instead visible and thus accessible at all times, so one can e.g. jump to the next page, even if one’s only half-way through a long page. The preferable place for such a floating navigation would be the bottom of the window IMO.
The problem I see in this approach however is the waste of screen real estate. A solution to this problem could be to make the navigation only appear (instantly) when a) the mouse pointer gets moved to the lower something pixels at the window or b) one scrolls to the very end of the screen.
@ssddanbrown commented on GitHub (Sep 1, 2019):
Thanks for the design ideas @Wookbert,
I'd prefer not have a floating nav. I've tried to limit floating or dynamically appearing elements as much as possible in BookStack, unless there's large benefit gain, to keep focus on the content.
In regards to your design, I'm not sure just using arrows alone in that manner will work. They'd be fine if the content within a book/chapter is always sequential, or has order to it, but that's a large assumption I'm not sure we can make about everyone's use.
I think that muted links, showing the page/chapter name, could be universally better since it'll provide instant context regarding where the user will be led.
@Wookbert commented on GitHub (Sep 2, 2019):
Here’s a mockup of how a „floating“ navigation bar could look like. The term floating is a bit misleading IMO, as it would sit at the bottom of the window. And again: I wouldn't have it present at all times, but only appear when needed/triggered. So again, that would be:
a) the mouse pointer gets moved to the lower something pixels of the window and
b) one scrolls to the very end of the page (not end of screen), so it should appear as soon as the end of the book page is reached, before the comments come into sight.
Note that while the bottom bar is full width, the chapter buttons align with the left/right edge of the actual, white book page. I also wouldn't probably use any fancy animation to make the bar appear/disappear (such as sliding in/out from the bottom) as it might become annoyingly interrupt the user’s „flow“. Rapid fading perhaps at best.
@Wookbert commented on GitHub (Sep 2, 2019):
@ssddanbrown Can you describe this in detail or with an example? (I don't understand what you mean). My arrows clearly follow the book concept, with its chapters and pages. Online book pages of course can be linked into any direction and order, but that’s what we IMO have a) optional inline links (on the book pages) and b) the book navigation in the left side panel for.
@james-geiger commented on GitHub (Oct 9, 2019):
I've implemented something similar through a fairly hacky front end method to get basic previous/next article buttons at the end of each content page. However, this would obviously be more extensible if it was created in the view template with Blade.
I'm thinking @ssddanbrown would prefer that the links/buttons to navigate through the pages would, instead of just an icon or static text, include the chapter name and page name for the user in a contextual button, perhaps at the end of the page content.
Hacky method:
@Wookbert commented on GitHub (Oct 10, 2019):
Some CSS formatting to the hack would be nice. When Previous and Next are both shown, they touch each other. Or does this bit also belong to the HTML header!?
<button> <span>Blue Chapter</span> <span>Navy Blue</span> </button>@james-geiger commented on GitHub (Oct 10, 2019):
Hi @Wookbert,
I've applied some basic CSS to the buttons using the following:
It's by no means perfect (for instance, the "next article" button appears in the wrong location when there is no previous article) and I will quite likely update these when I have more time to appear more like buttons instead of links.
The script above applies the .prev-page-button and .next-page-button classes to the links so you can change the styles however you'd like.
@Wookbert commented on GitHub (Oct 12, 2019):
@james-geiger
Works pretty well, previous page link now left aligned, next page link right aligned. Only problem: If you are on the first page and there is no previous page, the next page link isn't right aligned, but almost centered. Sorry, I have ZERO clues about CSS, else I'd fix it myself.
@james-geiger commented on GitHub (Nov 19, 2019):
Hi @Wookbert,
Following up on this as I had some time today to get this worked out.
Looks like this now:
You'll have to replace the custom styles and javascript that I'd provided earlier with the contents of the attached file.
custom-head.txt
@ssddanbrown -- Happy to include this in a PR with more BookStack stylings.
@Sicklou commented on GitHub (Dec 24, 2019):
Any update on this ?
Will be added to a future release ?
@over-soul commented on GitHub (Apr 15, 2020):
@james-geiger, thanks so much for this! Love it.
@orware commented on GitHub (Jul 30, 2020):
+1 on this and I tried out the customization provided by @james-geiger and that does the trick pretty nicely so would be nice to have available as either a default and/or togglable option we can just enable in the Admin Settings area. (Had a coworker ask about it right away right after completing his first book, so definitely seems like it would be a useful feature for users).
@zachoooo commented on GitHub (Jan 5, 2021):
+1 for this. It seems like an easy feature to add that would make the user experience substantially more intuitive.
@Wookbert commented on GitHub (Jan 16, 2021):
+1
@ssddanbrown Why not include @james-geiger’s above code snippet?
Suggestion for further improvement: Shown box surrounding and article title preview (both as in @james-geiger’s screenshot) only optional via system preference check boxes.
@zachoooo commented on GitHub (Jan 16, 2021):
@james-geiger I made some slight modifications to the code you made to display a little bit nicer when both the next and previous page buttons should be shown. This just adds some space and a pipe between them as a separator.
@ssddanbrown commented on GitHub (Jan 16, 2021):
Sorry for my lack of feedback here.
@Wookbert I would be happy to consider a pull request for this feature, based on that, but with the following considerations:
Some things that would make a PR be reviewed swiftly (Happy to provide guidance):
@Wookbert commented on GitHub (Jan 16, 2021):
@zachoooo: Mind to add a screenshot of your design mod for comparison to James Geiger’s design?
@james-geiger: Seen the requirements for a PR @ssddanbrown just posted here above? Your turn... 🙃
@james-geiger commented on GitHub (Jan 16, 2021):
Hey folks, appreciate the response and thoughtful analysis by @ssddanbrown.
I'm happy to begin work on a PR, but as I alluded in previous comments and as confirmed by Dan, the code snippet I provided here as a proof of concept has a number of underlying assumptions that would need to be met in the code. It appears simple on the surface but would actually touch many different parts of the codebase.
The area that I'm least familiar is permissions and would likely need guidance there to keep things clean and secure.
So, the design/test/implementation phases will certainly take time to get right.
@ssddanbrown commented on GitHub (Feb 2, 2021):
@james-geiger Just an FYI, As I wouldn't want you to waste any time, https://github.com/BookStackApp/BookStack/pull/2511 has been opened. (Have not reviewed it yet)
@ssddanbrown commented on GitHub (May 29, 2021):
As discussed/shown in #2511, this feature has now been included and will be part of the next feature release.