Admin Bootstrap Theme

[Skrypt]

We already discussed about this in some meetings. So far I've had discussion about this feature with Sebastien, Daniel, Antoine and Phillip Senechal.

To summarize what have been said so far. The first goal is to make the admin theme responsive and to adapt well to mobile devices. Twitter Bootstrap is one among many other frameworks out there. The decision have been made that we are going to use it as a base for the admin theme.

The reasons :

1. We need to have a documentation on how to theme our admin modules. Right now, we need to analyze how other modules styles are done and copy parts of them. This can lead to bad interpretation on how to do things.
2. Using Bootstrap components will help for the overall application ergonomy. An example : using button dropdowns to regroup similar actions that can be done on a specific form, using different button colors for different levels of actions.
3. The third advantage is that the bootstrap includes also some javascript modules (modal, collapse, carousel ...). Though, we would need to determine if and where we would use them because some of those modules are too simple.

   Main design requirements :

4. The admin bootstrap will be made using LESS files (see https://twitter.com/mdo/status/591364406816079873?lang=en). It should use the gulpfile.js and an Assets.json file to compile/minify them as part of what Daniel Stolt did recently on #5450. The goal is to actually use the same bootstrap version in every modules that way.
5. It should be backward compatible with the current modules. We should integrate the actual admin CSS files into the new theme and adapt it to work with Bootstrap.
6. Make multiple LESS files to separate content elements. Examples : Forms, Layout, Navigation, Pagination, Breadcrumb, Variables, Types. See https://pgbootstrapbasetheme.codeplex.com/ as an example.
7. Use the advantages of LESS as much as possible (Nesting, Mixins, Variables, Functions).
8. Support RTL. Keep logic separation between front-end and backend. To investigate : Bootstrap RTL. https://github.com/morteza/bootstrap-rtl. Bootstrap native RTL support is delayed to next version for providing better tooling. Though you can find some custom implementations on Github.
9. Replace actual classes or keep them in the views. We should discuss more about this one. I think we should stick to the Bootstrap classes to not overcomplexify the use of the documentation. Else we will need to provide a special documentation on how to use Bootstrap classes in Orchard.
10. The Bootstrap admin should not have a dependency on any other javascript framework i.e (Angular, React, Backbone). The goal is to implement views with the best semantics possible. Modules should take care of things like : live notifications, live messaging (Audit Trail).
11. Menu icons should use font icons like http://fontawesome.github.io/. Those icons scales better than images.

We should consider using https://almsaeedstudio.com/themes/AdminLTE/index2.html as an example to achieve this. This bootstrap admin theme is licenced under MIT https://github.com/almasaeed2010/AdminLTE/commit/c8c02c68cfa7072703727e07650ce3bd9474f7cd and is supported through Github. They also have other admin themes wich are among the bests on wrapboostrap.com.

What's done

So far, I have implemented the grid, panels, tables, pagination, tabs, buttons. I've started to change the actual form controls to filter content on some views by using Bootstrap components. I've integrated and adapted the actual admin CSS file to keep backward compatibility ; though it needs more testing with contrib modules.

What needs to be done now

Since I've did an override of the actual theme ; I need to reimplement this in each modules views using the views I overrided one by one using a tool like Windiff to not break any changes that have been made since then. Some changes requires also javascript modifications in modules where selectors are on class instead of id's. As a side note ; we should use id's the more often possible as jQuery selectors to avoid these kinds of problems. Once this will be done, the only core module that was left to do was the Media Library wich will need some adjustments. Though the Media Library was not totally responsive, so it needed those adjustments.

Contribution

Once this will be all set up, everyone is welcome to contribute. You can reach me through github here. @agriffard and Phillip Senechal have already shown interest. Feel free to comment on this. @Sebastien if I missed something from your notes tell me.

[sebastienros]

I like AdminLTE

• it's MIT
• it supports mobile pretty well
• it helps in the effort
• it provides lots of components that users might reuse in their UI, and even though we'd want to rely on the less amount of them, having them available is good. But we should abstract them as much as we can in case we need to switch to new ones. For instance date/time pickers.

The Bootstrap4/SCSS thing is concerning though. Switching to a new css format could kill Bootstrap, and the owner doesn't seem to care much, to paraphrase, "I do what I want". And AdminLTE is based on .less files. Not sure it would be migrated to BS4. I'd say let's use BS3 if AdminLTE uses BS3, and keep using .less in the current modules as we do today. Unless everyone thinks .scss should be the new default, knowing there is no current default, but some modules using .less.

[bleroy]

+1 AdminLTE.

About SASS, I'm not sure what you're referring to when you talk about Bootstrap 4.

[Skrypt]

The difference between LESS and SASS syntax is quite similar. SASS has more features. So converting LESS to SASS should be simple. Here is a comparison between SASS and LESS. http://www.hongkiat.com/blog/sass-vs-less/

[bleroy]

I'm pretty sure everyone here understands the difference between the two, but I don't think that's quite the point ;)

[sebastienros]

@bleroy The issue is that Bootstrap 4 is almost released, and the guy decided to switch from less to saas. I fear the same issue as Angular 2, with lots of existing code based on LESS and now having to move to SASS people will tend not to adopt BS4.

[bleroy]

What guy? The AdminLTE guy?

[sebastienros]

The Bootstrap dev

[Skrypt]

Most popular frameworks are using SASS now (Foundation, Skeleton). Bootstrap 3 provides both. I can't say if BS4 will still provide LESS support. Though, based on the Twitter comment the owner made ; he seems to want to move to SASS like the other frameworks did. It's kind of natural selection if one is providing more features than the other. The change of spec I made is purely by making a comparison between both and also to make sure we be prepared for what's coming.

@bleroy : https://twitter.com/mdo/status/591364406816079873?lang=en

[sebastienros]

Just for keeping trace, just noting that AdminLTE is providing a foundation and we will be free to change the default skin, font and sizes to our taste. Making it easy to customize to anyone's taste too (skins are demoed).

[Skrypt]

Based on that, we should maybe think about making the admin theme a project and add settings for changing these things.

[DaRosenberg]

I would vote for sticking with Bootstrap 3 and keeping LESS for now.

That said I think our Gulp pipeline should support both. As @Skrypt describes, different frameworks use one or the other, and we would ideally want to be able to integrate any such framework in the compilation pipeline.

If at some point we feel there are strong reasons to move to Bootstrap 4 or otherwise migrate our LESS files to SCSS, we can do so with relative ease.

[Skrypt]

Switching spec back to LESS.

I've found also this that could be usefull eventually. https://github.com/ekryski/less2sass

[ropstah]

@Skrypt I would like to contribute to this project. Drop a message when you're ready to go.

[RolfVeinoeSorensen]

Any news on creating an admin bootstrap based theme? I would also like to contribute when you begin.

[sfmskywalker]

@RolfVeinoeSorensen Works is actively being done in the feature/amaretti theme.

[dcinzona]

You mean https://github.com/OrchardCMS/Orchard/tree/feature/admin-amaretti ? Because there's also an admin-bootstrap branch as well. What a nice theme choice, btw. Looks awesome. I'm going to see if I can pull down this branch and assist in any way.

[sfmskywalker]

Yep, that's the one (admin-amaretti). Not sure what the bootstrap-amaretti is.

[sfmskywalker]

Or did you mean admin-bootstrap? If so, we're superseding that one with admin-amaretti.

[dcinzona]

Yeah, sorry, it's admin-bootstrap... which, my guess is, that's the old AdminLTE one. But anyway, answered.

Ha, Cross Post!

[dcinzona]

Is there a checklist somewhere of items remaining?

[sfmskywalker]

@SzymonSel and I started a Trello board recently to start collecting remaining items. It's not complete, but we are adding stuff to it as we discover outstanding tasks. If you like I can add you to it. Just give me your Trello username.

[dcinzona]

I just signed up with @dcinzona.. See if that works?

[dcinzona]

Thanks, I'm in. For modifying the less files, is that ok or do you recommend creating additional customization less files that would be included in the theme? I'm asking in particular about the Bootstrap/Panels.less file for now.

Edit: Nevermind, I see you are using orchard-*.less as the overrides. Leaving this comment here in case anyone else wants to contribute.

[sfmskywalker]

:)

[dcinzona]

@sfmskywalker I would prefer not having to edit the core views here, but in order to get the bootstrap admin theme to work, the navigation index view may have to either be overridden or modified. This line here: https://github.com/OrchardCMS/Orchard/blob/dev/src/Orchard.Web/Core/Navigation/Views/Admin/Index.cshtml#L46 statically sets the pixel width of the element and breaks the sidebar navigation. If we are ok with modifying the core file and removing that class, I can work with the rest of the classes there to style it correctly.

[Skrypt]

You need to use container-fluid instead in that view. And then you need to make the layout of that page to be into 2 separated columns by using col-xx-x http://getbootstrap.com/css/#grid

You should be modifying core module views for achieving this. Though we should try to have consistency on how we theme each module views by trying to follow how it's been done into the currently made ones. Will let @sfmskywalker confirm if I'm wrong or not :)

[dcinzona]

@Skrypt I was able to get the styling to work without modifying the core file too much (just removed that container div and added some less styles) However, the responsive view is broken, so I will do what you mentioned and use the bootstrap classes instead (requires more modification to the index view).

[sfmskywalker]

It's fine to modify the view files of core modules, no need to override them in the view.

[dcinzona]

It might be nice to create a channel somewhere so we can track issues with this feature. For example, there's a fundamental problem with the text box size classes in the responsive format. Setting the width of a textbox to x% of the container wont work in a responsive layout because on a smaller screen, it will be REALLY small. "text small" on a phone looks like a checkbox almost.

A possible solution is to use breakpoints for these. This may be the easiest solution. The other solution that I can think of is to replace all text [size] class declarations with something like col-xs-12 col-sm-8 col-md-6 col-lg-4 etc.

Thoughts?

[sfmskywalker]

Sure, do you have a good channel in mind?

Regarding the text boxes, good point. They were actually using col-xs- etc. classes, but I changed it because it turned them into block-level or floating elements, which caused an issue. But the responsive issue is worse.

Instead of replacing text [size] class declarations, I would suggest to use the Bootstrap column maker mixins instead (make-col or something similar).

[dcinzona]

Ah yeah, that could work. I submitted a PR though that adds media breakpoints to your styles and it works really well, without having to fuss with the column classes (because col-- adds margins)

[dcinzona]

I created a gitter channel (public) https://gitter.im/dcinzona/Feature-Amaretti-Admin

[sfmskywalker]

I noticed, and I agree with the implementation. Otherwise we would have to counter some of the col-- effects.

[SzymonSel]

We should definetly override the core views and try to use as much of the themes styles as possible - as long as it makes sense and no hacking is needed. Ie. I'd redo all those right panels in navigation/workflow/layouts. We should use the UI elements from the new theme.

[Skrypt]

As a way to revive this feature I'm summoning @Xceno to the project.

[SzymonSel]

It's gonna be hard, with all the efforts being pushed to Orchard2 nowadays. Do we have a up-to-date backlog (Trello it was)?

[sfmskywalker]

We moved all the Trello items to GitHub as issues, and tagged those issues with Admin. At this point, the admin theme is very close to done. The biggest remaining issue was localization/globalization, but has been done, but not fully tested.

[sfmskywalker]

The original designer of the Amaretti theme also said he has a new release with more support for RTL. Once I get my hands on that one, the Admin theme should be updated with his work (which should be a small task).

[Skrypt]

I merged the dev branch in the new-admin-theme branch this week-end. There's a lot of regressions that needs to be fixed. Yes there's more efforts pushed into Orchard 2 dev but Orchard 1 still needs to be supported. Orchard 1 is right now the production release and will still be for some time.

[Hazzamanic]

I'm up for helping out. Is the branch to work on called feature/admin-theme? This is the only admin related branch that I can see.

This is the contents list page I am seeing. I don't imagine this is correct?

[Xceno]

@Hazzamanic yes, you're on the correct branch, but @urbanit has a fork and already did a lot on it! I also have a fork and currently work on the MediaLibrary, but I'm slowed down by severe crunchtime right now. I personally have pulled in the changes from @urbanit and work on top of these.

You can also join the AdminTheme Gitter

[urbanit]

@Hazzamanic right branch but I will push the content list changes today. Need some time to do it.

[hldvuong]

I like Wordpress Dashboard, please mirror it to Orchard.

[Skrypt]

I'm closing since we all moved to Orchard Core dev.