Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#19386 closed task (blessed) (fixed)

Optimise post update screen for 960px wide

Reported by: chexee's profile chexee Owned by: koopersmith's profile koopersmith
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: UI Keywords: has-patch commit
Focuses: Cc:

Description

Make and optimise the post-update screen to be a hard 960px wide

Attachments (8)

19386.960wide.patch (1.7 KB) - added by chexee 12 years ago.
optimizes percentage widths for 960px wide screen
coediting.png (2.1 KB) - added by chexee 12 years ago.
Updates coediting screenshot to prevent resizing
19386.960wide.2.patch (665 bytes) - added by chexee 12 years ago.
Optimises RTL CSS for 960px wide
19386.semifluid.diff (4.8 KB) - added by helenyhou 12 years ago.
19386.staggered-semifluid.diff (6.1 KB) - added by helenyhou 12 years ago.
19386.staggered-semifluid.2.diff (6.3 KB) - added by helenyhou 12 years ago.
With tab alignment
19386.staggered-semifluid.3.diff (6.4 KB) - added by helenyhou 12 years ago.
Show the box shadows
19386.staggered-semifluid.4.diff (8.3 KB) - added by helenyhou 12 years ago.
Fixes, class names, and RTL, oh my

Download all attachments as: .zip

Change History (25)

@chexee
12 years ago

optimizes percentage widths for 960px wide screen

@chexee
12 years ago

Updates coediting screenshot to prevent resizing

@chexee
12 years ago

Optimises RTL CSS for 960px wide

#1 @nacin
12 years ago

  • Component changed from General to UI
  • Keywords has-patch commit added
  • Milestone changed from Awaiting Review to 3.3
  • Type changed from defect (bug) to task (blessed)
  • Version set to 3.3

#2 @nacin
12 years ago

FWIW, this looks pretty cramped on my not-that-big 1440x900 screen. Why can't it breathe with a wider screen?

#3 @koopersmith
12 years ago

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

In [19479]:

Optimize about screen for 960px width. props chexee, fixes #19386.

#4 follow-up: @nacin
12 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This pushes credits.php to two columns.

One way to fix it: Reduce padding between individuals.

Other way to fix it: Use moar of the screen. Why the 960px restriction? It looked quite fine in semi-fluid state.

#5 in reply to: ↑ 4 @jane
12 years ago

Replying to nacin:

Why the 960px restriction? It looked quite fine in semi-fluid state.

The issue that was meant to be addressed was that the About WordPress (post-update) screen was fixed too wide and required horizontal scrolling. Had told Chelsea that screen didn't need to be responsive, but it wound up not being the same as the base width for all the admin screens, which are all generally fluid-to-the-right based on 960 grid by default, not change-layout-and-recrop-graphics-based-on-size-responsive. The reason I'd said to skip responsive was that it was recropping the images so you couldn't actually see the feature being demonstrated (like no flyouts in the flyout graphic). I think there was a misunderstanding about where to land. If you want to jump in here, that was my request: that we not go responsive on this screen because it was messing with the images. Doing basic grid of 960 but with fluid-to-the-right when wider would be fine.

#6 @helenyhou
12 years ago

19386.semifluid.diff puts the images in the Dashboard Design section on the left and makes the layout fluid up until a max-width for readability. Text seems too long (tall), but seems balanced with the sections above and below. Also, RTL. CSS may need some more refining/cleanup if it goes this direction.

Screenshots:

Keeping the staggering/overlap and also being fluid proved to be difficult, at least for me.

#7 @helenyhou
12 years ago

19386.staggered-semifluid.diff is a stab at keeping it staggered but also being a little fluid. Text wraps underneath on the bottom right item at narrower widths, and has some funny behavior in IE7 at wider widths, but otherwise works. HTML order and CSS class names don't seem ideal to me.

#8 follow-up: @helenyhou
12 years ago

Something I noticed while working on the screen and meant to add to my last comment - the active tab seems to be one pixel shorter than the rest. Is this on purpose?

#9 in reply to: ↑ 8 ; follow-up: @chexee
12 years ago

Replying to helenyhou:

Something I noticed while working on the screen and meant to add to my last comment - the active tab seems to be one pixel shorter than the rest. Is this on purpose?

It should be even, but I'm seeing it as even, but when I zoom in with Chrome, it shows as uneven.

Normal: http://chx.mx//ep/ymqa4nr8gg4cc.png
Zoomed: http://chx.mx//dl/6gxj6vw5s8sk8.png

Zooming alignment is hard to enforce, but if its showing up uneven in another browser maybe we're taking a weird approach?

#10 in reply to: ↑ 9 ; follow-up: @helenyhou
12 years ago

Replying to chexee:

It should be even, but I'm seeing it as even, but when I zoom in with Chrome, it shows as uneven.

It's uneven in Firefox (Mac): http://cl.ly/3N2s0a2Q1O231r2P0W1G

Also saw it as uneven in IE7-9 and Chrome on Windows last night while testing. vertical-align on the tabs fixed it for me. Can either roll that into this patch or make a new ticket/patch.

#11 in reply to: ↑ 10 @chexee
12 years ago

  • Keywords commit removed

Replying to helenyhou:

Replying to chexee:

It should be even, but I'm seeing it as even, but when I zoom in with Chrome, it shows as uneven.

It's uneven in Firefox (Mac): http://cl.ly/3N2s0a2Q1O231r2P0W1G

Also saw it as uneven in IE7-9 and Chrome on Windows last night while testing. vertical-align on the tabs fixed it for me. Can either roll that into this patch or make a new ticket/patch.

Go ahead and roll it into a patch and I'll do a bit of testing :) Taking a look at your previous patch now

@helenyhou
12 years ago

With tab alignment

#12 follow-up: @helenyhou
12 years ago

19386.staggered-semifluid.2.diff is the previous patch with a little fix for the tabs.

@helenyhou
12 years ago

Show the box shadows

#13 in reply to: ↑ 12 @chexee
12 years ago

  • Keywords commit added

19386.staggered-semifluid.3.diff looks good to me in Chrome, Firefox, Safari, and IE8 and 9.

#14 @nacin
12 years ago

Looks great. Suggestion 1:

.about-wrap .feature-section.images-stagger-right {
    position: relative;
    max-width: 1050px;
}

Prevents text lines from getting too terribly long.

Suggestion 2:

.about-wrap .feature-section.right-two-thirds .angled-right p {
	margin-left: 290px;
}

This is based on 260px image + 2em right margin on .about-wrap .feature-section .angled-right img. Probably better to convert that margin to straight pixels unless there's a reason otherwise. Prevents the final line from wrapping: http://cl.ly/1c1t3z3V090v2L0Z131m. Not too worrisome, though.

#15 @chexee
12 years ago

Let's try also making the class names more semantic. Perhaps:

.right-two-thirds -> .screenshot-features
.left-thirds -> .text-features

@helenyhou
12 years ago

Fixes, class names, and RTL, oh my

#16 @helenyhou
12 years ago

19386.staggered-semifluid.4.diff puts a max-width on the whole .about-wrap (looked better on the other tabs, too) and adds the margin to prevent wrapping. Better class names than my math ones. Also, better RTL. Except for IE7, which chews RTL up a little depending on the window width. IE-specific things discussed with chexee are in there as well.

#17 @koopersmith
12 years ago

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

In [19495]:

Optimize about pages for a lovely 960px semi-fluid grid. props helenyhou, fixes #19386.

Note: See TracTickets for help on using tickets.