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.
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.
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)
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.
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.
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.