Jump to content

PW 3.0.77 – AdminThemeUikit looking like PW


ryan
 Share

Recommended Posts

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/

  • Like 20
Link to comment
Share on other sites

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.

langtabs.900x0-is.png

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 by MrSnoozles
attached the screenshot I was talking about
  • Like 2
Link to comment
Share on other sites

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 :)

59ceb6c657a7f_ScreenShot2017-09-29at2_10_23PM.png.c6ebb22beea37265afe515ad61f2a2df.png

59ceb6c703605_ScreenShot2017-09-29at2_10_13PM.png.7d6884a5f01570c35a27da1fcba5f42b.png

 

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.

 

  • Like 7
Link to comment
Share on other sites

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!

  • Like 9
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

uiKit-theme.png

Link to comment
Share on other sites

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:

59d1ffeda7755_EkranResmi2017-10-0211_58_24.thumb.png.03979fccd933769b9a82b4779a8cd4db.png

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
}

 

  • Like 3
Link to comment
Share on other sites

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

image.png.417ec62a0bc49df0326c9b1a24e9cc57.png

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.

  • Like 2
Link to comment
Share on other sites

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:

 

pwtheme.thumb.jpg.e837a1ee4ba2bc7749905d3d71160e72.jpg

 

 

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

My first reaction was:

1.thumb.png.e49fcdd5ee61dbe85e5877aed29f7ca0.png

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?

2.thumb.png.bb37a1a5a18f71d75914820b80b57253.png

...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:

3.thumb.png.60d58f83da45ca7f0a6042cc019f205f.png

...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:

another-demo.thumb.png.6f42ae61186f3d34b19a793b40fad2dd.png

(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:

6.thumb.png.6eabca720f3d02fd2cb94781df0d737d.png

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...