WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#28237 closed defect (bug) (fixed)

Twenty Fourteen: Long titles break the header in mobile view

Reported by: sixhours Owned by: lancewillett
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:
PR Number:

Description

Steps to reproduce:

  1. Activate the Twenty Fourteen theme
  2. Go to Appearance > Customize > Site Title
  3. Add a long title such as "Triceratops at the Opera House"
  4. Reduce the screen size to approximate a mobile device

https://cloudup.com/cmbUw23Ov0r

  • Expected: the search icon to stay on the same line even if there's a long title
  • Actual: the search icon falls over to the 2nd line if there's a long title and it looks funny

Tested with Chrome 34.0.1847.116 on Mac OS X 10.9.2 (Mavericks)

Attachments (11)

28237.diff (1.6 KB) - added by rclations 6 years ago.
28237-2.diff (1.4 KB) - added by sixhours 5 years ago.
Apply max-width values to .site-title for small screens
28237.3.diff (1.9 KB) - added by celloexpressions 5 years ago.
Replace approximating percentages with pixel-perfect calc() rules.
28237.4.diff (2.3 KB) - added by schoenwaldnils 5 years ago.
28237.5.diff (2.1 KB) - added by schoenwaldnils 5 years ago.
28237.ellipsis.png (12.2 KB) - added by ocean90 5 years ago.
28237.accessibility.png (30.8 KB) - added by Kopepasah 5 years ago.
28237.6.diff (2.3 KB) - added by schoenwaldnils 5 years ago.
28237.2.diff (2.2 KB) - added by obenland 5 years ago.
Simplify .site-title styles and color ellipsis
ellipsis-after.png (15.8 KB) - added by obenland 5 years ago.
28237.7.diff (2.4 KB) - added by obenland 5 years ago.

Download all attachments as: .zip

Change History (32)

#1 @lancewillett
6 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.0

Thanks for the report!

Idea for a graceful fix?

  • Constrain title with ellipsis?
  • Push search to new line with a better-looking design?

@rclations
6 years ago

#2 @rclations
6 years ago

Adding a patch that constrains the title with an ellipsis. This doesn't solve problems with extra long titles + the navigation on desktop, but at least it covers the mobile experience.

This patch covers screens >= 320px wide. If we want to support anything smaller, I'd recommend adding more media queries to keep the experience smooth.

#3 @rclations
6 years ago

  • Keywords has-patch added; needs-patch removed

#4 @lancewillett
5 years ago

  • Keywords needs-testing added

@sixhours Can you review and test the patch?

#5 @sixhours
5 years ago

The patch is working on archives and the blog index, but not on single posts/pages due to the selector specifying the .list-view class:

https://cloudup.com/cT2LjR4Uo1E

Not sure if this is intentional, but I've attached a new patch that applies to just .site-title.

@sixhours
5 years ago

Apply max-width values to .site-title for small screens

#6 @lancewillett
5 years ago

Thanks for the updated patch -- I'm going to commit but keep the ticket open so we can test on a bunch of devices. If we have time this weekend at WordCamp Orange County we can hit a bunch of various devices to test the solution.

#7 @lancewillett
5 years ago

In 28691:

Twenty Fourteen: Apply max-width values to avoid site title breaking the layout in small screens. Props sixhours, rclations. See #28237.

@celloexpressions
5 years ago

Replace approximating percentages with pixel-perfect calc() rules.

#8 @celloexpressions
5 years ago

We should just use calc rules instead of arbitrary percentages here (patch attached). That way as much of the title is shown as possible.

The only relevant place this isn't supported is IE8, which doesn't have media queries anyway; I only put the fallback percentage in that file.

#9 @schoenwaldnils
5 years ago

I wrote a fix that sets the search-toggle to absolute and wraps the title with a smaller line-height.
That might let the header grow in height but you can see the whole title.

Also fixed that the dots on the german Ä in PRIMÄRES MENÜ appear in the menu-toggle-button

#wchh14

Before:
http://puu.sh/9w0zb/68ad23e234.png http://puu.sh/9w0Jg/bdad2445fa.png

After:
http://puu.sh/9w0Bq/7b179d9734.png http://puu.sh/9w0LP/2a38784c17.png

Last edited 5 years ago by schoenwaldnils (previous) (diff)

#10 @schoenwaldnils
5 years ago

28237.5.diff are the same changes like in 28237.4.diff but without the fix for #27456

#11 @ocean90
5 years ago

Have tested 28237.5.diff with Nils at #wchh14.
I like the idea behind the patch more than the current max-width (or calc(), .3.diff) way.

While testing we have noticed that currently the ellipsis aren't in the same color as the header text color, see 28237.ellipsis.png.

#12 @Kopepasah
5 years ago

From an Accessibility standpoint, I do not like the idea of cutting off the site title with ellipsis. While this may be acceptable with other bits of content (that can be accessed in full elsewhere, like the excerpt), the site title is usually the most important portion to a user (both site owner and site visitor). While this may be edge case, prohibiting mobile users from viewing the site title (or any other content) is seems like a punishment for using a mobile device.

I propose a fix more along the lines of keeping the site title visible and switching the position search and menu toggles. See attachment:28237.accessibility.png as an example.

Last edited 5 years ago by Kopepasah (previous) (diff)

#13 @schoenwaldnils
5 years ago

@Kopepasah I tried to apply your idea to the 28237.6.diff. It worked with the search-button but not with the menu-toggle. I think it's not possible with the DOM in that constellation.

http://puu.sh/9CrjZ/73bb055707.png

The button is stil on top with height: 48px;
But I think it looks much better.

Last edited 5 years ago by schoenwaldnils (previous) (diff)

@obenland
5 years ago

Simplify .site-title styles and color ellipsis

#14 follow-up: @obenland
5 years ago

  • Version changed from 3.9.1 to 3.8

I don't hate the ellipsis, even though it might truncate the site title.

28237.2.diff provides a more accurate width calculation and fixes the custom site title color bug, that ocean90 pointed out earlier.

#15 in reply to: ↑ 14 @celloexpressions
5 years ago

Replying to obenland:

28237.2.diff provides a more accurate width calculation and fixes the custom site title color bug, that ocean90 pointed out earlier.

We do need the media query parts of the max width calcs from 28237.3.diff also if we want to always support showing as much as possible. 1200px+ long titles are probably uncommon, but it doesn't take much to keep a bit more where we can. They magic numbers that we have in there should all be notated like 28237.2.diff does. They account for changing padding/margins and the hiding of search-toggle.

@obenland
5 years ago

#16 follow-up: @obenland
5 years ago

Good call. Would you mind looking at .7.diff?

#17 in reply to: ↑ 16 @celloexpressions
5 years ago

  • Keywords commit added

Replying to obenland:

Good call. Would you mind looking at .7.diff?

Looks good; the spot where I had the 3rd set of calcs (66px) was for where the menu-toggle is gone but the padding is still 10px instead of 30px. I don't think we need to worry about that, as only up to 20px is "wasted" at any viewport now.

(I also agree with the ellipsis approach still - it's much cleaner in the context of Twenty Fourteen's design)

#18 @obenland
5 years ago

  • Keywords needs-testing removed

#19 @iamtakashi
5 years ago

I'd vote for the ellipsis approach. In my opinion, content is more important than branding (site title) on small screens.

This ticket was mentioned in IRC in #wordpress-themes by jcastaneda. View the logs.


5 years ago

#21 @lancewillett
5 years ago

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

In 29096:

Twenty Fourteen: more graceful handling of super-long site titles in small screens: add an ellipsis and adjust max-width more carefully.

Props celloexpressions, schoenwaldnils, and obenland -- fixes #28237.

Note: See TracTickets for help on using tickets.