Release: Compliance Admin Theme

[adamspruijt]

My second Admin Theme! Wow!

I went for a more "App-like" style this time, I find this type of design can help a great deal with usability and some clients just really prefer it.

Now the important part, screenshots!

THEME - DOWNLOAD

Login

Page List

Edit Page

Page Item Move

I've also attached a custom theme for TinyMCE install:

compliance.zip

• copy to {your_site}/wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/themes/advanced/skins
• change the "skin" setting in {your_site}/wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCE.js from "o2k7" to "compliance"

ALSO put together an AdminBar mod to match, that include a search field to search entries on the back end, just because I wanted to see how that would feel.

AdminBar.zip

THEME - DOWNLOAD

UPDATE 1.0.1 - Pushed some fixes for modal styling

UPDATE 1.0.2 - Big improvements to Internet Explorer compatibility.

NOTE:

Relies heavily on CSS3, only tested in Chrome so far. Will be updating frequently will new feature and fixes, I just couldn't wait any longer to release it!

[arjen]

Looking great, adam! Seems like you are on a roll

[ryan]

Great work! Thanks for making this. I have updated your modules.processwire.com listing to include the screenshots too. 

[adamspruijt]

Great work! Thanks for making this. I have updated your modules.processwire.com listing to include the screenshots too. 

Thanks Ryan, sorry I forgot to post those, was in a bit of a rush.

[joshuag]

This is really nice. Great Work. I am gonna test this out ASAP. All these great themes are inspiring me to stop sitting on my hands and do one of my own  

[Pete]

This is really nice. Great Work. I am gonna test this out ASAP. All these great themes are inspiring me to stop sitting on my hands and do one of my own

I keep threatening to do one too but haven't found time yet... which is silly as I think it would take me less time than I spent on theming the forums!

[jacmaes]

My favorite so far. Very clean. Congrats.

[Soma]

Those were the times where I could remember all admin themes out of my head

Great theme btw.

[Soma]

Just had to implement admin theme install feature in ModulesManager to more easily install because I'm lazy dog.

[adamspruijt]

UPDATE 1.0.2 :  Big improvements to Internet Explorer compatibility.

[jacmaes]

I've been using this wonderful theme for a few days, and I've run into one minor issue: the date/time picker needs some restyling as the buttons and sliders are invisible.

Here's a screenshot comparing the picker with the default admin theme and this theme:

[adamspruijt]

I've been using this wonderful theme for a few days, and I've run into one minor issue: the date/time picker needs some restyling as the buttons and sliders are invisible.

Here's a screenshot comparing the picker with the default admin theme and this theme:

Great thanks for that, I don't use the time option on the date field often, I think when I get home I'm going to make a big FAT processwire install with everything enabled. I put together a quick fix for now, will improve later, but it is certainly usable for now.

[jacmaes]

Thanks!

[raydale]

This is a great admin theme adamspruijt, thank you. It's beautifully clean and uncluttered.

I do see one slight issue with it on page select fields however. The 'Parent of selectable pages' doesn't provide a select field and instead asks for an id to be input.

I have attached screenshots below of the issue comparing it to the default pw admin theme:

[ryan]

I do see one slight issue with it on page select fields however. The 'Parent of selectable pages' doesn't provide a select field and instead asks for an id to be input.

That means most likely a javascript error is occurring somewhere on that page. If you open your javascript console, do you see any error messages?

[raydale]

That means most likely a javascript error is occurring somewhere on that page. If you open your javascript console, do you see any error messages?

Yes, I am seeing an error in the Chrome console:

Uncaught TypeError: Object [object Object] has no method 'tooltip' - on main.js line 29 (ProcessWire 2.2.9

setupTooltips: function() {
   $("a.tooltip").tooltip({

[diogo]

tooltip() is a method from jQuery UI. There would be the possibility that it wasn't included on PWs UI download, but I just tested it on the console on the default theme and, and it was recognized...

[raydale]

tooltip() is a method from jQuery UI. There would be the possibility that it wasn't included on PWs UI download, but I just tested it on the console on the default theme and, and it was recognized...

I only seem to get the error with the Compliance theme. jQuery UI version 1.8.14 is being loaded (and properly before main.js).

With the default ProcessWire theme no errors are thrown at all.

[diogo]

Just tried it on compliance and it works. Maybe there was an error while copying the files to the server and this would be solved by downloading again.

[adamspruijt]

I think maybe this is a matter of being on PW 2.2.9? No? I can look to see if the problem is my doing, I've been building primarily on the DEV branch so I would never have seen this error. Thanks Raydale

[ryan]

The tooltip() function is a recent addition to jQuery UI. The dev branch is using the new jQuery UI, while 2.2.9 isn't. 

[raydale]

Thanks guys.

@adamspruijt no need to worry about backwards compatibility. I'll simply upgrade the version of PW to the dev branch now I know.

[jacmaes]

Another small issue when editing fields. There's an overlap:

[adamspruijt]

Another small issue when editing fields. There's an overlap:

All fixed!

[Adam Kiss]

Fantastic theme; I was reluctant to give it a try, but I'm glad I did.

I am not really sure whether this is issue of backwards compatibility, or forward compatibility, but there seems to be issue with WireTabs. They sport a FOUC fix, where every inputfield is hidden, until document.ready removes class 'fouc_fix' and everything is visible, and your theme doesn't have the remove trigger. I'm talking about this line: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/scripts/main.js#L54

I'm not sure how you could release this without it (mainly because I don't see any UI at all, just big grey rectangle), but I'd like to know whether this is something local, or does happen for anyone else.