New ProcessWire admin theme on dev branch

[ryan]

@ryan, pulling those updates brought up something slightly weird with new modules page: "Found new module - JqueryMagnific" is a link to "#JqueryMagnific".. which won't work unless I first activate Core tab 

Yeah I haven't figured out how to resolve that one just yet. Luckily core module additions are fairly rare, and in this particular case, that module will install itself. It sounds like you just made it to the modules screen before the page editor (with an image field), otherwise that module would have been already found and installed. 

Magnific Popup has replaced Fancybox for InputfieldImage. But FancyBox will remain in the core for now, as I know some modules (and sites) still use it. 

On Mac OS X 10.6 with Safari 5.1.10 with this latest update when modifying a page the menu (Content, Children, Settings, View) disappears. 

I'm also in OS X, though Safari 5.1.9. I haven't been able to duplicate that issue. It sounds like a javascript error though–check to see if anything appears in your JS console? In Safari that's: Develop > Error Console. 

tested the 2.3.7 version. In my eyes it looks nice on Win 7 in FX and Chrome. With FX it looks a little bit sharper. Also the font-size is good (not too small). The dropdown translation is fixed too.

Glad to hear the new font size renders better with Arimo and Windows/Chrome. 

what about making the ProcessLanguageTranslator module translatable (the text on top and the save button)?

I've not put much attention towards translation of this particular module since it is largely a tool for translating from English to other languages. 

under access/user the column titles?

under access/user/username the Roles section is not translated?

I think those are translated with the field names. Some may be under the "show system fields" filter. Though to be honest, I'm not positive we're pulling the translated versions here or not. I'll check on that, as I've got some other related updates to cover. 

In the model view of page edit (append &modal=1 to the URL), the save button is placed inside the first field.

Maybe a bit more space there would be nice 

Thanks–I can see that here too. That button probably shouldn't be showing up at all. I'll add code to skip the button cloning when in modal view. 

Late to the party, but may I suggest superfish.js? Does wonders for my dropdowns!

I've used superfish before, and did like it. But kind of wanted to stick with jQuery UI here since we're already including it. We might as well use the tools that it provides when possible because there's no extra overhead in doing so. 

So.. perhaps we could implement fa-* style class names after all -- or if that seems too fa-specific, re-brand them to pw-* or something else "vendor-specific"?

I'd be okay with pw-* (even if not as clear in code) but just wanted to have an expected/standard set of icons that modules know is always there. If something happens with font-awesome down the road, or we find a set we like better, I like the idea of being able to substitute the existing icon-* rules with another set, without everyone having to go in and change their class names. Just the term "icon" is a lot of clarity for code and seems like a good standard in our environment. I'm not really worried about collisions here since the admin is a more isolated environment. We aren't telling people what they have to use in their websites. Just telling Process module or admin theme developers that they can rely upon an icon-* set being available, regardless of what that may point to. But I don't really feel that strongly about this, and it doesn't matter much to me either way. 

Also wanted to note taht the new Admin Theme is broken on many things (especially the new dropdown) on IE8 and not that usable/nice. Not sure how that matters at all, but we still have clients that use IE8.

The old admin theme will remain as a core-bundled option for IE8 support. Though admittedly I don't do any testing with IE8 and PW, so am not sure to what extent even that is compatible with IE8. 

Is this something on my end or is this functionality temporarily disabled in the dev branch?

This was a bug that was there for a day or two, but should be fixed in 2.3.7. 

[lpa]

Ryan: The Safari problem with menus not showing up was fixed after restarting Safari...

[jacmaes]

I'm not sure if this is the right thread, but there's an obvious layout issue with the thumbnail module:

[Manfred62]

Could you try this (at least) for Chrome and Safari?

* {
        margin:0 auto;
        -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
        -webkit-text-size-adjust: 100%;
        
    }

I tried something in a test-site to get better (sharper) google-web-fonts in Chrome on Windows:

-webkit-text-stroke: 0.3px;

here you can play with the value. I only placed this for my headings (where web-fonts are used). Got nice results.

Not sure about the performance when used for all.

Screenshots (with Montserrat font), second is without text-stroke:

[ryan]

I had experimented with text-stroke here too, but at least in OSX, it just made the text fuzzy. It didn't seem desirable at all, at least as a cross platform solution. Last I heard, Arimo was looking good on the PC at current font sizes? Is something like text-stroke needed to increase legibility on the PC? The text looks a little fuzzy in both of those examples in the screenshot (maybe from jpeg though), especially the one with the text stroke. 

[wayne]

I can confirm that the new font size improves the rendering of bold Arimo text. (Windows 7)

At the moment "text-stroke" is only available in Webkit browsers and it's too much about experimenting with values for my taste.

I would advise against the overuse of such css properties. Don't try to solve something here that the rest of the webdesign community couldn't solve yet.

[teppo]

It's a bit late to suggest this, but I'd like to seriously question if we really need Arimo. What's it's greatest benefit here? Is it more usable, readable etc. when compared to "web-safe" alternatives or is it purely a visual thing?

Personally I can't see anything being so great about it, not even that visual part, but what I can see is a pile of issues. I prefer my fonts to load fast and be readable, that's all, and at the moment I feel that neither of those has improved (quite the opposite really) in this new admin theme.

To summarize this, it just seems questionable to me if Arimo is really worth it. I can't see any real benefits, but then again, I'm not the typography guru here either

(Note: having to rely on a very slow mobile connection for a while has definitely affected my opinion, as you can see from the attached screenshot. That's not even funny anymore and I've been seeing it a lot lately. Not saying that it's a typical situation, but it's not unheard of either.)

[Manfred62]

It's a bit late to suggest this, but I'd like to seriously question if we really need Arimo.

I agree. Why not simply stay with Arial, Helvetica?

Maybe we should do a poll? What's more important?

• good performance and cross browser/OS compatibility
• nice (visual) typography

[Martijn Geerts]

I have the same conflict right now for my current project. HTML5 boilerplate suggest just sticking to sans-serif, not specifying a font at all. The vision behind it is simple but clever. (maybe I go this route)

Not assigning a font and let the system decide what font renders best. 

It's logical because the people who build the operating system did lot of font research.

[diogo]

Martijn, I actually prefer that to the helvetica/arial stack

[SiNNuT]

I must agree. I'm not too fond of Arimo, or any webfont for that matter, used in a utility tool such as a CMS. Why bother? Just setting serif seems fine to me.

[wayne]

I think the same way. It was interesting to see which problems can arise by the use of font face, but it's not worth the effort for a backend.

A CMS backend is just supposed to be a management platform and nothing more.

Just focus on elements for the admin theme that make it more usable and clearer.

Maybe it's best to follow Martijn's suggestion, especially if the theme is responsive.

In my eyes a webfont is only useful for serious design purposes or to get the same font appearance across different platforms and browsers. But as we learned, this isn't possible because of those different rendering techniques.

Besides here is a font stack of similar fonts from best to worst:

font-family: "Helvetica Neue", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;

It's useless if those fonts are the preconfigured sans-serif fonts anyway.

[3fingers]

If the problem happens when using the admin panel on mobile (and actually almost 1Mb of custom fonts looks too much to load for me too...) why not simply use media queries to disable custom fonts on mobile?

With Sass:

$mobile: 320px; // or tablet screen sizes too

  @media screen and (max-width: $mobile) {
  font-family: "Helvetica, Arial, sans-serif";
  };

// Then Arimo for other resolutions

[teppo]

@3fingers: good plan, except that the problem is more about mobile connection than mobile devices (whatever those are these days.) In my use case, for an example, the device is laptop with pretty good screen size.

Screen size has nothing to do with bandwidth, so unless you're waiting for bandwidth media queries, you're out of luck with that approach

(Oh, and by the way: above syntax, perhaps because it's taken out of context, looks like it'd still load the fonts, effectively making this whole thing useless. This could be prevented by mobile first approach, for an example, but that won't remove the bigger issue, so it's really not worth it.)

[3fingers]

@teppo, you're right, it's kinda useless if bandwidth plays major role here, and yes...that snippets only works with a mobile-first approach (even if there's a workaround mentioned in this article, but this will lead the thread OT).

Only "solution" that comes in my mind right now is to manually declare system's fonts inside the css of Pw core, but of course this is a hack.

[Manfred62]

In the latest dev the Arimo font is already commented out. There's only Arial, sans-serif.

[Joss]

Add New button problem

Got this slight issue with the add new button.

I have a parent template that can have 4 different child templates.

The conditions for the add new button are met.

However, when I use the add new button and select one of the templates, the resulting form asks me to choose from one of the four templates, listing them in the same order each time, rather than restricting me to the one template, or at least defaulting the select to that one template.

Any thoughts?

EDIT: 

It really needs to carry the template->name across, but that also means that the new page form needs to be looking for it, which I suppose at the moment it doesn't - it just takes the template info from the parent.

[Zahari M.]

Hi Guys

Just an alternative point of view...

I have a client that manages his ProcessWire website from his iPhone. I'm sure there are other people who will be managing their sites from some mobile device or another. The fact that the admin theme is responsive would mean that we need to be making steps towards catering to an increasing number of clients who wish to do more admin work / content creation via their mobile devices.

Given that more and more clients will be using a mobile device, it becomes increasingly important to ensure that our sites work well on these devices. And look consistent between them too.

If you go to WebINK, they say that it's no longer safe to assume that the traditional web safe font stack offers you protection as there are mobile devices out there that simply do not have the traditional web safe fonts such as Georgia, Times New Roman etc.

So I think what is most important is to design an admin theme around a web font that has line height and size characteristics that match the traditional popular "desktop available" fonts.

I personally think that Arimo is a pretty good choice. The reason is that it matches Arial incredibly closely. Nearly all computers will have Arial. I have found that this is a very legible font at small sizes, obviouly is optimized to work great on windows machines. And so if you can design and get the theme to work well on Arimo, you can switch this font out later and insert in many other fonts that have similar typographical charateristics and have to do little to no extra work setting things up.

And by switching to normal font weight for larger font sizes, I have managed to make the ProcessWire admin end look very presentable in Arial / Arimo.

So I have styled and sized and line heighted everything based on Arimo / Arial and got everything relatively pleasing in ratio to each other.... I know that I have a font - webfont combination that will work and work well on a large number of devices and thus offer clients a "well adjusted" admin interface that works well and consistently on a really large number of computer and mobile devices.

But, as WebINK alludes to, dont assume everything will have Arial on it. In cases where the device doesnt, we have the webfont Arimo to the rescue. And it is so very very close to Arial in terms of size spacing line height etc.

And so, I'm really happy with Arimo being included. Admitedly in the current implementation in the admin theme, I think Arimo is not shown to its best advantage. But I have managed to get it to work well, in my opinion and for my tastes

Here's a screen shot of the modules view and what the drop down looks like using Arimo in my work in progress Majini Admin theme. If I switch the font to Arial, the two are alomost almost indistinguishable.

 

So to me one key aspect to selecting a default font is that it must have a "popular" desktop version appearing on many devices, and a webfont version that is free that matches it's typographic characteristics.

So I do see some good merits in seeing Arimo. The only thing I would do after adjusting things is swap the order and offer Arial first, followed by Arimo, then sans-serif.

One other reason I like Arial / Arimo as a base to design upon is that when it comes to getting webfonts, Myfonts allow you to configure a few things when you download the webfonts that you bought. So when you download them, you can get them to match your webfonts line-height to a small selection of common "Microsoft" fonts, Arial being one of the few on that list.

The reason I place a lot of emphasis on line-height is that some classy / heritage fonts like Futura have very different size and line-height characteristics such that they require judicious use of css to get them to match up to things.

Still, I readily concede that many of you may really dislike Arial and Arimo and that the above is all irrelevant.

Just my  2 cents..

Cheers Guys!

[Zahari M.]

Hi Guys!

Festive mood is definitely in the air! They are playing Chirstmas songs everywhere in all the shopping centres here in Kuala Lumpur!

Anyways, just want to share with you my thoughts on the current admin theme here. Quite simply put I don't like it at all and I think it's visually a step back from the old theme.

Now, I would like to add that I truly believe that 99% of you here are incredibly more capable here than I am. I really struggle with all of this web stuff. It just does not come naturally to me as I am more from an engineering / electronics / audio / automotive background. So I'm more used to spanners and resistors and turntables.... not coding!

Having said that, I use my Mac extensively and have purchased quite a few programs for it and so I would say that in a month, I would come across 30 different computing software interfaces. And before settling on ProcessWire, I had looked at and installed many many CMS's over many years. So, whilst I may not be technically competent to be commenting, I have enough first hand user experience to confidently say to myself that the current theme here doesn't inspire me at all.

Perhaps it's just me, but when I look at tables for example, I like to see that all the cells have borders. When I see borders in some places but not others, I begin to feel that somethings broken. The line height used in the table field is excessive making it less easy to read and further reinforces the point.

One thing I note that is prominent in this theme is that to create seperation between zones, strongly contrasting colors are engaged. An example would be the radiused nav tabs in the mast head. When you have such high contrasts like this, any 1px borders used become very difficult to see. Sometimes these borders end up creating a sense of blur between the two contrasting color regions and you can end up with a fuzzy look! The end result is a somewhat undefined nav setup to my eyes at least. Elsewhere in the theme these neighbouring contrasty colors dont look too good either lacking in definition. And by using the philosophy of incorporating strong color regions, what can be a lovely pair of colors on the designers screen can end up to be a really cheesy color scheme in front of thousands of end users around the world due to a world full of uncalibrated screens. On the old admin theme, the magenta bar on black that signified which nav item you were currently on or hovering over was very sharp and precise and covered the whole vertical region. So to me the current arrangement is a step back.

Then there is the issue of the drop down. I may be too fussy here, but the resultant dropdown styling just doesnt match the character of the masthead nav tabs. And so it's these little things like this and the "incomplete" table stylings that all add up as you traverse the admin site and make this theme appear incoherent and unpolished and makes me feel like it's a little broken.

My next issue is that the fields / panels should not be in one continuous vertical stream. They should have some spacing between them. The styling of the text, headers, content panels etc to me is also in need of some improvement as when you click edit on a page, you are smacked with this massive wall of text. To the uninitiated, they wouldn't know what is what. What is needed here is to carefully select colors, font sizes, spacing etc to try and do two things subconsciously. One, signify at a glance that there are various unique field sets on the page and make it easy to differentiate them instantly. Two, once the fielset has been identified, help funnel ones eyes into the input fields so that they can focus readily on the cursor and be able to type things in and are not bothered or distracted by any surrounding text / colors / contrasts etc.

I could go on. But I'll stop here. My comments here are not to criticize. Please don't take them as crticisms as they're not meant to be. I say again, all of you are way more skilled and knowledgable and capable then I will ever be in web dev. And I can see the incredible amount of work that you guys and Ryan have put into this.

So why am I bringing this up? Well, for one simple reason. ProcessWire the tool is world class. Ryans world class. You guys the community are world class. But this theme as it stands isn't world class... and I myself would like it to be world class too.

Now, perhaps I am the only one who thinks that this theme, as it currently stands, sucks. There. I've said it! Maybe the rest of you and the world thinks its world class. Then that's ok. I apologise if my comments offend anyone. But I do believe that it's very important and would like to not go with popular opinion and instead truly speak my mind and try and make a difference. I'm extremely happy accepting that I am the one who is lacking here and am unable to appreciate what many people appreciate as a very fine theme.

Anyways, talk is cheap. And so with my admittedly limited abilities, I have tried taking this theme in a very different aesthetic direction. Perhaps some things in it might interest you. Perhaps not. I think many of you might find it very dull, boring, uninspiring. I've spent a lot of time in WordPress admin, and so I lean more towards their styistic conventions and colors rather then the ProcessWire conventions and colors.

The idea here was to create a very different starting point for ProseeWire admin themes. It is of course my hope to see the current admin theme converge towards these admitedly Wordpress inspired stylistic conventions and directions. Wishful thinking of course! But no harm right?

 

Anyways, it's fast approaching Christmas guys. It's been a great year and I would like to wish all you fabulous guys a very merry christmas and a happy new year! I've learnt so much from many of you and would like to thank many of the regulr guys who have helped me out here.

Cheers guys!

[WillyC]

festisve sasson to all from willyc

i is work.on theme two bassed on majani butt many better

earely preview butt two moister.hunger here u.is

looks.and learn 

[diogo]

[Wanze]

I'm crying   

[Joss]

Cant wait to see how he does attachments and thumbnails .... paper clip? Drawing pin?

[Zahari M.]

Hi Guys

If these are the kind of responses that I get, then I'm the one who is obviously living in a world of my own.

No problems. I shall just be quiet and cease to offer any further suggestions to the ProcessWire community as to what i think of things. Little point when your met with ridicule by fellow members when trying to offer possible improvements.

Apologies for speaking my mind out and possibly having offended some of you.

Fear not. It won't be happening again.

Still, merry christmas and a happy new year to all of you guys.

[Macrura]

@zahari - I don't believe any offense was intended .. I read your posts and found them thoughtful and productive.

WillyC is a staple of mirth on this forum....