WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#20015 closed enhancement (fixed)

Dashboard and write screen columns (with @media)

Reported by: georgestephanis Owned by:
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.3.1
Component: UI Keywords: tableteers ux-feedback
Focuses: Cc:

Description

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?

Attachments (11)

dashboard_columns.1.20015 (2.4 KB) - added by thezman84 2 years ago.
Patch to remove inline styles from dashboard columns
dashboard_columns.1.20015.patch (2.4 KB) - added by thezman84 2 years ago.
No change in patch. Just uploading .patch file correctly.
dashboard_columns.2.20015.patch (206.7 KB) - added by thezman84 2 years ago.
Fix for the minified CSS file (wp-admin.css)
responsive.1.20015.patch (2.9 KB) - added by thezman84 2 years ago.
These are revisions for the responsive admin ui. This covers sizing within the "Edit Post" screen.
responsive.2.20015.patch (206.9 KB) - added by thezman84 2 years ago.
Responsive css styles minified and added back int wp-admin.css
20015-6.patch (32.7 KB) - added by azaozz 2 years ago.
20015-7.patch (1.4 KB) - added by thezman84 2 years ago.
FF11.jpg (67.8 KB) - added by azaozz 2 years ago.
FF11-rtl.jpg (66.5 KB) - added by azaozz 2 years ago.
Chrome.jpg (63.1 KB) - added by azaozz 2 years ago.
Chrome-rtl.jpg (63.5 KB) - added by azaozz 2 years ago.

Download all attachments as: .zip

Change History (39)

comment:1 nacin2 years ago

  • Component changed from General to UI
  • Milestone changed from Awaiting Review to 3.4

thezman842 years ago

Patch to remove inline styles from dashboard columns

comment:2 thezman842 years ago

  • Cc thezman84 added

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.

comment:3 follow-up: nacin2 years ago

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.

comment:4 in reply to: ↑ 3 thezman842 years ago

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.

thezman842 years ago

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

thezman842 years ago

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

thezman842 years ago

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

thezman842 years ago

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

azaozz2 years ago

comment:5 azaozz2 years ago

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.

Last edited 2 years ago by azaozz (previous) (diff)

comment:6 azaozz2 years ago

In [20272]:

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

comment:7 nacin2 years ago

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.

comment:8 follow-up: nacin2 years ago

[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.

comment:9 in reply to: ↑ 8 azaozz2 years ago

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.

comment:10 azaozz2 years ago

In [20293]:

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

comment:11 kelworth2 years ago

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!

comment:12 jane2 years ago

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.

comment:13 azaozz2 years ago

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

comment:14 follow-up: nacin2 years ago

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.

comment:15 in reply to: ↑ 14 azaozz2 years ago

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.

comment:16 azaozz2 years ago

In [20346]:

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

comment:17 azaozz2 years ago

In [20347]:

RTL for the responsive columns, see #20015

thezman842 years ago

comment:18 follow-up: thezman842 years ago

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.

comment:19 in reply to: ↑ 18 ; follow-up: SergeyBiryukov2 years ago

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.

comment:20 in reply to: ↑ 19 thezman842 years ago

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.

comment:21 ocean902 years ago

Related: #20467

comment:22 azaozz2 years ago

In [20570]:

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

comment:23 azaozz2 years ago

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

comment:25 azaozz2 years ago

  • Keywords needs-patch ui-feedback removed

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

comment:26 nacin2 years ago

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.

azaozz2 years ago

azaozz2 years ago

azaozz2 years ago

azaozz2 years ago

comment:27 azaozz2 years ago

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...



Version 0, edited 2 years ago by azaozz (next)

comment:28 azaozz2 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.