Suitecrm: SuiteP - show full menu with lower widths, as much as possible

[pgorod]

Issue

While there are still many things to fix in the new theme, this one (which I had mentioned in an earlier comment on another issue) is more of a functional problem (not just aesthetics). This affects the theme's usability with some severity.

The responsive-design top menu is collapsing into its compact form (showing the "hamburguer Menu" instead of each menu option) way too soon, in terms of screen width.

Anything below 1130px collapses to "mobile" mode. Anybody with smaller screens, or who isn't working with a maximized browser window (these people are a large demographic, that always gets forgotten by designers...), will get the condensed menu.

Expected Behavior

I believe window widths of at least 1024 pixels should be guaranteed to get the full menu, and I would say even below that (basically, keep the full menu in as small a window as possible). Remember not everybody maximizes their windows on desktops.

Actual Behavior

Top menu collapses to "hamburger" menu below 1130px widths.

Possible Fix

• drop that padding: 0 10px 0 10px; from li.topnav at resolutions below 1130
• perhaps adjust other paddings and widths that might help fit the entire menu at those resolutions
• finally, adjust the width that triggers the top menu collapsing

Steps to Reproduce

1. Use SuiteCRM 7.7 with SuiteP theme
2. Go to any page and start playing with the browser window width to see the effect on the top menu.

Context

Your Environment

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

[samus-aran]

Hi everyone, just to keep you updated we are in discussions about your feedback and working with our designer to create a happy medium for everyone. :+1:

[horus68]

7.8.2 confirmed - using demo with Firefox on windows @samus-aran
1074 pixels wide:

1078px and a bug

1079 px is OK (wit room for improvements, see the space from ALL menu to Create button)

[chris001]

@daniel-samson If you'd like I could share here some ideas to fix this type of bug permanently, in the form of CSS, and a couple of real live demo sites, (a different PHP business management application not Sugar or SuiteCRM), demonstrating a theme with very good handling of adapting the display of the menu and all elements of the web user interface for all screen widths from the narrowest smartphone, 240px and every size along the way to the widest desktop screen.

[daniel-samson]

@chris001 i am always happy to receive solutions to solve an issue.

I am having trouble replicating the issues some community members are having.

@horus68 it should be impossible for you to see the toolbars at 1079px. I looks to me like a browser caching issue. Please can you clear your browser cache and retest it. Do you still have the same issue?

[daniel-samson]

@horus68 in firefox what value is your zoom set to?

[horus68]

@daniel-samson Sorry, my bad, my Firefox was zoomed out so the errors on pixel size!
Now they all 1200 px to work with menus
Edge and Opera Neon, Firefox, Chrome, Safari (1220 px) and Opera 43 (1208 px)
Even so 1200px minimum size is a lot of screen size required just to have menus!

[daniel-samson]

@horus68 Well, I have managed to replicate the issue when you zoom in.

The issue is because Firefox doesn't seem to respect the @media queries when you zoom in. I have been working on a fix that will cause the mobile view to display when a user zooms in.

You mentioned the issue about not being able to see the menus. Is this the real issue?

Can I ask what is your screen resolution? Are you simply testing different resolutions? Or is this an issue you are experiencing on a particular device?

[horus68]

@daniel-samson I have a system with 2 monitors (1920x1080 and 1680x1050)
I was talking on the size of screen required before the menus collapse to the hamburger menu. Usually I work with several windows, not in maximized window size.

Why not think the other way around: normal display (well 990 px) would have 2 lines (one for menus and the other bellow for the create and search field)

Only if there was more space available then the bellow line would go to the right? The line bellow would look similar the way 784px resolutions look like now (light grey)

[chris001]

@daniel-samson

1. http://colintoh.com/blog/display-table-anti-hero
   CSS solution for the home page dashlets responsive layout problem, everywhere the html was carried over from the legacy sugarcrm 6 theme, using legacy html tables which make assumptions about minimum desktop sized screen widths, 72dpi pixel density, and horizontal scrolling.
2. https://www.w3schools.com/css/css_rwd_templates.asp
   The "Social Media", "Analytics", and "Mail" templates.
   Using em for specifying absolute widths, instead of px, because most mobile devices have extremely high approximately 300 pixels per inch, or 120 px per centimeter. Use of the em for specifying fixed element widths solves this, it's proportionately size ranged to human visually readable text size, the letter m.
   The entire w3schools CSS3 tutorial, and the entire CSS Responsive ("CSS RWD") tutorial.
3. Demo app 1: http://luigiverzi.it/demo/fixbook/login
4. Demo app 2: http://www.perfexcrm/demo/authentication
   Demo app 2 portal: http://www.perfexcrm/demo/clients

Feel free to borrow any or all of the CSS code from the 3 w3schools templates and the 2 demo apps.

[chris001]

@daniel-samson

• Additional reading on Backbone for php web application data visualisation (graphs etc)
  https://aaltodoc.aalto.fi/bitstream/handle/123456789/23385/master_Kachwala_Taha_2016.pdf?sequence=1
• The referenced github "backbone dashboard" application: https://github.com/CodeTaha/backbone-dashboard
• A good reference list of the best current front end "full stack" tech.
  https://github.com/rajeshwarpatlolla/fullstack-webstuff

[chris001]

@daniel-samson

• A great starting point sample working code for building a theme template with php mysql backbone.js and underscore.js https://medium.com/@scottdixon/backbone-js-with-php-mysql-362b07dad844#.gvn87atuf
  https://github.com/scottdixon/php-mysql-backbone-todo-list

[pgorod]

I think this old issue of mine isn't serving any purpose right now, so I'm closing it.

I believe the situation has already improved since this time.