Opened 13 years ago
Closed 13 years ago
#19386 closed task (blessed) (fixed)
Optimise post update screen for 960px wide
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (25)
#1
@
13 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
@
13 years ago
FWIW, this looks pretty cramped on my not-that-big 1440x900 screen. Why can't it breathe with a wider screen?
#3
@
13 years ago
- Owner set to koopersmith
- Resolution set to fixed
- Status changed from new to closed
In [19479]:
#4
follow-up:
↓ 5
@
13 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
@
13 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
@
13 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:
- Normal-ish width: http://cl.ly/3v3z3H2f1b1P171n380o
- Wide: http://cl.ly/392G2j1c1T00350e2w2T
Keeping the staggering/overlap and also being fluid proved to be difficult, at least for me.
#7
@
13 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:
↓ 9
@
13 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:
↓ 10
@
13 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:
↓ 11
@
13 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
@
13 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
#12
follow-up:
↓ 13
@
13 years ago
19386.staggered-semifluid.2.diff is the previous patch with a little fix for the tabs.
#13
in reply to:
↑ 12
@
13 years ago
- Keywords commit added
19386.staggered-semifluid.3.diff looks good to me in Chrome, Firefox, Safari, and IE8 and 9.
#14
@
13 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
@
13 years ago
Let's try also making the class names more semantic. Perhaps:
.right-two-thirds -> .screenshot-features .left-thirds -> .text-features
#16
@
13 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.
optimizes percentage widths for 960px wide screen