PW 3.0.77 – AdminThemeUikit looking like PW

[ryan]

This week we’ve got another update to the new Uikit 3 based admin theme, AdminThemeUikit. It now has the flavor of Tom Reno’s fantastic AdminThemeReno, and now it's starting to feel like home. In this post we take a closer look with screenshots and more.

https://processwire.com/blog/posts/uikit-3-admin-theme-updates/

[MrSnoozles]

Thank you for yet another interesting friday night (for me) blog post. This definitely looks hot  Is this going to be the default skin in the future or is that still open to discuss?

From the UI side I have a couple points. I know this is not supposed to be a final version, but the input probably won't hurt either.

1. the  tabs on top (content, settings, etc.) in the screenshot "page editor with language tabs active" might be a bit confusing for some. Since the borders all have the same weight it seems that they might just change the title field.

2. The top navigation bar still looks quite big/high, unnecessarily wasting space. Would still have to see that in action though. 

3. In the search suggestion field the section labels might fit better on the left. It probably depends on the available screen width, but labels on the left can make the field look sleeker.

  

 

Edited September 29, 2017 by MrSnoozles
attached the screenshot I was talking about

[adrian]

1 hour ago, MrSnoozles said:

The top navigation bar still looks quite big/high, unnecessarily wasting space.

I completely agree. As much as I think whitespace/padding is important, I still prefer the default theme in this regard.

I also think that the size of <h1> tags needs to be reduced significantly - it makes the title when editing a page huuuuuuge! Actually, can we go back to the default theme here also - no need for the title - just put it back in the breadcrumb and put the save/publish buttons on the same line as the breadcrumbs too. These are big showstoppers for me at the moment. The top of the Content / Children / Settings tabs is 215px down compared with 113px. That's 102px of wasted real estate at the top of the page!

BTW - I really do like this new version of the UiKit theme - nice work Ryan 

 

Another idea I have - what about having the off-canvas menu (accessible from the PW icon) look like the sidebar menu on large screens. I don't think there is any functionality in duplicating the Setup, Modules, Access, User/Profile menus. I think the ability to bring up the page tree exactly the way it looks with the "Pagetree sidebar navigation" would be much more useful.

 

[maxf5]

I'd love this:

- remove masthead
- sidebar (left) always visible
- change icons to uikit3 icons
- breadcrumb on top (with search on the right which i forgot here)
- some design fixes

Some live changes:

 

 

 

[teppo]

12 hours ago, adrian said:

I completely agree. As much as I think whitespace/padding is important, I still prefer the default theme in this regard.

I also think that the size of <h1> tags needs to be reduced significantly - it makes the title when editing a page huuuuuuge! Actually, can we go back to the default theme here also - no need for the title - just put it back in the breadcrumb and put the save/publish buttons on the same line as the breadcrumbs too.

You know what they say about opinions and everyone having one, but... I must disagree 

In my opinion the new top bar is a step up from the old one, and having a separate h1 is a good thing. That being said, the h1 is too large for its own good, so you might want to decrease its size. I wouldn't be strongly against making the top bar a bit smaller either, but in my opinion current one looks better than the old one.. not to mention that it looks less like something we borrowed from Craft

(Half joking about that last point.)

The biggest problem I have with the top bar as it is now is related to accessibility: the active link/tab should be clearly visible, and preferably have an underline or border. Currently the difference between active and non-active sections is so vague that it's hard to notice, even for someone with no visual impairments.

Also, and please correct me if I got this wrong, did you say that clicking the ProcessWire logo opens a sidebar?

If that's the case, I'd suggest rethinking this part. It is a well established convention in the web that the logo is a link to the nearest "home page" – which, in this context, would be the admin root. I would advice against breaking the convention, as it will lead to two issues: unexpected behaviour, and a useful feature that gets easily overlooked by users.

Overall I quite like the new design. It's fresh, yet it still looks familiar enough. Great job!

[adrian]

4 hours ago, teppo said:

Also, and please correct me if I got this wrong, did you say that clicking the ProcessWire logo opens a sidebar?

If that's the case, I'd suggest rethinking this part. It is a well established convention in the web that the logo is a link to the nearest "home page" – which, in this context, would be the admin root. I would advice against breaking the convention, as it will lead to two issues: unexpected behaviour, and a useful feature that gets easily overlooked by users.

Well I do agree with you on something at least  - I also think that the PW logo should be to the admin home. I guess on smaller screens we need a hamburger icon for the that full menu sidebar.

Back to my thought on accessing the tree - when you are editing a page, or on a subpage of Setup, Modules, etc you can click on the "Tree" icon and get the tree in that sidebar overlay - I think this is great, but you can't access it from these "parent" pages because there is not breadcrumbs on these pages. If the breadcrumbs were added to these pages, then you could access the tree sidebar panel from anywhere and I'd be happy

As much as I want to embrace the iframe'd sidebar tree available in UiKit, it just doesn't quite feel right - partly it's the iframes, but mostly it's the width restriction that force the page list action buttons onto a second line. Being able to access the side panel overlay tree from everywhere would be a really nice compromise I think.

[Peter Knight]

I had a botched upgrade today and looking for some help.

I was running the previous UIKit theme and then tried to install the new version.

Fatal error: Class 'ProcessWire\AdminThemeFramework' not found in /var/www/vhosts/domain.com/httpdocs/site/modules/AdminThemeUikit/AdminThemeUikit.module on line 18

The odd thing is I seem to have all the files in place I need.

I'm going to try restore the database to see if that helps and reinstall my wire and index files etc

[Peter Knight]

Reinstalling did the trick.

[ukyo]

I like big titles on backend and navbar, reno style is better than old one, nice work @ryan !

@ryan @adrian @teppo @maxf5

I have a forked repo for AdminThemeUikit admin theme : https://github.com/trk/AdminThemeUikit/ following @ryan changes and applying changes to my repo. I separated less files and organized these less files for more flexibility, and removed uikit folder added nodejs package.json with dependencies.

For modify and customize AdminThemeUikit firstly we need to add less @variable for each class property.

On this https://github.com/trk/AdminThemeUikit/blob/master/theme/less/styles/reno.less file, as you see, variables specific for @reno theme, not useful for styling AdminThemeUikit theme.

Less @variables must be global for styling. 

// Currently
@reno-text-color: #354b60;
@reno-link-color: #e83561;
@reno-link-hover-color: darken(@reno-link-color, 10%);
@reno-dark-background: #1C2836;
@reno-muted-background: #f0f3f7;
@reno-muted-text-color: #8d939e;
@reno-muted-text-color-alternate: #6c8dae;

// Must be
@theme-text-color: #354b60;
@theme-link-color: #e83561;
@theme-link-hover-color: darken(@reno-link-color, 10%);
@theme-dark-background: #1C2836;
@theme-muted-background: #f0f3f7;
@theme-muted-text-color: #8d939e;
@theme-muted-text-color-alternate: #6c8dae;

My work structure for multiple styled themes:

theme.less includes main html structure and styles, uikit (this is not main uikit files) folder includes uikit modifications (customizations for uikit), style- prefixed files have only variables with different values for styling theme.

I am importing theme.less file from style- prefixed files and compiling style-prfixed-file.less for css output for each style.

Structure like i use or structure like uikit use will be better for create your own style, just duplicate existing one and change variables (padding, margin, colors, etc...) without need to modify classes.

If we need custom classes, we can use it like :

@style = default;

// Import Style
@import (optional) "style-@{style}.less";

// Style based
& when (@style = one) {
	apply for style one 
}
& when not (@style = one) {
	apply when @style not equal to style-one
}

 

[MrSnoozles]

Great post, definitely makes much more sense to organize it like this.

[abdus]

Is it possible to add actions to search box? Like when using Word, pressing Alt + Q will activate "Tell Me" feature which lets you search actions directly similar to Spotlight

Instead of delving into dropdown menu, we can just type in "install" and it suggests you "Module Install" page & tab, or "field" suggests "add field" etc.

[gmclelland]

@abdus - With AdminOnSteroids you can enable the Alt + d shortcut to focus the search field.  It doesn't work yet with the new AdminThemeUikit though.  https://github.com/rolandtoth/AdminOnSteroids/issues/56

There are other shortcuts as well like Alt + o to open the page tree in a panel.  Cmd + s to save a page.

[SamC]

On 29/09/2017 at 10:39 PM, maxf5 said:

I'd love this:

- remove masthead
- sidebar (left) always visible
- change icons to uikit3 icons
- breadcrumb on top (with search on the right which i forgot here)
- some design fixes

Some live changes:

 

 

 

^ I like this a lot. The same reason as I liked the reno theme, the sensibly used horizontal space.

My first reaction was:

On 30/09/2017 at 10:33 AM, teppo said:

Also, and please correct me if I got this wrong, did you say that clicking the ProcessWire logo opens a sidebar?

I just tried the demo here: https://processwire.com/blog/posts/uikit-3-admin-theme-updates/#Comment41064

And clicking on the big P logo did indeed open a sidebar, but on the right. Now I couldn't use this at all, clicking on the left, and then having to drag the mouse over to the other side of the screen... however, it may be possible for it to open on the left instead. A logo means 'Home' to pretty much every internet user on the planet. I would not expect in a million years for it to open a sidebar and I'm baffled by this design choice.

Another bugbear of mine is having a scrollbar in a weird position. I am so used to it being on the edge of the window, having it further in is super annoying and the added tree here is for, I'm not really sure why it's here actually. I chose to edit the 'Home' page, what do I need the tree for?

...so the first thing I would do with this theme would be to lose that bar on the right. I'm editing a page, I don't need to see the tree, but:

...the scrollbar is still inset unfortunately. I'd lose this sidebar feature completely, i don't see how it adds value to the editing experience other than to distract.

My ideal would be something simpler, like this (badly cropped, edited and joined) with options not repeated as much in a top bar and a sidebar:

(Yes, it takes inspiration from the WP interface)

=======================================

Now I don't intend for this to be one huge moaning session, the new theme certainly looks funky, so great work and thanks for the hard work on that!

However, in terms of usability (especially for clients that aren't computer savvy who will be confused by things flying in all over the place), I'd personally stick with Reno with the fixed sidebar and all options shown:

 

[gmclelland]

@SamC - You can configure the module the way you like under Modules > Configure > AdminThemeUikit

Also @tpr - updated the AdminOnSteroids module to fix the hotkeys now.  Thanks @tpr!!

 

[SamC]

@gmclelland yeah sorry, I should have mentioned i haven't installed this so haven't seen the module options.

I also forgot to mention that I love the colour palette, very tasteful.

This is some great news, thanks

[monchu]

pw give us the flexibility to customise the admin part.

for backend part to avoid the admin's user confused about the 'Pages' concept, I just simply rename the Pages label into Dashboard.

[SamC]

5 hours ago, monchu said:

pw give us the flexibility to customise the admin part.

for backend part to avoid the admin's user confused about the 'Pages' concept, I just simply rename the Pages label into Dashboard.

That's quite a good idea, thanks for the tip.

[maxf5]

On 4.10.2017 at 10:21 PM, SamC said:

^ I like this a lot. The same reason as I liked the reno theme, the sensibly used horizontal space.

let's see how rainy the weekend will be and i'll do this version of the admin theme.

[SamC]

17 hours ago, maxf5 said:

let's see how rainy the weekend will be and i'll do this version of the admin theme.

I'd love that to see that mockup in action, looks so simple and pleasing to the eye.