[RFC] Refactoring the layout

[rande]

Hello,

Here a test for a new organisation layout:

Any comments ?

Changes:

• main admin access on the left side (before it was on top)
• add your change here ...

[pulzarraider]

:+1: I like it, but It will be nice if it the position of menu will be easily configurable (top/left) and previous style of menu will be still available (to not confuse users of of already created projects).

[EmmanuelVella]

Personally I would prefer the previous version because :

• A lot of space is lost (many menu items where in submenus)
• We'll need to scroll if there a too many menu items
• It will be difficult to have a custom side menu

However if this structure is finally kept, maybe it will be interesting to use a sliding panel : http://jakiestfu.github.io/Snap.js/demo/apps/default.html

[toooni]

i think with the navigation on the left side and the filter on the right side, there is not much space for the list, even on bigger screens... for me, i do like as much information as possible in lists and overviews.. maybe a solution for the filter like this can be an option: http://rails-admin-tb.herokuapp.com/admin/ball

[dantleech]

I think having an option to choose which layout to use - vertical navigation or horizontal - would be great. The benefit of the vertical navigation is that you can "run out of space" horizontally. Maybe it could be as simple as specifying a twig template to use for the layout?

In the vertical list maybe we can put the filter at the top of the list and auto hide it? i.e. "Filters [ > ]" ?

[rodrigodiez]

Left navigation seems to be much better when traversing the model being a common task (eg: e-commerce plattforms). It shows more clearly the admin structure to the user wich needs no extra clicks to use it. But I think this need to be configurable between top and left navigation in order to not exclude any kind of use.

How about the sidemenu of an admin? How it works with this left navigation?

[rande]

Just to add a bit more information, the layout refactoring will use bootstrap3 so this will be a major BC break as some classes are not BC between bootstrap3 and bootstrap2. Also another user starts to port some layout to bootstrap3 (https://github.com/sonata-project/SonataAdminBundle/issues/1725).

At the last CMF meetup in Zurich an user also show some nice mockup for an admin interface, maybe we can have feedback from the CMF project (@dbu, @lsmith77).

@rodrigodiez for the admin side menu, I want to merge it with the top actions and add a short description of the current edited object. It will be great if we can have a fix ribbon on the top with the main actions for the current object.

[lsmith77]

@rande do you mean https://github.com/massiveart/sulu-docs that @chirimoya mentioned?

[rande]

@lsmith77 can't remember, it was the one with the left side action menu with folded actions

[lsmith77]

yup that is the one .. they have a working prototype now https://github.com/massiveart/sulu/tree/develop I will join them for one day for their two day hackday starting on Sunday.

[dbu]

yes, that was @chirimoya who showed his mockup of an administration menu. no idea if sulu is now a working prototype or bundle outside sonata - there are no screenshots or description in the readme.

[chirimoya]

We are currently building a separate frontend admin framework for our sulu project. It's under heavy development but maybe you can get some inspiration. http://massiveart.github.io/husky/ (built on top of aurajs)

[sensi]

I've already implement the new bootstrap3 layout into my new sonata admin project. That was quite easy because there only some replacements to do. See upgrading from twbs2 to twbs3 on this site: http://bootply.com/bootstrap-3-migration-guide

Some of the biggest issues are the modals and navigation.

1. Modals: The modals now are using jquery ui. At the moment it seems it is to much or to complicated... But I can live with that issue because the style can be customized to fit the other side design.
2. Navigation & Sidemenu: That was tricky to get this running as expected. With an standard bootstrap theme that is not as tricky as you use a customized on with a lot of other stuff in it. The issue is that the knpmenu has some missing function to render "complex" sidebars like this: http://stackoverflow.com/questions/19314957/how-to-i-get-following-menu-structure-with-knp-menu-bundle. So a main thing should be the menu generation. It seems it make sense to extend the knpmenu functionality to fit the sonata admin workflow (as we need it). So we have a clean way to generate sidebars, navbars (header menus) drop downs from a given tree array.

The sidemenu I've implement also into the left navigation. But that can be a fail if you have a large product category tree. So I'm going to move that into my breadcrumb bar as drop down similar as the current navbar. That save space and I think it is nice to use.

I think it's a great idea the make the layout selectable/configable if it is vertical or horizontal. I use currently the following commerce bootstrap extension: http://192.69.216.111/themes/preview/ace/ I think it is well done and easy to work with it. So we can take some ideas from there.

1. Icons: Last but not least the icons. I've implement for each dashboard group name a simple icon option. There it is possible to set an icon css class which get included. That is necessary to get a unique icon as identifier if you have minimized the navigation.

[kudlatyamroth]

configurable position of filters? top and right?

[Bladrak]

Some additions have been made those last months, noticeably regarding the integration of KnpMenu (and Bootstrap3). You now have a BlockService in SonataBlockBundle to render a KnpMenu and several examples of this service being overridden to answer specific needs such as side-navigation (see https://github.com/sonata-project/ecommerce/blob/develop/src/Sonata/ProductBundle/Block/CategoriesMenuBlockService.php for instance).

Maybe you can integrate some of that @sensi ?

[zhil]

It would be great to have dynamic filters, like in ORO CRM http://www.orocrm.com/wp-content/uploads/2013/04/Grid-867x758.png

As for the menu location - I prefer top location (old version), configuration option is must have IMHO.

[maguramarkian]

I prefer configurable position for every type of Admin class

[rande]

like this one: http://startbootstrap.com/templates/sb-admin-v2

[gagarine]

I oppened the #1886 but I was tell to move the discution in this issues:

We should remove all modals/lightbox. Modals are very disturbing, they mainly don't work on mobile.

It's possible to not use modal for admin. We should really check out the drupal 8 UX.

The only place where lightbox are perhaps useful is to select related entity (like media). But still I think better solution can be found.

[zhil]

@gagarine I would vote for configurable option for modals usage\lightbox - per admin or as option in form builder

[Bladrak]

@gagarine is your main issue with modals the fact they don't currently work properly on mobile? In that case, this should be solved by Bootstrap3, as it's mobile-first oriented.

[rande]

@gagarine What should be the alternative to modal ?

[ima-tech]

That one is clearly the prettiest of all : http://startbootstrap.com/templates/sb-admin-v2

[gagarine]

I don't have yet a solution sadly. We are going to study that with UX guys and the development team. Lot of time it just didn't feel right and yes the main issue is on mobile.

[qwertyxxx]

yep, this one http://startbootstrap.com/templates/sb-admin-v2 is the best, but IMO the black dark sidebar and main nav is more better ) but, in any case could you please announce when BS3.0 admin theme will be done ?

[rande]

@qwertyxxx we don't have an ETA yet, the template will be based on http://startbootstrap.com/templates/sb-admin-v2.

Do you want to contribute ?

[matheo]

I want to contribute. I have a work in progress and want to take advantage to upgrade the stuff to use BS 3.

[rande]

@matheo thanks to pushing this topic. I will create a bootstrap3 branch so you can create a PR against it. The bootstrap3 will be a 2.3.X series as changing the layout will be a major BC break.

[matheo]

@rande Excellent news, looking forward for that branch :) Maybe you can take advantage to clean some old branches too hehehe, greetings!

[matheo]

Ping me when it's commited please. TIA

[rande]

@matheo I juste create a 2.2 branch for the current code and the master is now an alias for the 2.3 branch.

[rande]

@matheo This change will also impact others admins bundle

To summarize, the 2.3 series will include twitter bootstrap3 and the admin layout will match http://startbootstrap.com/templates/sb-admin-v2.

@lsmith77 @dbu @K-Phoen @ClementGautier @dunglas

[matheo]

All right, so now we ask for Pull Requests with the current advances towards BS3 and avoid redundancy on this effort? (2.2 branch is not pushed yet BTW)

[rande]

@matheo if you want to take the lead on it, feel free to create a PR with the work. We will see how people will react and adapt the strategy depends on the feedback.

(2.2 is now pushed, thanks)

[codecowboy]

@matheo @rande is anyone actively working on the BS3 implementation? I would be interested in contributing.

[matheo]

I began my approach using bower + SpBowerBundle to handle the dependency of external libraries, cleaned up them from the bundle and already got the standard_layout like the SB Admin v2 template.

My work is here: https://github.com/matheo/SonataAdminBundle if you want to run it, follow the SpBowerBundle instructions.

My config.yml ended like this: https://gist.github.com/matheo/9275616

[Bladrak]

@matheo Did you make any progress on this? Could you submit a Pull Request with your developments? We have some resources to actively participate on this in the Sonata team, so we'll give it a push if you're ok with it :)

[matheo]

This commit: https://github.com/matheo/SonataAdminBundle/commit/72be323785e83d73556440cde82e5ee13fc533fd was the initial conversion I did, and haven't advanced anymore because I needed to focus on the frontend. I will continue later maybe, but with an approach based on bower, life doesn't needs to be complicated without it ;)

[Bladrak]

Ok thanks :) I'll try to come up with something then.

[codecowboy]

I can offer some time early next week Mon / Tues towards integrating http://startbootstrap.com/templates/sb-admin-v2 as I'd like to use this in an admin panel I'm building for a client.

[Bladrak]

Hello @codecowboy, I'm currently working on that, I will probably submit a PR today or tomorrow. I'll keep you posted. Thanks for the offer!

[bensan]

Newcomer here. Interested in this discussion and would like to contribute whatever way I can. Any better idea on ETA? Would love to help.

[rande]

A first batch has been merged: AdminBundle, DoctrineOrmAdminBundle and jQueryBundle. Some fine tuning are required to improve the user experience.

Users should rely on 2.2 branch for stable feature, if you are using `dev-master be ready for some issues.

[rande]

Here an update of the current layout with TB3

[rande]

New preview, based on AdminLTE, very similar with sbadmin ;)

[jbinfo]

@rande +1, I recommend AdminLTE as a base theme.

[codecowboy]

http://startbootstrap.com/templates/sb-admin-v2/ gets my vote I particularly want to implement the Tasks menu top-right for running gearman jobs. Would it be possible to build this in a way which would allow both themes / theme overrides?

[ApXaHgheJI]

Like new theme, but please provide more Documentation how to manage them.

[ApXaHgheJI]

An exception has been thrown during the rendering of a template ("The block type sonata.admin.block.search_result does not exist") in SonataAdminBundle:Core:search.html.twig at line 48.

[samuelfvlcastro]

Congrats, I'm loving the redesign, I would just suggest changing one thing. When closed, the sidebar icons should still be visible, like in this theme: http://r209.com/templates/moodstrap

In my experience, users tend to like some extra visual aid (even when a menu is closed)

Cheers

[codecowboy]

Did SonatajQueryBundle() get removed? Is this change documented somewhere? I'm getting this http://stackoverflow.com/questions/23149771/sonatajquerybundle-no-longer-installed-as-dependency