New ProcessWire admin theme on dev branch

[Soma]

I just recognized that in the new admin theme, images preview that open in lightbox when clicking thumb are screwed in their size/height. Like the image is display to small in height and streched/screwed. This doesn't happen on other old themes.

Also was wondering why the grid view Icon is displayed when there's only 1 image but doesn't do anything but collapse the field. Seems weird to me.

[Soma]

There's the annoying jump of the content when using the dropdowns fields/templates that is higher than the window, so the scrollbar is enabled and the content jumps to the left. This can be avoided by enabling the scrollbar to show always in the body/html.

Something like the

body {overflow-y:scroll;}

[Soma]

ANother thing I wanted to mention is that the buttons sometimes doesn't register the click completly. It's very annoying and it happens quite a lot I have to click again to register. I'm not sure what the cause is, but I remember having this issue with UI buttons a lot (not only here). I'm maybe to fast when clicking and moving away, but it's definately something that breaks the UX.

[SiNNuT]

ANother thing I wanted to mention is that the buttons sometimes doesn't register the click completly. It's very annoying and it happens quite a lot I have to click again to register. I'm not sure what the cause is, but I remember having this issue with UI buttons a lot (not only here). I'm maybe to fast when clicking and moving away, but it's definately something that breaks the UX.

Same here. Had a couple of 'what did just (not) happen' moments with it. Once you know, it's not a deal-breaker but definitely annoying.

[Soma]

Datetime inputfield's time widget seems to be broken on latest admin theme dev? I am only able to select 00 or 23 for hour and 00 or 59 for minute.

.ui-slider {

position: relative;

text-align: left;

background: #838688;

border: none;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;

 

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)inset;

display: inline-block;

}

yep, removing the "display: inline-block" in a inspect makes it work again. The div doesn't have a width that's why it doesn't work.

Or adding width: 100%; also seems to do the trick.

[Soma]

Same here. Had a couple of 'what did just (not) happen' moments with it. Once you know, it's not a deal-breaker but definitely annoying.

I found that at a very specific point on the button the click doesn't work/submit the form. I can click as much as I want and the button gets active state but nothing happens. Very annoying. The span text element inside the button maybe I have no idea. But I'm sure it can be solved.

[Martijn Geerts]

@soma, I think it has to do with the position relative on <button> element. Removing the position (back to static) seems to solve it here.

[Soma]

Nothing of that works for me here in Chrome. Position relative or not. I tried everything possible. Clicking at the top of the span inside the button doesn't trigger the button, but visually click it down.

[Martijn Geerts]

I've put it to static here, will test it for a while. if it's solved I'll report back.

(had the same issue. Chrome Version 30.0.1599.101)

[Soma]

I've just put to static and still same.

I remember I stumbled over this 1-2 years back and gave up on it after trying to fix it. I think only thing would be to make the buttons different markup and use link or input but not sure what would be best.

Edit: The only thing I think works would be to put padding on the span of the button and not on the <button>

[Martijn Geerts]

Why do we need that span at all ? Setting a height, line-height and padding: 0 6px should be sufficient.

[Soma]

It's the jquery ui buttons, it's usually generated by js.

[NikNak]

I like this new theme a lot - my preference is classic.

I'm not sure if anyone else has noted this, but the notification at the top of the page if there is an error (eg when saving a page) is barely readable with black text on a dark red background. 

Many thanks for the hard work.

Regards

Nik

[Soma]

Nothing works even setting the span to have the padding and make the full area of the button, so it's like a bug of the button and span text inside. When clicking with the pointer right at the top of the button text it still doesn't work. It's only like 1px range, but I so often hit that spot that it drives me crazy when working and clicking those buttons a lot building a big site.

[Martijn Geerts]

What it looks like if you click, the clickable area shift some pixels to beneath. So never triggering the click.

( This is also an issue, but not the whole )

Edited October 25, 2013 by Martijn Geerts

[ryan]

I just recognized that in the new admin theme, images preview that open in lightbox when clicking thumb are screwed in their size/height. Like the image is display to small in height and streched/screwed. This doesn't happen on other old themes.

I'm not seeing that here. Can you post a screenshot?

There's the annoying jump of the content when using the dropdowns fields/templates that is higher than the window, so the scrollbar is enabled and the content jumps to the left. This can be avoided by enabling the scrollbar to show always in the body/html.

Thanks, I was wondering how to correct that. Your solutions works well here. I'll include it in the next update. 

ANother thing I wanted to mention is that the buttons sometimes doesn't register the click completly. It's very annoying and it happens quite a lot I have to click again to register. I'm not sure what the cause is, but I remember having this issue with UI buttons a lot (not only here). I'm maybe to fast when clicking and moving away, but it's definately something that breaks the UX.

This has been driving me nuts too. I just don't know how to fix it yet. If you guys figure it out please let me know as I'd love to fix this one. 

I'm not sure if anyone else has noted this, but the notification at the top of the page if there is an error (eg when saving a page) is barely readable with black text on a dark red background. 

Thanks, I'll correct that in the next update. 

[ryan]

yep, removing the "display: inline-block" in a inspect makes it work again. The div doesn't have a width that's why it doesn't work.

Or adding width: 100%; also seems to do the trick.

Thank you Soma!! Adding width: 100%; fixed it here. This will also appear in the next update. 

[Soma]

This is on a 13" MacBook Pro on Chrome FF Safari

The problem seems * box-sizing: border-box and the 100% width height of image. When I turn off the box-sizing the image stretches itself back to normal size. I don't think it's a good idea to use * for stuff.

[woop]

Looks great! Can't wait to have this on my site. The only thing I'm missing (as far as I can tell from the screenshots) is a global link to "View site". I think it's a major usability benefit to be able to quickly access your site from anywhere in the admin. Might I suggest a small icon the right of the "Profile" icon in the menu bar?

http://fortawesome.github.io/Font-Awesome/icon/external-link/

[janlonden]

Looks great! Can't wait to have this on my site. The only thing I'm

missing (as far as I can tell from the screenshots) is a global link to

"View site". I think it's a major usability benefit to be able to

quickly access your site from anywhere in the admin. Might I suggest a

small icon the right of the "Profile" icon in the menu bar?

The home icon in the breadcumb functions as the "View site" button right now. But I agree with you that it should be elsewhere, and have it's own icon.

[woop]

The home icon in the breadcumb functions as the "View site" button right now. But I agree with you that it should be elsewhere, and have it's own icon.

oh ok. Well, if the breadcrumb always starts with [home icon] > Admin >, then I think the home icon is enough. The "Admin" part states that you're inside the admin, so it makes sense for the home icon to have the "view site" functionality. No need for two buttons, imo. Thanks for clarifying!

[janlonden]

oh ok. Well, if the breadcrumb always starts with [home icon] > Admin >, then I think the home icon is enough. The "Admin" part states that you're inside the admin, so it makes sense for the home icon to have the "view site" functionality. No need for two buttons, imo. Thanks for clarifying!

I still think it's not clear enough. I remember the first time when I looked at the breadcrumb and thought "I wonder what that home icon does". I was surprised to end up in the site.

Edit:

It seems that adrian agrees with me, hehe

[woop]

I still think it's not clear enough. I remember the first time when I looked at the breadcrumb and thought "I wonder what that home icon does". I was surprised to end up in the site.

Edit:

It seems that adrian agrees with me, hehe

True! I didn't catch it either which is why we're having this discussion in the first place. haha Logically, it makes sense, but it's hard to understand the home icon. agreed. What if the home icon was replaced with the root domain in text? Eg. mysite.com > admin > pages. Only downside is that it's longer - but the PW breadcrumb is normally never longer than 2-3 items.

[apeisa]

Ryan: noticed that font-awesome has just changed the naming convention from icon-iconname to fa-iconname. Should we keep using icon-iconname, require new one or support both?

[Manfred62]

The problem seems * box-sizing: border-box and the 100% width height of image. When I turn off the box-sizing the image stretches itself back to normal size. I don't think it's a good idea to use * for stuff.

same experience in TinyMCE. When I change the skin (to e.g. bootstrap), it's misaligned.

After deactivating box-sizing: border-box; it's ok again. See screenshots

maybe we have to exclude some parts with border-box: content-box; ?

EDIT: if you want to use a skin like bootstrap for TinyMCE in PW dev version, add following code to the reset part in the ui.css (begins at line 5)

\wire\modules\Inputfield\InputfieldTinyMCE\tinymce-3.5.8\themes\advanced\skins\bootstrap\ui.css

 /*------- for buttons in toolbar -------*/
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

Edited October 29, 2013 by Manfred62