Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign checkboxes and info tooltips #231

Open
wants to merge 1 commit into
base: Coscolin-development-sanity-web
Choose a base branch
from

Conversation

Coscolin
Copy link
Contributor

I know is a massive redesign, but I hope you like it.

Also I know is pending to create color variables for checkbox-wrapper-1 class.

@melkati melkati added the enhancement New feature or request label Jun 11, 2024
@melkati melkati added this to the improve-web-pages milestone Jun 11, 2024
@melkati
Copy link
Owner

melkati commented Jun 11, 2024

Here is my feedback on your pull request:

  1. Checkbox Design: I appreciate the design changes for the checkboxes. The visual improvement is noticeable, even though it involves a substantial amount of CSS.

  2. Tooltip Icon Position: I don't agree with the tooltip icon being on the left. This positioning disrupts the direct readability of the label, which is the key information users need first. Typically, users' attention is on the right side where the inputs are, and placing the icon on the left forces a quick and awkward movement across the screen to find the tooltip. This is supported by design guidelines from Google Material Design, which suggest placing tooltip icons near the elements they describe to avoid disrupting the user's focus and ensure easy accessibility.

  3. Tooltip Width: While a slightly wider tooltip can be a matter of personal preference, the current width is excessive. Very wide tooltips can be hard to read and scan, as users need to move their eyes across a larger horizontal space. Material Design guidelines recommend keeping tooltips concise and ensuring they don't span too wide to maintain readability.

Please note that there is another form (although it is not in the same branch). If you change one, you need to change them all: Link to other form.

Ensure you send the changes based on the latest version of the code. This PR is made on outdated code (yes, I know it changes often...).

For further reading and more detailed guidelines, you can refer to the official Google Material Design guidelines on tooltips.

References:

@Coscolin
Copy link
Contributor Author

Coscolin commented Jun 11, 2024

Here is my feedback on your feedback:

  1. Checkbox Design: I like that you like it. It's a lot of CSS code but it worth it. If do you want you can looking for another checkboxes design more smaller in CSS code inside https://getcssscan.com/css-checkboxes-examples web page. I like design number 8 (by Mauricio Allende) for some checkboxes like WiFi / BLE / MQTT / ESP32NOW options, but I understand that we can increase CSS size unlimited.

  2. Tooltip Icon Position: Adding this to .tooltip-icon class you can move to right easly without changing nothing in preferences.html:
    .tooltip-icon { position: absolute; right: -25px; top: 0; cursor: pointer; margin-top: -5px; padding: 5px 10px;}

  3. Tooltip widh: I agree with you, but previous widh was too much small. Maybe you can try with:
    .tooltip-text { visibility: hidden; width: 50%; top: calc(100% + 2px); right: -25px; border-radius: 10px 0 10px 10px; ....

  4. Another forms: you are right, but at 4am my eyes not see too much...

  5. outdated code: I am sorry, but it's impossible to me follow your code speed. I thought this branch is the latest version related to CSS/HTML .

I have another suggestion: I think initial "Connection" checkboxes it coud be ommited and added in fieldset/legend sections.
When you active WiFi checkbox in legend field, wifi options is shown just down.
Now, when you check MQTT or ESP32NOW options you don't see that related options are displayed.

I only try to contribute to this huge project. Take all you like when you want.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants