Jump to content

New ProcessWire admin theme on dev branch


ryan

Recommended Posts

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.

Link to comment
Share on other sites

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;}

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

post-1696-0-75951600-1382712043_thumb.pn

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

post-100-0-47828400-1382748100_thumb.png

post-100-0-94966200-1382748520_thumb.png

  • Like 1
Link to comment
Share on other sites

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?

external.png

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

post-1027-0-94231700-1382886522_thumb.jp

post-1027-0-38194900-1382886549_thumb.jp

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 by Manfred62
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
  • Recently Browsing   0 members

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