Howdy, UI group. This Friday brings you version 1.3 of MP6, the WordPress birthday weekend edition. This iteration is largely focused on responsive and RTL improvements, as well as bug fixes. Here’s what’s new:
- First pass at some basic CSS transitions on link hovers, etc.
- First pass at MP6 styling on post format picker.
- Mobile: Adjusted theme customizer margins.
- Mobile: Changed tablet breakpoint from 768px to 782px to match core.
- Mobile: Fixed word-wrap issue on custom post types .widefat table headers and footers.
- Mobile: Menubar now scrolls independently of the main column, so menu links are always visible even if you’re at the bottom of a long page.
- Mobile: Better performance when scrolling in the admin.
- Mobile: It’s now easier to dismiss dropdowns on touch devices.*
- RTL: Corrected positioning of post-format-options.
- RTL: Fixed tagchecklist position.
- RTL: First stab at mobile style conversion for RTL.
- RTL: First stab at admin-bar positioning.
*There’s a known issue with the positioning of the New and Account dropdowns on mobile webkit browsers. We’ll have a fix in trunk as soon as we can (free WordPress blogs to anyone who has insight on a solution!)
This week includes contributions from Joen Asmussen, Michael Erlewine (mitcho), Till Krüss, Andy Peatling, and myself. As always our thanks go to everyone who’s contributed by reporting bugs, offering suggestions, and testing it on your sites. If you’ve reported an issue here that hasn’t been resolved yet, rest assured it’s on our list and we’ll get on it soon.
I’ll be out part of next week, so no IRC chat on Monday. We’ll continue to work on refining the responsive experience and RTL issues and stomping out whatever bugs you guys find.
Dean Robinson 1:16 am on May 26, 2013 Permalink | Log in to Reply
hopefully the formatting below works…
I had a bit of a play around this morning and my initial impression was that “position:fixed” is behaving a little more like “position:absolute” on mobile safari and the “position:relative” on its parent elements is causing the odd positioning.
So, I’ve added this around line 125 in admin-bar.css (rules likely need some clean-up and definitely some better testing) to reset the position on the parent elements
Before: http://cl.ly/PDqy
After: http://cl.ly/PD1c and http://cl.ly/PD4Z
However, this results in the update/comments/new icons aligning left instead of right.
I was able to trick them back into place using this, it works, but the negative margins make me nervous.
Result of above hack: http://cl.ly/PDXK
Disclaimer: No idea if this would break things outside of mobile webkit (it was still ok in desktop firefox and safari), but hopefully it helps point anybody smarter than me in the right direction toward a solid solution.
Matt Thomas 3:33 pm on May 29, 2013 Permalink | Log in to Reply
Thanks for taking a look at this, Dean (sorry you were held in moderation; I’ve been out for a few days). We’d also figured out that setting the parents to position: static fixed the dropdown issue but I hadn’t yet figured out a workaround for positioning those icons. Negative margins do make me a bit nervous as well, though if we limit the number of items that are visible in the toolbar on mobile browsers (hiding links that plugins add to the toolbar) that might be a fine solution. Or, as you mentioned, it may at least point us in the direction of a better solution.
JakePT 3:52 am on May 27, 2013 Permalink | Log in to Reply
It looks like the admin table issue I raised in the last post is partly fixed. The rows no longer get extremely tall, however apart from the ttile column they are still very narrow:
Matt Thomas 4:40 pm on May 29, 2013 Permalink | Log in to Reply
Thanks; we’ll take a look.