The new UI is worse than the old one

Hi
First of all sorry for the inconvenience that you faced with the new UI.
As you mentioned it is hard to navigate the options, could you please explain a little bit more about the complexity?
Your feedback is most valuable to improve the user interface of the plugin.
Thanks

Hi,
Thanks for writing back. I am a longtime user of the plugin and greatly appreciate it. My concerns with the new UI are:

– Vertical instead of horizontal tabs. All sub-settings in WordPress plugins are arranged in horizontal tabs. This is true for WooCommerce, and Breeze also used this layout. The vertical tabs are an issue on smaller screens as the tabs can be out of view. Hence a lot of scrolling up and down is needed which becomes disorienting when switching tabs.

– White space. The white space in the new UI seems very excessive. I now need to scroll to view the settings under each vertical tab. Even though Basic Options tab only has 7 headings and 13 total options, I need to scroll two full pages to see them all. Given that they are settings, having them all visible is more useful to be able to glance over the current settings without needing to scroll up and down excessively. The UI is not suitable for a settings page because of the white space. If it was reduced it would be much better. Please note I am on a 1366×768 screen.

These are my gripes. In summary, too much white space, too much scrolling. It makes navigating difficult on a smaller screen. A settings UI would benefit from more density to allow glancing at the settings without scrolling. If the UI was denser even the vertical tabs would be more tolerable, although horizontal layout would better match the rest of WordPress.

Thanks for a really great plugin otherwise!!!

@adeelkhan My main issue is that the toggle buttons are not clear about which is active. This is due to the white button of the toggle is “above” the background color (because of the border over the whole toggle). It makes it seem like the white part is the active button you are sliding across the colored background. So it makes it seem like the opposite state is actually selected.

Here is the CSS I wrote to fix the problem:

/* Breeze */
.on-off-checkbox input.br-box + label > .status-switch,
.on-off-checkbox input.br-box + label > .status-switch:before,
.on-off-checkbox input.br-box + label > .status-switch:after,
.on-off-checkbox input.br-box:checked + label > .status-switch:after{
  border-radius: 0;
}
.on-off-checkbox input.br-box:checked + label > .status-switch:after,
.on-off-checkbox input.br-box + label > .status-switch:after{
  border: solid 2px darkgray;
  color: darkgray;
}
.on-off-checkbox input.br-box + label > .status-switch:after{
  right: -5px;
  color: darkgray;
}
.on-off-checkbox input.br-box:checked + label > .status-switch {
    background-color: white;
}
.on-off-checkbox input.br-box:checked + label > .status-switch:before{
  left: 55%;
}
.on-off-checkbox input.br-box + label > .status-switch {
    background-color: white;
}

Thanks for your feedback. We will resolve it ASAP.

UI has been updated.
Please download the latest version.

Much better ????