WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#30296 closed defect (bug) (fixed)

Twenty Fifteen: Better spacing between navigation items and their descriptions.

Reported by: philiparthurmoore Owned by: iandstewart
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords: commit has-patch
Focuses: Cc:

Description

When styles are disabled menu items and their descriptions are flush (see image attachment). This proposed patch adds a space between menu items and their descriptions. I’ll say outright that I am 100% with this proposal being closed, but it feels weird to have no spaces between words like that.

Part of me would even suggest changing span to div here. The reason is because when spans are used there’s no good way to indicate what’s the menu item and what’s the menu item description (see image). When a div is used there’s a line break and so you can both 1) handle the styling via CSS but also 2) make sure that when styles are disabled there’s a clear visual distinction between menu items and their descriptions.

What do you think? See the patches for potential improvements.

Attachments (6)

30296-divs.diff (711 bytes) - added by philiparthurmoore 6 years ago.
With DIV
30296-space.diff (714 bytes) - added by philiparthurmoore 6 years ago.
With Space
current.png (77.1 KB) - added by philiparthurmoore 6 years ago.
The way things look currently.
spans.png (40.4 KB) - added by philiparthurmoore 6 years ago.
With Space.
divs.png (29.0 KB) - added by philiparthurmoore 6 years ago.
With DIV
30296-divs-1.diff (1.0 KB) - added by philiparthurmoore 6 years ago.
Use DIVs instead of SPANs and remove unnecessary CSS.

Download all attachments as: .zip

Change History (12)

@philiparthurmoore
6 years ago

With DIV

@philiparthurmoore
6 years ago

With Space

@philiparthurmoore
6 years ago

The way things look currently.

@philiparthurmoore
6 years ago

With Space.

@philiparthurmoore
6 years ago

With DIV

#1 @philiparthurmoore
6 years ago

Also, block-level elements inside of links should be fine since we're using HTML5, but please do correct me if I'm wrong on that.

This ticket was mentioned in Slack in #core-themes by philip. View the logs.


6 years ago

#3 @iamtakashi
6 years ago

Related: #29890

As suggested in #29890, div works here too, and then we don't need display: block from .main-navigation .menu-item-description in the CSS.

@philiparthurmoore
6 years ago

Use DIVs instead of SPANs and remove unnecessary CSS.

This ticket was mentioned in Slack in #core-themes by iandstewart. View the logs.


6 years ago

#5 @iandstewart
6 years ago

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

#6 @iandstewart
6 years ago

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

In 30302:

Twenty Fifteen: simpler CSS by using divs instead of spans for menu descriptions.

Props philiparthurmoore, fixes #30296

Note: See TracTickets for help on using tickets.