dashboard UI guidelines

Permalink
I'm building a new package which I might release someday too.. It's about table/data management.

I clicked around the dashboard and found several ways how things are implemented in the core distribution:

How are functions/options displayed in the dashboard:
- scrapbook: view link in last column to show details
- users: first column clickable
- maintenance: remove as button, not link

I also found differente css classes like "header" or "subheader".

I found coding guidelines (http://www.concrete5.org/help/building_with_concrete5/developers/coding-style-guidelines/) but nothing similar about UI..?

Remo
 
andrew replied on at Permalink Reply
andrew
Yeah, while the overall look is pretty clear and consistent, there are some different CSS classes/approaches floating around.

1. Sortable lists.

With this in mind, I would definitely make sure to pull from the styles/classes in use on the dashboard file manager and the user list (the user list has been updated in svn. ) There is a ccm.search.css stylesheet that is included in the latest build in svn that is shared between the file manager and the user manager. Stuff like table column highlights, the caret for indicating which column is being sorted and in what direction, etc...

2. Editable forms.

Typically, we just use the "entry-form" class, with a combination of "header" and "subheader" that looks good.

3. Buttons

Unless it's going to be prohibitively difficult, we try and use the concrete5 buttons throughout when either working with "back" or "update" or "save" or "add." There is a helper function for generating these inside Loader::helper('concrete/interface');

4. Linking to a detail page.

This is kind of up to you. We have used both approaches, like you've mentioned - and to be honest, are probably moving away from having a button link to a detail page. Instead, just have the title of your data object link to it. Buttons are more for update/saving.

Hope this helps!
Remo replied on at Permalink Reply
Remo
this is just what I was looking for!