Add a floating 'back to top' button for long pages

Hi devs, thanks for your work maintaining and improving Pi-hole. This is a feature request for the Pi-hole web UI.

When viewing a long page which can be scrolled down, this scrolls all the links in the sidebar and all buttons and clickable elements off the top of the browser window. Examples where this can happen in the UI:

  • Query Log with show all
  • Long-term data Query Log with hundreds or thousands of records returned
  • Domains if many domains/regexes are present
  • Adlists if many lists are in use, etc

In order to navigate back to the UI controls it's necessary to first return to the top of the browser window. Staying with the mouse this requires either scrolling back up in the page, or finding and dragging the scroll bar back up, or going out of the UI and clicking reload on the browser to quickly get back. Alternatively the user can go to the keyboard and use a key combo and then return to the mouse.

Would it be possible please to introduce a small floating 'back to top' button which scrolls to the top instantly, and which appears when the UI controls are scrolled out of view in a long page? This will permit a long page to be viewed, the relevant information located and used and then, with a single click without leaving the mouse, return to the main UI controls.

This is the kind of mod I had in mind. Here's a visual mockup of the sort of thing I'm thinking of.

Before:

After:

Thanks for your consideration,
Chris

I like the idea. As you already provided sample code: do you feel comfortable enough to create a pull request in GitHub - pi-hole/AdminLTE: Pi-hole Dashboard for stats and more?

No worries, we don't bite and all failed on our first pull :wink:

Thanks, I appreciate the invite, however the code I linked to was more to show a working example of that kind of button in action. I'm not sure if that code would be suitable for your codebase, nor where exactly it would be getting applied to make it work on all the Pi-hole pages where a long list could scroll the controlls off the top of the browser window.

I'm imagining that in your code there is a place or places where some equivalent code could be added to achieve the same kind of button effect. The image mockup was showing how it might be placed, in the space already allocated for the side bar (Win XP's MS Paint FTW).

I'm certainly not averse to rolling up my sleeves and getting stuck in, but I'll have to do a crash course in git and github, and then php (?) coding, in order to know how to contribute that way. If I could I'd be happy to help. If you can give me a pointer or two as to how I can help, I will do so.

I probably would put the script in

This should be loaded on every page (except the login). I would want this button to appear on all pages.
__

https://docs.pi-hole.net/guides/github/contributing/
https://docs.pi-hole.net/guides/github/how-to-fork-rebase/

Thanks @yubiuser I will see if I can get it working there on my local copy, and then work out a pull request (I assume that's the proper process someone would test new code and then issue a PR once it's behaving)

1 Like

Exactly. You can "live edit" the web interface located at /var/www/html/admin and see the results immediately at pi.hole/admin. Additionally, this directory is already a git repo, so you could fork the AdminLTE repo to your github account and add this as a new upstream to the repo at /var/www/html/admin.

Just let me know if you need help with anything.

1 Like

Perfect, thanks, I can play with the running code here and see if I can get it working and looking nice, and then use the git aspect as an opportunity to skill up a little there. If I get stuck I'll post an animation or some screenshots of the button in action and find out more on how to get it PR'd.

One last hint before you run in trouble later: Pi-hole enforces DCO and requires all commits to be signed-off: How to sign-off commits - Pi-hole documentation

Noted, thankyou.

Turns out the Pi-hole Docs site already has a perfect floating Back to top button! It appears if the page is scrolled down and then starts being scrolled back up, which is perfect behaviour and positioning for the Query Log and long pages.

Just trying to work out how to track down and steal the relevant code and try it in that footer.js.

Do I need a github account, @yubiuser, to be able to do the things you've described and to be able to contribute where I can?

Yes you do. The doc repo is at GitHub - pi-hole/docs: The official Pi-hole documentation

1 Like