Suite P - too much whitespace. More compact theme needed

[pgorod]

This has been mentioned before, but after waiting a few months and listening to users in forums, it is becoming obvious that we will surely want to have some sort of solution... and so I'm starting this issue.

This thread is just an example of such user feedback, there are others, both on the forums and here in Github:
https://suitecrm.com/forum/suite-themes/10830-suite-p-theme-too-much-whitespace-need-more-compact-theme

Basically the situation is:

• some users are ok with the current SuiteP theme spacing
• another group (of considerable dimension) finds it excessively spaced, and is keeping away from the theme in order to preserve their user experience and functionality (not just aesthetics!).

What went wrong?

• there seemed to be a design emphasis on mobile-use. Spacing is for fat fingers of users who will have to pan and scroll a lot anyway. However, SuiteCRM is most used (and for longer periods) on desktops.
• there seemed to be a design emphasis on clarity and discovery of elements and actions in the UI, however SuiteCRM is mostly used for heavily repeated tasks and users familiarized with the UI. It's more important to avoid an unnecessary scroll to read some field than to make some action button more visible.
• there was insufficient design emphasis on the value of compactness and information density. This is not the absolute value, but it is one value to be taken into account in design decisions. And it is probably of quite a high priority for a CRM.

Supposing we do want a solution, the first alternative we could consider would be this:

1. We keep SuiteP as it is, but keep the old SuiteR for those users (but the problem right now is that SuiteR doesn't seem to be maintained, I'm seeing SuiteR issues being closed without fixes...)
2. We improve SuiteP to be a less-spaced, single-mode theme (the same for every one)
3. We improve SuiteP to be a configurable theme. It could be a double-mode theme where some users select large spacing and others select less spacing. Or it could select automatically based on view-port size. Or it could let us go into the Theme options and specify numbers for margins and spacing.

How we should test the new design:

By comparing it, side-by-side, with SuiteR, for common laptop and desktop viewport sizes. For example, if we notice the changes in spacing make the favorites go off-screen in the left-hand menu, we pause and think how that will affect usability. The same goes for detail views, etc.

[Mausino]

@pgorod i totally agree, the look is great but just too hard to use as you spend too much time scrolling & find something on detailview or everything is mega big 🎯 we first used 90% or 75% screen size in browser (this is reason why we went from the SuiteP and still using the SuiteR = compact & tabular)

[murdal]

Thank you for your Feedback! We are currently addressing spacing issues in our next release and hope to refine further with more feedback.

[horus68]

This is a relevant issue indeed.
It also seems to only work on Firefox without major bugs!

[pgorod]

@ijdavie is Sales Agility opting for number 2 as outlined above? Or will the previous theme SuiteR still be supported, even if only for bug fixes and very simple improvements?

[KhyberPass]

Totally agree. As an example when viewing the Accounts listing. On my laptop screen with Suite 7 theme I can see 16 accounts listed (6 with advance search), with the Suite R theme I can see 7 accounts (2 with advanced search open), and with the Suite P theme I can see zero. Business’s use a CRM to view their customer data - not pretty layouts, however if done properly the two exist together.

Suite P has 100% of the screen taken up with menu headers, blank space, search boxes and table headers. Suite 7 has about 30%.

Suite P is a nice show pony but is limited in the real world. Have you taken a look at the layout of your father SugarCrm or cousin SalesForce lately?

[pgorod]

Urdhva Tech, makers of the TagMe add-on and long-time SugarCRM devs, say

With so many of our customers and leads asking for some correction to the SuiteCRM's new theme SuiteP. We are so excited to share the fine tuned look of SuiteP. We got many request from our customers about the Large textbox, textareas and empty spaces which eats the major screen space on laptops and smaller devices.

Here is their proposal, with downloadable code, for the tighter look. It was received with enthusiasm by many.

And just to add some motivation, another person on the forums says

it is in fact the theme that has stopped us moving from Sugar.

@murdal, do we have an estimate of when that fix you were working on could be ready? Does the code linked above help? It seems @urdhvatech is willing to contribute it, but it would be nice to get some guidance from SalesAgility before asking him to spend time putting up a PR. Thanks!

[urdhvatech]

Thanks @pgorod for creating the thread for people with a common goal. As we said we are willing to contribute the changes, but we have never heard back from SalesAgility in our early emails. Infact we have lots more to contribute and have many ideas that can be implemented. But ultimately it can happen when @salesagility replies.

[urdhvatech]

Improved theme now supports version 7.7.7 You may check our blog

[pgorod]

I realise more answers from SalesAgility people would be very helpful but I also understand their position, there is just too much traffic here and on the forums for them to keep up. If they become too responsive, they can't serve their own customers (remember that's their model: make money with customers to provide us with the free stuff, meanwhile the improvement of the free stuff drives their customer acquisition). You could easily turn the entire SA staff into a team that provides free consultancy and technical support for thousands of users, and there would still be demand for more of those services. However it would kill both the company and SuiteCRM.

On a more practical level, I don't believe many, if any, SalesAgility folks are currently receiving email notifications from Github (including the @ mentions). So sometimes what seems like them ignoring us on purpose is not really that, they're just not following all of these threads.

@urdhvatech if you make some Pull Requests with valuable contributions they will surely engage with you. You have the necessary skills, and they know how to tell the difference between a valuable contributor and us clueless annoying forum lurkers... : - )

[daniel-samson]

I agree @pgorod with some of the things you said.

Can I just say, we appreciate all the feedback. It helps us decide on what to focus on, what to prioritise, and what needs fixed.

We now have a resource to validate the issues and prioritise them, A community manager who overseas everything, and dedicated resources for the SuiteCRM product development itself (I am one of them).

WE ARE NOT IGNORING ANYONE ON PURPOSE. We are simply concentrating on the work we are currently developing. We do have notification emails. There are a lot of them! When an opportunity arises that is related to an issue, we will try and include a fix for them. Watch this space. We are going to do more community driven stuff in the future. Look at the pull request section for proof.

Also,
I have been working on a solution for SuiteP that will help allow users configure SuiteP they way they like it. However this will not be included in SuiteCRM for a while. We are making incremental changes to SuiteP and SuiteCRM. We are making lots of little architectural changes from changes which give developers more control over the way things look to upgrading the framework to support features like PHP 7, mySQL 5.6. All of this while keeping everything upgrade safe.

If anyone is able to contribute code. Please read the wiki and make your pull request into hotfix.

[horus68]

@daniel-samson thanks for your work.
You can improve the workflow on user contributions if there is a way to make community users involved with testing PR so the PR also get validated and prioritized.
There are too many PR around without tests and nobody knows if they can be used / tested / if they are considered to be in the right direction from the core devs or if they are completely out of focus, and so on.
PR area is a lonely man zone when it should be a "Top devs community" zone
Same goes on what needs to be fixed (not just features): there is no public plan ahead from core, as in "Those are the things we need to fix soon, can you help us").
See my idea detailed here: https://suitecrm.com/forum/feedback/11159-merging-pr-party

[urdhvatech]

Hello All,
Here is the pull request #2670

[pgorod]

From what I gathered in all the discussions about this Theme, some people actually like it the way it is, while many others find it literally unusable. I fear that SalesAgility will hesitate to pull in these changes because they are not consensual.

In my initial text in this Issue I made an effort to systematize our available approaches into 3 alternatives. Maybe now is a good moment to discuss them (or to hear from @salesagility about this).

[murdal]

Hi everyone!

We are currently working on a control panel to allow users to configure the theme. This will be similar to the colour picker for SuiteR but will also give the ability for system admins to configure the padding value so hopefully everyone wins.

[horus68]

@murdal great! Hope it comes with some presets (original or Large / medium / Tiny / Personal "based on...")
This way you can include the @urdhvatech configuration as a setting and we don't need to test all the settings!
Also include some colors variations so its easy to change!

[daniel-samson]

Just a quick update:

I have added sass support into SuiteP. This offers the ability to change the colors and sizes by editing variables.scss file and compiling style.scss.

See the following for details:
https://github.com/salesagility/SuiteCRM/blob/feature/suitep/themes/SuiteP/css/variables.scss

You can compile using the following commands in your SuiteCRM instance:

composer install
./vendor/bin/pscss -f compressed themes/SuiteP/css/style.scss >  themes/SuiteP/css/style.css

Reference: #2740

[horus68]

@daniel-samson your PR is not merged yet and has conflicts #2740

(I know... there are too many PR waiting to be merged so more chances for conflicts)

[daniel-samson]

@horus68 I know that's due the amount of changes there are.

[horus68]

I hope that in the near future we can see a PR merge backlog to be reduced so all those fixes can be implemented and its easy to get new collaborations. Now there are too many PR to get new work done and avoid collisions.

[daniel-samson]

Update: The new Sass changes have been merged and it looks like it will be in the next release. However there isn't a graphical way to change these settings.

[pgorod]

@daniel-samson it's a pity there's no UI for settings yet, but all in all this is cause for celebration and the fact that the use of SASS is a step forward technologically is great.

I just found a PHP based SCSS compiler (instead of Ruby based SASS), you might want to try since it could integrate better with SuiteCRM's workflows.
http://stephencoakley.com/2014/05/22/using-sass-in-php-projects

Just a final thing: did you remember to take a look at the selector popup screens? I mean the ones where you click an arrow to select an Account, or a Contact, and a window pops-up where you can search. These are especially ugly and badly designed screens in SuiteCRM, and in SuiteP they are even worse. One of the problems is vertical space inside the list boxes. I just wanted to make sure that is included in your fixes, since they are easy to overlook.

I haven't tested your code, or seen the results, but anyway Congratulations and thanks! (in advance).

[daniel-samson]

@pgorod The PHP Scss Compiler has been included in the composer file. You can run composer update on the my feature/suitep branch. I haven't change the popup screens. However @gymad changes to the filter search may fix that. We will only accept SuiteP changes which have been compiled using th PHP Compiler. As this will ensure that the repository size is kept to a minimum.

You can change the variables.scss to configure the SuiteP theme. I have a conceptual idea for UI element. It's on different project called sass-bootstrap-theme

[pgorod]

Has anyone managed to get a satisfactory more compact SuiteP theme by editing the SASS variables file and then compiling?

I tried it, and the process works fine, but the results aren't very good for my taste. It takes some tweaking to really change everything required for a more compact theme. And I'm pretty terrible at this sort of thing. I was wondering if anybody would want to share their variables file?

[chris001]

@pgorod If you edit the file to reduce the values with -spacing, -padding and -space in the variable name, and see how this works..

[pgorod]

I tried it and it looks very uneven, some things smaller, others not. I guess this takes some work, which is normal with CSS stuff. I just know from experience that I'm not the right guy to do it, my knowledge of CSS is scarce (because I avoid it whenever I can!).

I was just hoping that somebody had already done this work, somebody more skilled in CSS, and could share it. (Knowing that SuiteR is going to be deprecated just threw me into a depression.)

[pgorod]

Ok, I tried working on this again this afternoon and I don't think it's possible to make a compact theme from SuiteP using only the current compiled SASS variables. There are just too many things that have excessive height, or padding, or spacing, and they are not all contemplated in the variables.

I'd say we are halfway in achieving our objective. I suppose we can continue to perfect the Theme to make more aspects of it configurable through SASS.

I propose a "challenge" of sorts, a simple criterion to set the moment of deprecation of SuiteR: when it becomes possible to tweak SuiteP (from a UI or from SASS variables) in order to get equal values to SuiteR on:

• amount of visible recents/favorites listed on the side bar
• amount of visible dashlet items on home screen
• amount of visible lines on a list view
• amount of visible fields on a detail view
• height of navigation top menu
• height of buttons
• visible time slots in the calendar

This is not a rant, I really am looking for a way forward and I am deeply appreciative and thankful of all efforts done until now. We are almost there... but I fear, not quite yet.

[samus-aran]

Suite P - too much whitespace. More compact theme needed

[samus-aran]

We have now set up a new home for suggestions at Trello. All github issues that were labeled 'suggestion' have been moved and will be closed. Certain ones will be progressed within the new Suggestion Box and may be re-opened.

Announcement of moving Suggestions:
https://suitecrm.com/forum/suggestion-box/13691-moving-suggestions-from-github-to

New SuiteCRM Suggestion Box
https://trello.com/b/Ht7LbMqw/suitecrm-suggestion-box

[chris001]

This is another one, half defect half suggestion.