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

chrislph · September 13, 2022, 3:52pm

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

yubiuser · September 13, 2022, 5:28pm

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

chrislph · September 14, 2022, 2:09am

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.

yubiuser · September 15, 2022, 4:38pm

I probably would put the script in

github.com

pi-hole/web/blob/4d12ee7f9a5a1353e4a1d6ea21bd4d535ff88715/scripts/pi-hole/js/footer.js

/* Pi-hole: A black hole for Internet advertisements
 *  (c) 2017 Pi-hole, LLC (https://pi-hole.net)
 *  Network-wide ad blocking via your own hardware.
 *
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */

/* global utils:false */
//The following functions allow us to display time until pi-hole is enabled after disabling.
//Works between all pages

function secondsTimeSpanToHMS(s) {
  var h = Math.floor(s / 3600); //Get whole hours
  s -= h * 3600;
  var m = Math.floor(s / 60); //Get remaining minutes
  s -= m * 60;
  return h + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); //zero padding on minutes and seconds
}

function piholeChanged(action) {

This file has been truncated. show original

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/

chrislph · September 15, 2022, 6:07pm

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)

yubiuser · September 15, 2022, 9:26pm

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.

chrislph · September 15, 2022, 9:30pm

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.

yubiuser · September 15, 2022, 9:33pm

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

chrislph · September 15, 2022, 9:35pm

Noted, thankyou.

chrislph · September 19, 2022, 9:55pm

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?

yubiuser · September 20, 2022, 2:26pm

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

system · March 19, 2023, 2:26pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.