Less color for the Query Log

[DL6ER]

By submitting this pull request, I confirm the following:

• I have read and understood the contributors guide, as well as this entire template.
• I have made only one major change in my proposed changes.
• I have commented my proposed changes within the code.
• I have tested my proposed changes, and have included unit tests where possible.
• I am willing to help maintain this change if there are issues with it later.
• I give this submission freely and claim no ownership.
• It is compatible with the EUPL 1.2 license
• I have squashed any insignificant commits. (git rebase)

---

What does this PR aim to accomplish?:

Make the Query Log less colorful by, instead of coloring the entire rows, emphasize only the main part.
This is currently lost in the colorful noise IMO.

I've also tried coloring the domain as well, but this looks somehow odd to me.

How does this PR accomplish the above?:

Do not colorize the entire row but only the status.

What documentation changes (if any) are needed to support this PR?:

None

[XhmikosR]

I didn't test it but I like it :)

Do you have a screenshot with the default light theme?

[DL6ER]

Do you have a screenshot with the default light theme?

I generated one right now, see below.

[XhmikosR]

LGTM even though the yellow color has low contrast but it's unrelated to this patch :)

[pralor-bot]

This pull request has been mentioned on Pi-hole Userspace. There might be relevant details there:

https://discourse.pi-hole.net/t/pi-hole-ftl-v5-9-web-v5-6-and-core-v5-4-released/49544/1

[Scraggarax]

Please consider adding a Toggle option for this. On mobile you can't tell what's blocked easily now. You have to scroll back and forth horizontally and it's frustrating.

[DL6ER]

Thanks for the suggestion. We'll check if it is even possible to automatically colorizing the domain (I don't think the time but type needs colorization) depending on your screen size. If not, I'll add a device-dependent toggle option (so it can be adjusted on every device/browser individually).

What do you think?

[sml156]

What do you think?

I think you made an issue where there were none

Now there is a issue it makes it harder to notice blocked queries, The whole page looks like a block of text.

[DL6ER]

Changes sometimes have unintended side-effects. Not a good justification to never change anything. Nobody realized this in our beta testing and I've seen comments that the query log is now easier to read - these users may all have used larger screens.

I was asking what users are thinking about the proposed solution. As you might have seen I've agreed that something will happen. I still want to hear your thoughts about what should happen. Pi-hole in a community-driven project after all, hence, your comments are appreciated.

[churchofnoise]

I only looked at it briefly when it was initially made available and agreed on the fact that it makes the page look less 'busy'.
However, I was actively reviewing the log today and found it harder to do as the original situation provided information on domain and 'status' in one view, now - even on big screens - your eyes need to go left and right, making the process more cumbersome when going through large amounts of data. I haven't tried on mobile yet but can imagine it to be worse because of the scrolling.

Hence, a simple toggle / checkbox would be useful so both options would be possible (not very sure if this should be automated based on screen size to be honest)

[dschaper]

What about the below:

(And change the (gravity) to be black like (cache)?

[HenrysCat]

This is really not a good change, this is better.

[DL6ER]

#1888 adds a setting to toggle the pre-v5.4 behavior (colorize entire rows). As this setting will be stored per-device you can decide to have full colored rows, e.g., on mobile and colored status only on desktop computers. Or colors everywhere or nowhere. Just as you like.

[dschaper]

The thing we have to be very careful of is red/green as the sole indicator. Red/Green colorblindness is a major accessibility issue.

[HenrysCat]

It's been Red/Green for a very long time.

[dschaper]

That doesn't make it any easier for accessibility.

[HenrysCat]

Add a flag, tick/Green - exclamation mark/Red

[DL6ER]

@HenrysCat I've been playing with this thought. The question is also where to put it. Should it have its own column? And moving the query type further to the back, as suggested by @dschaper, makes sense, too.

[dschaper]

Add a flag, tick/Green - exclamation mark/Red

Or the word "OK" in Green and "Blocked" in Red. Which is exactly what I proposed.

[Sassafras76]

changing the colorization to just two letters such a status of "OK" instead of the whole line (which is easier to see) should now at least also present the option for us to toggle colorizing the entire row or just the status

[Sassafras76]

question, you made this change for the query list, bit you left the Long term Data alone, this should be uniform across the application

[quinnciples]

Another thought - are all queries either allowed or blocked? If so, only applying a red color to the blocked items may make things cleaner. If it’s not red, then it wasn’t blocked.

[Lycidias93]

Please, i want more colours back :-(

[DL6ER]

@Lycidias93 #1893 is already merged and will be part of the next Pi-hole release.