Tweak "Web Interface - API" settings page

rdwebdesign commented 1 month ago

What does this PR aim to accomplish?

Currently the temperature options are inside the "Advanced Settings" box.

Also, when you toggle between "Basic" and "Expert" views, "Expert" boxes appears before the "Basic" ones, causing a layout shift or jump.

How does this PR accomplish the above?

Move temperature options to the Theme box, as they are not advanced options;
Use full width for "Exclusions" box;
Reorder the boxes to minimize layout shift.

web_settings

Link documentation PRs if any are needed to support this PR:

none

By submitting this pull request, I confirm the following:

I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
I have commented my proposed changes within the code and I have tested my changes.
I am willing to help maintain this change if there are issues with it later.
It is compatible with the EUPL 1.2 license
I have squashed any insignificant commits. (git rebase)
I have checked that another pull request for this purpose does not exist.
I have considered, and confirmed that this submission will be valuable to others.
I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
I give this submission freely, and claim no ownership to its content.

[x] I have read the above and my PR is ready for review. Check this box to confirm

PromoFaux commented 1 month ago

This might just be my taste, but the gap under the first box when toggling to expert settings looks a bit... off. However it is a marked improvement on the current layout shift that happens when toggling currently...

rdwebdesign commented 1 month ago

Without my changes the issue is the same (but it's on the right side):

This happens because the theme uses floated boxes (Boostrap 3). When 2 floated boxes have different heights (almost every time) you will see this "gap".

Look at the DHCP page (not touched on this PR). There is a lot bigger gap.

pi-hole / web