Let's make an admin theme [#2660214]

Half bug/half feature request with this one.

I will be using Bootstrap as a base for an admin theme and one key place where things go a bit wrong is in Views UI. Here things are styled with jQuery UI and it looks a bit wrong and generally doesn't work so well - have you had any thoughts around this?

Comment	File	Size	Author
#8	harmony-admin-theme.png	248.64 KB	heylookalive

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

1 February 2016 at 09:57

heylookalive created an issue. See original summary.

Comment #2

heylookalive CreditAttribution: heylookalive at Cancer Research UK commented 1 February 2016 at 09:59

Related issues:

+#1834688: Views UI problems

Comment #3

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 1 February 2016 at 18:36

Project:	Bootstrap	» Bootstrap Admin
Category:	Bug report	» Feature request

Yeah, I feel ya. Admin stuff has generally always been "out-of-scope" for the primary project. Also, moving it to the Bootstrap Admin theme (which I would appreciate help with :)).

My guess would be that we'd need to provide custom CSS.

Comment #4

heylookalive CreditAttribution: heylookalive at Cancer Research UK commented 1 February 2016 at 18:42

Hey mark, been too long! :)

I'm going to be looking to have a more stylised take on an admin theme then straight Bootstrap. If you were happy for me to do that then I'd contribute to this project and sub-theme from it. If not then I'll go my own way. That said the goal is to use this with Harmony and just have a clean looking admin theme (not necessarily Harmony specific).

Comment #5

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 1 February 2016 at 18:55

I'm going to be looking to have a more stylised take on an admin theme then straight Bootstrap.

That has always been the goal of this project (an actual themed sub-theme, but for administrative purposes).

Also worth noting that I actually planned on implementing https://github.com/unicorn-fail/grunt-drupal-bootstrap with this project. It's not fully "done" yet, but it's primary goal is to help alleviate the pain with trying to create/maintain a Drupal Bootstrap sub-theme.

So, the only three real assumptions I had regarding what I imagined this sub-theme would be:

SASS based
Grunt based
Fully styled/themed (which has primarily been pending on creating/adopting any sort of real "design")

Comment #6

heylookalive CreditAttribution: heylookalive at Cancer Research UK commented 1 February 2016 at 19:23

Title:

jQuery UI clash

» Let's make an admin theme

Sounds good, I'm happy with SASS but if honest don't have much experience with grunt (so this is a good opportunity).

Did you have a feel on a particular style direction? I was thinking a very light layer over Bootstrap with only a few things to differentiate:

Rely on primary colour var to bring in colour
Square off elements (tabs, wells, buttons, fields etc) again via variable
It'd be very stark with space
Work well across mobile, tablet and desktop, likely fixed width
Reduce number of icons/button colours in use then build back up one by one
More style on vertical tabs
Use a different font to step apart from Bootstrap - Work Sans

Stretch goals:

Work with Views UI
Improve look of ctools exportable listings
Sort out places where jQuery UI and ctools modals are used
Get some nice styling on selects, checkboxes and radios
Sort the node/entity edit screen out, think we can do better than standard Drupal here

If you're happy on this and don't mind me taking the reigns on what I'd emphasise as light design I'm up for doing this :)

Comment #7

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 1 February 2016 at 20:30

don't have much experience with grunt

That's fine, I can help in this area.

Did you have a feel on a particular style direction?

I would say a "darker" theme (that's just my preference for "admin" type of themes, so it denotes the difference).

An example of what I'm referring to (in order of my personal taste/preference):
http://byrushan.com/projects/sa/1-0-3/tables.html
http://outline.kaijuthemes.com/1.2/index.html
http://rubix305.sketchpixy.com/app/ui-elements/buttons

However, even if it's just the "nav" that's "darker", I'd be fine with that too:
http://wolfadmin.herokuapp.com/1.1

I really like the idea of a side nav (could be left/right, don't really care which).

I also like the idea of making it "offcanvas" like, specially around having/showing icons and multi-level menus (which would eliminate the need for admin_menu).

http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html#...
http://zurb.com/building-blocks/off-canvas-sidebar-component
http://www.jasny.net/bootstrap/javascript/#offcanvas
https://getbootstrap.com/examples/offcanvas/

Anyway, these are just ideas ATM, nothing set in stone.

Comment #8

heylookalive CreditAttribution: heylookalive at Cancer Research UK commented 1 February 2016 at 20:48

File	Size
harmony-admin-theme.png	248.64 KB

I was thinking more in the direction of this attachment, just did some firebugging. Much lighter but colour wise all of this could be customisable via variables, and it's more about deciding a default scheme.

On admin menus i'd see this being provided by a module, the one pictured is to be a Harmony specific one, though it could be navbar, admin_menu, you get the idea.