Page MenuHomePhabricator

In Vector, sidebar items and headings are not aligned well
Closed, ResolvedPublic

Description

After removing left indentation of the sidebar items in T67444, there is two-pixel difference in horizontal position of items in top unnamed section and items in other sections, and one-pixel difference in horizontal position of headings and their items.

https://en.wikipedia.org/wiki/Main_Page?uselang=en&useskin=vector

Reproduces in Chrome, Firefox.

All perfectionists in the world cry tears of blood. WMF Design team should probably too, given their section on alignment :-)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 22 2017, 3:25 AM

Speaking from the viewpoint of design, I'm also not sure that after indentation removal, the direction of gradient in the divider line from the center to the edges is well-grounded. For my design taste, as now everything in the sidebar is aligned along one line in the left (after pixel differences get removed), the direction from the left to the right is more consistent.

Would be interesting to hear from somebody who designed Vector or the sidebar particularly (please add them if you know who they are).

BeforeNow

All perfectionists in the world cry tears of blood. WMF Design team should probably too, given their section on alignment :-)

@Volker_E has been annoying me with a lot of off-by-one-pixel fixes lately, let's see if we can get him to look into this one ;)

Would be interesting to hear from somebody who designed Vector or the sidebar particularly (please add them if you know who they are).

I think that would be @TrevorParscal. I'm not sure what you mean in your last comment though? What gradient?

Thanks for invitations.

I'm not sure what you mean in your last comment though? What gradient?

Oh sorry, I'm talking about the divider lines under the headings (edited).

I'd be in favour of dropping the gradient altogether, as we are moving towards more flat design.

Change 360898 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/Vector@master] Use same left margin (0.5em/8px) for all sidebar items

https://gerrit.wikimedia.org/r/360898

Thanks @Esanders, your newly calculated values look great for me.

Change 360898 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use same left margin (0.5em/8px) for all sidebar items

https://gerrit.wikimedia.org/r/360898

matmarex closed this task as Resolved.Jun 23 2017, 3:08 PM
matmarex assigned this task to Esanders.
matmarex removed a project: Patch-For-Review.