Suitecrm: SuiteP theme responsive bugs in top menu and content area

[chris001]

There are some serious bugs in how the SuiteP theme fails to respond properly to varying browser screen sizes resolutions, these bugs make some buttons on certain screens unusable due to improper wrapping of certain parts of the user interface, when they shouldn't ever wrap to the next line but instead auto resize in a sensible way so that they are still usable.

Issue

The SuiteP theme is supposed to be responsive but it fails in certain corner cases. It needs to respond to all corner cases, without allowing bugs in the theme to let html elements overlay one another in unplanned ways, thereby blocking user access to click or tap on buttons/links on the web interface.

Here's a screenshot with highlights on the problem areas.

Expected Behavior

1. The top menu should calculate the available width of the screen, then calculate how many pixels between each menu item would be available for spacing, and if necessary, reduce the spacing between the letters inside each word, or reduce the font size slightly, in order to fit the text on a line, up to a point, beyond which, it would be OK to collapse the top menu into a "triple horizontal line" icon, at the top left corner of the page.
2. The two columns in the main content area (inside view, and the Twitter connector) should auto size to share the width of the content area, at 50% each.

Actual Behavior

1. Top menu wraps to the next line, overlays the top area of the sidebar menu, rendering both the the "collapse this menu" icon, and the topmost items in the sidebar menu, inaccessible.
2. The two columns in the main content area , take up way more horizontal space than allowed by the rules of responsive html theme page layout, causing most of the right hand side item to be out of view of the user, which results in a poor user experience.
3. Way too much spacing and padding, between various user interface elements, which wastes screen real estate, causing overflow horizontally, when probably there would be no horizontal overflow, if the amount of spacing and padding would be calculated by the theme to space and pad only as much as possible before causing a horizontal overflow - this is the main idea of a Responsive theme!!

Possible Fix

1. Revisit the algorithm for making this theme responsive and determine what is wrong with the algorithm and fix it. Clearly, either CSS or javascript needs to calculate, in the moment, the dimensions of various key user interface elements such as font sizes spacing padding widths of sidebar menu width of content area elements etc, in order to achieve and maintain a proper responsive theme html layout.
2. Consider refining the use of Jquery and Bootstrap to accomplish this.
3. Consider adding Backbone.JS and Underscore.JS which have probably already solved this.

Steps to Reproduce

1. Install Firefox add-on "Tree Style Tab" for sidebar of tabs, inside firefox. Probably not necessary but install it anyway to exactly reproduce the same browser conditions.
2. Login to suitecrm instance.
3. Login to twitter connector on home page.
4. In the admin screen, add several menus to the top menu, Maps, Events, all the AOS Sales stuff, all the Security Groups.
5. You should observe a crippling of your web user interface due to wrapped menus which really should self-resize to fit, or shrink down into a single-icon "hamburger" menu in the top left corner.
6. You'll also observe an extreme amount of spillover of content area text to the right, generating a horizontal scroll bar which makes the theme fail the responsive test.

Context

Working with SuiteCRM in the SuiteP is far more difficult than would be with a fully responsive theme, on mobile, tablet and desktop.

Your Environment

• SuiteCRM Version used: 7.8.1 latest.
• Browser name and version (e.g. Chrome Version 51.0.2704.63 (64-bit)): Firefox latest.
• Environment name and version (e.g. MySQL, PHP 7): MySQL 5.6 latest, PHP 5.6 latest.
• Operating System and version (e.g Ubuntu 16.04): Debian 8 latest.

[Mausino]

@chris001 #3025 i found this.. maybe it solves a part of your problem

[chris001]

Thanks @Mausino that PR #3025 solves a a part of the problem, that PR could be improved to degrade to one hamburger menu plus one nav menu filter for the current module. The rest of this issue would be solved with more accurate dynamic calculation of the appropriate responsive size of each element, spacing, and padding in the page, in the moment, to prevent page content spilling over beyond the screen page width and breaking responsiveness with the horizontal scroll bars.

[chris001]

Spoke too soon. It only works on a few lucky menus where the calculation works in spite itself. On about 95% of the menus, PR #3025 miscalculates the space it has for the navigation menu, causes the navigation menu to wrap to the next line, overly other links, and make them impossible to access.

The code fails to account for the width of the "module filter menu" which is the name I give to the red colored menu added to the navigation menu, just to the right of the "Home" icon, and this "module filter menu" only appears, and takes up some of the top navigation menu space, when you're inside a module. Example, "Security Groups Management" module has its own menu

The reason is, that "module filter menu" is added by the theme, AFTER the ajax request completes. So this PR is lacking the information on the true full width of the navigation menu INCLUDING the late addition of the "module filter menu".

[chris001]

I read the source for the SuiteP theme. The problem is, it's not fully following the rules of responsive web design, so issues like this one.

• The top menu and bottom footer respond to device width, yet with the navigation menu wrapping bug, and the horizontal scroll bar bug. Would be solved by applying full RWD to SuiteP.
• The center content area is still breaking RWD by running a for loop in Smarty PHP, and generating tables when they shouldn't, tables are mistakenly assuming you're on a desktop monitor, by laying out the dashlets always two TDs wide. See this bug for yourself - resize your browser so the client width is 520 pixels for example. The dashlets are flowing off the right edge out of sight - bug. On a client width now wide enough to show two dashlets, they should be stacking vertically down the page instead. Basic RWD!

There should be no Smarty PHP for-loop for generating the tables - that was the thing to do back in 2004 when sugarcrm first came out. The dashlets layout position on the page now in 2017 should be decided by the browser, which as we know, look to the CSS3, bootstrap, media queries, makes fast native math calculations, and places them natively in rows, or one below the other in narrow width screens, this is true responsive web design.

[samus-aran]

Thanks for your observations chris and you are right tables shouldn't be used as heavily as they do but there are too many areas of the SuiteCRM instance that use them and would require a larger overall and working on all themes (can't have tables in one theme and not in another). We are aware of the limitations of tables, and we have already begun replacing them with more responsive elements - and this will continue in future releases.

[chris001]

I've got some recommendations. This should be discussed. Will make a new issue.

[chris001]

At least, SuiteP Home page template needs to be updated to completely apply responsive css html to the dashlet layout. They're spilling over the right limit of the page when they should wrap so they stay on the page within the width limit.