Orchardcore: Unify & Prettify The Admin UIs

[hishamco]

After looking to the Admin UIs, I found there 're a lot of improvements should be made to polish the overall UI and make them have the same look and feel, I will add all the admin pages and categorize them by module name to keep track all the changes that I will made

Seems all the Orchard Core team are dev and no one is UI/UX specialist, @sebastienros I will take the initiative on this if you don't mind and this should go before the 1.0.0 to make Orchard Core Admin looks cool & sexy 😄

• [x] Add breadcrumb to the admin site pages #3687
• [x] Organize headers in the admin site pages #3688
• [x] Make Tenants page pretty #4155
• [x] Prettify Features page #4175
• [x] Prettify Recipes page #4178
• [x] Prettify Content Types page #4213
• [x] Prettify Content Parts page #4212
• [x] Prettify Roles page #4238
• [x] Prettify the Users page #4239
• [x] Deployment steps cards should be height equal #4281
• [x] Prettify Queries page #4303
• [x] Prettify the Admin Menus page #4304
• [x] Tenants: Select all #4306
• [x] Content items: Bulk actions and Filters UX #4358
• [x] Ability to make the alerts dismiss able #4236
• [x] Implement new admin UI everywhere #4747

[sebastienros]

We all know @Skrypt sucks at html

[sebastienros]

But OC looks cool already! Make it awesome if you want, but talk with everyone before starting huge changes.

[hishamco]

I knew it looks good, what I plan to change is unify all the pages with the same styles, because what I see is many pages are different from others in terms of headers, content organization, button styles .. etc

I can show you some screenshots to prove what i'm talking about

[deanmarcussen]

Be great if we had a shared scss variables file somewhere that all the modules could pull from

[Skrypt]

Bootstrap 4 is the shared framework for all things! We should try to use it properly simply. We should do the changes one part of UI at a time. I'm pushing updates here and there when I find time but that's also the work of everyone to try to follow BS4 documentation and use the proper elements.

[hishamco]

That's why I opened this issue to scan all the pages across and make them have the similar look and feel

[deanmarcussen]

Bootstrap 4 is the shared framework for all things! We should try to use it properly simply.

So all modules should import the bootstrap variables file when building sass and make good use of those variables

[sebastienros]

@hishamco if you see some oddities please file bugs with the screenshots, that will help people fix them in parallel. If there are common patterns to apply we should document them so we can reference to it when necessary.

[Skrypt]

@deanmarcussen Not a bad idea. Need to see what would be the changes to do with the gulp pipeline to make that happen.

[hishamco]

There's two work items not finished yet!!