WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#34214 closed defect (bug) (fixed)

Navigation tabs styling inconsistencies

Reported by: afercia Owned by: wonderboymusic
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

The navigation "tabs" used in the admin have some minor styling inconsistencies, e.g. about spacing between tabs:

the About screen:

https://cldup.com/_uE6WFcnhg.png

the Freedoms screen (same for the Credits screen):

https://cldup.com/zk6teYesaN.png

the Appearance > Menus screen:

https://cldup.com/-WSNBNtNZ0.png

Since the "tabs" are set to be displayed as inline-block, spaces, tabs, and new lines in the markup do matter. To style them consistently the markup should be paired first. The font size on the container affects the spacing between tabs too.
Not sure why the initial left padding should be different in the "About & Co." screens and in the menu screen, I'd say to pair it.

When these "tabs" are used as "real tabs" (whatever that means), for example as a well known SEO-related plugin does, there's a 1 pixel "jump" when switching tabs. To actually see this "jump" you should install the plugin and see it "in action". It's hard to catch this in a screenshot by the way you may notice in the screenshots below there's a 1 pixel difference (and the bottom border is missing) while clicking on a tab:

https://cldup.com/i0GJOsBK8E.png

https://cldup.com/w16GeVxZ5i.png

Finally, designers and UI people may want to have a look at how the tabs look like on small screens: they're basically changed in a sort of "buttons" and that makes sense, wondering if we should try to find some new design ideas :)

https://cldup.com/IplL02nser.png

Attachments (3)

34214.patch (4.2 KB) - added by afercia 4 years ago.
34214.2.patch (5.2 KB) - added by afercia 4 years ago.
34214.3.patch (1.7 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (16)

#1 @paulwilde
4 years ago

The about screen in particular seems to have some CSS inside of about.css that changes the styling. Removing that styling will revert the tabs to look exactly like those on the Menus screen.

Last edited 4 years ago by paulwilde (previous) (diff)

@afercia
4 years ago

#2 @afercia
4 years ago

First pass. The tabs spacing is now set to the natural spacing given by inline elements + 3 pixels. This is completely arbitrary of course and any design/UI feedback is very welcome. The 1 pixel "jump" should be fixed.

This ticket was mentioned in Slack in #core by afercia. View the logs.


4 years ago

#4 @afercia
4 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.4

Setting milestone to 4.4 since it touches the About page :)

#5 @wonderboymusic
4 years ago

  • Keywords needs-refresh added

Patch is blowing up

@afercia
4 years ago

#6 @afercia
4 years ago

  • Keywords needs-refresh removed

Refreshed patch. Tried also to simplify things a bit and normalize white space between inline-block elements. About the white space issue, worth noting there's no optimal, clean, way to do that unless there's some consensus about starting to use the flexbox model.

This ticket was mentioned in Slack in #design by afercia. View the logs.


4 years ago

#8 @wonderboymusic
4 years ago

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

In 35616:

Help/About: unify tab styling.

Props afercia.
Fixes #34214.

This ticket was mentioned in Slack in #design by afercia. View the logs.


4 years ago

#10 @afercia
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Missed to address some design feedback got on Slack: basically the space between tabs should be bigger for big tabs and smaller for small tabs. Also, I'd like to remove the 1px font-size trick since it's basically a hack and shouldn't be used in core.

There's an issue though, and it's the empty space between inline-block elements which makes difficult having a pixel-perfect distance between tabs. There are alot of ways to fight the space between inline block elements, but they all have drawbacks.
Since we can't predict when tabs will be printed out with or without empty space between them (thinking at Plugins for example), I'm wondering why display: inline-block is used in the first place.
Floating the tabs would solve the issue.

@afercia
4 years ago

#11 @afercia
4 years ago

The proposed patch tries to improve the tabs styling consistency after [35616]

  • remove the 1px font-size hack
  • float the tabs and clear the tabs wrapper
  • make the space between tabs proportional to the tabs font-size
  • reduce the default tabs font-size from 15px to 14px

This way there will be 3 tabs "sizes":

  • in the About/Credits/Freedoms screens: font-size 18px and distance between tabs 9px
  • default, for example in the Menu screen: font-size 14px and distance between tabs 7px
  • small tabs (e.g. Network Sites): font-size 12px and distance between tabs 6px

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#13 @wonderboymusic
4 years ago

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

In 35673:

After [35616], improve the consistency of tabs styling.

Props afercia.
Fixes #34214.

Note: See TracTickets for help on using tickets.