Dashboard and write screen columns (with @media)

[georgestephanis]

Determining the number of columns that are present in landscape view versus portrait view. This would need to be tested on a per device basis to determine the optimum number of columns. In WP 3.3 this effect was generated via JS. We should be able to yield better performance by handling this via CSS.

Also -- should this be restricted only to touch-based tablet/phone interfaces, or should @media queries be used to extend this functionality to narrow browser windows as well for the desktop version?

[thezman84]

Patch to remove inline styles from dashboard columns

[thezman84]

This is my first ever patch, so I apologize in advance if it doesn't follow procedure to the "t"

This is a patch to remove the inline styles from the dashboard of the admin. This will be very helpful for correctly moving forward with the responsive CSS control. There is one small problem though. The JavaScript that controls the adding and removing of columns needs some attention because it still wants to write inline styles to the page.

[nacin]

This is my first ever patch, so I apologize in advance if it doesn't follow procedure to the "t"

Looks good, though in the future name your patch *.diff or *.patch so Trac will highlight it.

[thezman84]

Replying to nacin:

Looks good, though in the future name your patch *.diff or *.patch so Trac will highlight it.

Duly noted. Thanks Mr. Nacin.

[thezman84]

No change in patch. Just uploading .patch file correctly.

[thezman84]

Fix for the minified CSS file (wp-admin.css)

[thezman84]

These are revisions for the responsive admin ui. This covers sizing within the "Edit Post" screen.

[thezman84]

Responsive css styles minified and added back int wp-admin.css

[azaozz]

20015-6.patch makes it possible to define the number of columns for postboxes by CSS only, then uses that to add several @media rules targeting smaller screens. To be able to do that there are couple of blocks and structural CSS changes on the edit post, edit link and edit comment screens.

Changes:

• Dashboard: columns switch to two at 1200px (this may be a bit wide but three columns make the postboxes pretty narrow below 1200).
• Dashboard: columns switch to one at 768px (most tablets portrait mode).
• Dashboard and edit screens: when switching to two columns, the radio buttons for 3 and 4 are hidden, when switched to one column the Screen Layout is hidden completely (no point to show settings that would break the screen).
• Edit screens: columns switch to one at 1024px (most tablets landscape mode).
• Everywhere: the admin menu "folds" at 900px (up from 800px).

CSS changes on the post, link and comment write/edit screens:

• Outputs the do_action('submitpost_box'); and do_meta_boxes($post_type, 'side', $post); below the main page content, same as when the user had selected one column before.
• Wraps the do_meta_boxes() calls in DIVs making them same as on the dashboard.
• Removes most of the tweaks to #submitdiv and #categorydiv when displayed under the editor/main content. Before they were inconsistent.
• Adds a DIV wrapper inside of #linkcategorydiv same as in #categorydiv so it can be targeted with the same styles (it's back-compat as previous styles target the ID and will overwrite this).
• Standardizes the tabs display in #categorydiv and #linkcategorydiv to be the same regardless of position (center or left column).
• Also removed some duplicate styles from wp-admin.css. Still finding dupes there...

Note: will add RTL after this is finalized.

[azaozz]

In [20272]:

Responsive columns on the dashboard and write screens, first run, see #20015

[nacin]

Considering the major, major problems we had with responsive columns in previous releases, [20272] should not have dropped on the eve of a beta prior to review by a second committer. Too much churn here.

[nacin]

[20272] looks good at a further glance. I imagine we may end up finding some styling issues but they will probably be minor and will present themselves soon.

[azaozz]

Replying to nacin:

I imagine we may end up finding some styling issues but they will probably be minor and will present themselves soon.

Yes, hoping for the same. That was one of the reasons to hurry up with the commit as we are pretty close to freeze.

[azaozz]

In [20293]:

Don't show dashed border on empty postbox containers under the editor, see #20015

[kelworth]

Hi, I'm new to trac and I'm not sure of the etiquette, but I was referred over here by macmanx at ​http://en.forums.wordpress.com/ to raise my concerns.

This "enhancement" was applied suddenly to my free account, kelworthfiles.wordpress.com, and the change makes it MUCH harder to compose new blog posts on my windows netbook computer. The netbook has a relatively narrow screen, but still it is wide enough that I can work well with 2 columns, and in fact this is essential to cross-reference between 2 modules on the 'Add New Post' screen, because it is also very short, so I cannot refer to the different modules I need vertically.

However, with this 'enhancement' on 3.4, I suddenly have no control over column layout. Unless I use a monitor with at least 1024 wide resolution, I am locked into a nearly impossible to use 1 column layout for new posts or editing existing posts.

Responsiveness to device capabilities and prompting an optimum layout is a worthy goal to strive for. But part of what makes wordpress great is that it doesn't lock you in to what the designers think is the optimum way to use it - wordpress gives you options. This enhancement, however, goes against the spirit of wordpress - it closes down my options because of what the designer thought was best. Encourage users on small screens to use one-column layout, by all means - but still give them a chance to switch it back!

[jane]

Hi @kelworth. Sorry about that. Trunk is the development branch or .org core, and that change should not have merged to .com. That said, this is not the place to report wordpress.com issues. Reporting it to macmanx in the .com forums was the right thing to do and he should have gotten in touch with the .com people who handle merging code.

[azaozz]

In [20335]:

Switch to one column on the edit/write screens at 850px (the editor becomes unusable at narrower screens and two columns), see #20015

[nacin]

I do agree with kelworth's sentiments though — one column should only be forced at a point where the editor just isn't usable. For the visual editor, it is about 836px. (For the HTML editor, it's quite a bit narrower, as we're simply wrapping a textarea and the quicktags.) Therefore I like [20335].

That the boxes in the sidebar appear immediately below the editor is a very nice touch. The publish box looks quite nice immediately below the editor and it doesn't make sense to bury it.

[azaozz]

Replying to jane:

This is actually my bad. Should have chosen better/smaller width for triggering the switch to one column in the "first run".

Replying to nacin:

I do agree with kelworth's sentiments though — one column should only be forced at a point where the editor just isn't usable.

Yes, I agree with it too. This should have been the "rule of thumb" when choosing when to trigger column switching.

[azaozz]

In [20346]:

Make the layout of the tables on edit link screen "liquid" so they can be shown on the side, see #20015

[azaozz]

In [20347]:

RTL for the responsive columns, see #20015

[thezman84]

20015-7.patch is a small patch to lengthen the "screen-per-page" input box to prevent cutoff in multiple browsers (namely Chrome). In the process of changing the size of the input, I noticed several duplicated styles and removed them. Changes were also reflected in the -rtl file.

[SergeyBiryukov]

Replying to thezman84:

In the process of changing the size of the input, I noticed several duplicated styles and removed them.

/* positioning etc. */ comment in wp-admin-rtl.dev.css should probably be removed as well.

[thezman84]

Replying to SergeyBiryukov:

/* positioning etc. */ comment in wp-admin-rtl.dev.css should probably be removed as well.

Excellent point. Thought I grabbed that too, but I guess that extra "ctrl-z" put it back before I resaved.

[ocean90]

Related: #20467

[azaozz]

In [20570]:

Dashboard and write screen columns: remove unneeded class from the .wrap div on Write/Edit screens, see #20015

[azaozz]

In [20571]:

Lengthen the "screen-per-page" input box to prevent cutoff caused by setting type="number", remove some duplicate css, props thezman84, see #20015

[SergeyBiryukov]

Related: #20526

[azaozz]

Only thing remaining here seems to be to tweak the widths at which it switches to less columns, if needed.

[nacin]

Only thing remaining here seems to be to tweak the widths at which it switches to less columns, if needed.

So, two things. One, it is currently at 850px. It appears to me that 836px is the lowest that works at two columns. We should probably go with that. Two, the HTML editor does work at much narrower widths. Not sure what we should do about that.

[azaozz]

Seems like it would need to go a bit wider than 850, perhaps 880 as there's one more button in the visual editor in RTL.

Also FF and Chrome seem to disagree on when to switch to one column... Seems Chrome is subtracting the width of the scrollbar, FF doesn't.

[azaozz]

Seem to work well, if there are bugs, please open new tickets.