Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#28237 closed defect (bug) (fixed)

Twenty Fourteen: Long titles break the header in mobile view

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

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

Download all attachments as: .zip

Change History (32)

#1 @lancewillett
10 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
10 years ago

#2 @rclations
10 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
10 years ago

  • Keywords has-patch added; needs-patch removed

#4 @lancewillett
10 years ago

  • Keywords needs-testing added

@sixhours Can you review and test the patch?

#5 @sixhours
10 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
10 years ago

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

#6 @lancewillett
10 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
10 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
10 years ago

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

#8 @celloexpressions
10 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
10 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.

#wchh14

Version 1, edited 10 years ago by schoenwaldnils (previous) (next) (diff)

#10 @schoenwaldnils
10 years ago

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

#11 @ocean90
10 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
10 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 10 years ago by Kopepasah (previous) (diff)

#13 @schoenwaldnils
10 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 10 years ago by schoenwaldnils (previous) (diff)

@obenland
10 years ago

Simplify .site-title styles and color ellipsis

#14 follow-up: @obenland
10 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
10 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
10 years ago

#16 follow-up: @obenland
10 years ago

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

#17 in reply to: ↑ 16 @celloexpressions
10 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
10 years ago

  • Keywords needs-testing removed

#19 @iamtakashi
10 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.


10 years ago

#21 @lancewillett
10 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.