Rethink the plural views (lists)

[dgrammatiko]

Steps to reproduce the issue

Many problems, here are some:

• Inconsistencies with the scrips (id=adminForm will only work safely, fail!)
• Toolbar, ehm a bit broken
• UI needs some touches for the smaller screens

Let's throw some ideas...

[andrepereiradasilva]

• Columns should be dynamic, ie, appear/disapear with screen width (according to their importance)
• Buttons should be dynamic, ie, appear/disapear with screen width (according to their importance)

So proposal:

1. Define a importance list of columns/buttons/information (ex: why do we need the author alias?).
2. Visualy the buttons can have a CSS to integrater them in a all in one or something, the columns would simple disappear.
3. Review all list views so, on resize from small to larger screen width it shows the columns/buttons according to their importance

my 2 cents

Just an example: Priority for buttons:

1. New
2. Edit
3. Publish/Unpublish
4. Feature/Unfeature
5. Archive/Trash
6. Check-in
7. Help/Options
8. Batch

Priority for columns:

1. Title
2. Status
3. Check
4. Language
5. Order
6. Category/Alias
7. Access
8. Date/author
9. Id
10. Hits/Votes/Rating

[brianteeman]

Third time lucky - perhaps?

Only display the toolbar buttons that can be used in the current state https://github.com/joomla/joomla-cms/pull/7592

On 15 November 2016 at 19:37, andrepereiradasilva notifications@github.com wrote:

1. Columns should be dynamic, ie, appear/disapear with screen width (according to their importance)
2. Buttons should be dynamic, ie, appear/disapear with screen width (according to their importance)

So proposal:

1. Define a importance list of columns/buttons/information (ex: why do we need the author alias?).
2. Visualy the buttons can have a CSS to integrater them in a all in one or something, the columns would simple disappear.
3. Review all list views so, on resize from small to larger it shows the columns/buttons according to their importance

my 2 cents

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/169#issuecomment-260743613, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8QUbJAqESP6-AAqFx6LPebbnDBvPks5q-gnogaJpZM4Ky7NC .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

[andrepereiradasilva]

i didn't know that PR, it would be good, but still they can't show all in mobile views.

[andrepereiradasilva]

another option for buttons would be: From larger to smaller screen widths reduce the buttons margin and paddings until when not possible to reduce more the text would be removed (at leaset for less significant buttons).

Or we could use a combination of this with the removal of non essencial buttons on smaller screen widths.

[brianteeman]

That was at least the second implementation of that PR - it was pretty much one person who kept blocking it and to be honest with you we have to move forward. If there is ever a chance to do something modern (ok gmail has done this for several years) then now is the time

On 15 November 2016 at 19:43, andrepereiradasilva notifications@github.com wrote:

i didn't now that PR, it would be good, but still they can't show all in mobile views.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/169#issuecomment-260745587, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8Vz2qErHaDKzv1MEeNYr93QpARVBks5q-gt7gaJpZM4Ky7NC .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

[dgrammatiko]

@brianteeman I was thinking about that script the other day with Phill's issue, and apparently now we have better tools (named scriptOptions) and this could be done way better. But let's collect some ideas first and then do the coding.

@andrepereiradasilva I'll agree. So let me take your thought a bit further: the columns that you named above are common for core but that's not necessary the case for 3rd PD. So how about beefing up search tools, multiselect and Jgrid and also mix in scriptOptions so we end up a universal, easy to tune, way of building plural view?

[brianteeman]

For me its not an alternative option it is something to be done together with the hiding

Also i like the idea of removing the icon on smaller screens - its purely cosmetic after all

On 15 November 2016 at 19:47, andrepereiradasilva notifications@github.com wrote:

another option for buttons would be: From larger to smaller screen widths reduce the buttons margin and paddings until when not possible to reduce more the text would be removed (at leaset for less significant buttons).

Or we could use a combination of this with the removal of non essencial buttons on smaller screen widths.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/169#issuecomment-260746584, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8WecFVzq1whBU3jcphQlXmWmUTaHks5q-gxWgaJpZM4Ky7NC .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

[andrepereiradasilva]

@dgt41 we already have some tools to remove show buttons in screen width in css hidden-xxxxxx visible-xxxxxx, anyone can apply them including 3º party (at least on core admin official template).

For style i always prefer a pure CSS alternative to JS.

i think in this matter it's important to separate content, style (css) and behaviours (js). This for me, is essencialy, a style issue, so CSS, as possible :smile:

[dgrammatiko]

Makes sense and I agree

[andrepereiradasilva]

i think we have [hidden/visible]-phone, [hidden/visible]-tablet, [hidden/visible]-desktop, which in todays possibility of screen sizes seems very limited, but we could add a lot more css classes if needed

[brianteeman]

@dgt41 not sure i care how it is coded I just really want to see it happen One other option I have seen recently is that when you are able to see new toolbar icons eg you have selected multiple items then the extra icons are displayed on a second row of the toolbar

On 15 November 2016 at 19:49, Dimitri Grammatikogianni < notifications@github.com> wrote:

@brianteeman https://github.com/brianteeman I was thinking about that script the other day with Phill's issue, and apparently now we have better tools (named scriptOptions) and this could be done way better. But let's collect some ideas first and then do the coding.

@andrepereiradasilva https://github.com/andrepereiradasilva I'll agree. So let me take your thought a bit further: the columns that you named above are common for core but that's not necessary the case for 3rd PD. So how about beefing up search tools, multiselect and Jgrid and also mix in scriptOptions so we end up a universal, easy to tune, way of building plural view?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/169#issuecomment-260747053, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8ZvbtqB0AlJha0kzvGDXbwdMw7LWks5q-gy2gaJpZM4Ky7NC .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

[C-Lodder]

If someone mentions that bloody toolbar being broken again, I swear to god...

I'll be fixing this!

As for the table columns, Elisa suggested in the design, using a cog icon, which opens a dropdown, allowing you to select the columns you wish to display. Of course the main ones such as "Name" or "Title" will be displayed by default.

[dgrammatiko]

@andrepereiradasilva good strategy to set our own specific breakpoints.

@brianteeman toolbar buttons also need a revamp of the inline script, remember the multiple items->edit problem?

@C-Lodder it's a hot topic lately 😄 Cog sounds promising

[ciar4n]

Toolbar, ehm a bit broken

The subhead has an absolute position which is unforgiving for any items wrapping to a second line. We could change this by moving it outside of the container-main. I know ideally we want this to never happen.

[ciar4n]

For the wrapping items issue an ideal solution (IMO) would be something like... https://www.youtube.com/watch?v=lrnMcOV_VxA

This examples uses CSS regions which has near 0 support so would need a polyfill. Unless of course the same can be achieved with JS?

[dgrammatiko]

@ciar4n what do you think of this: https://css-tricks.com/pure-css-horizontal-scrolling/ for the table columns?

[ciar4n]

@dgt41 So each table row can be horizontally scrolled?.. maybe an option for smaller screen touch devices.

[dgrammatiko]

@ciar4n yeah, I forgot to mention that 😄