Page MenuHomePhabricator

Improve GettingStarted modal rendering with long text
Closed, ResolvedPublic

Description

I think ideally, the buttons should always display on one line, and the modal should expand horizontally to accommodate that.

However, currently everything is fixed width and height, except one button that is min-width. This causes it to render worse if the text is long. Nothing is cut off, but you have to scroll within the modal, which is confusing.

This mainly affects other languages that have more text than the English version.

This is related to bug 55487, since some of the centering techniques require explicit sizes (but we may have to avoid those techniques for this reason).


Version: master
Severity: normal
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=61922

Details

Reference
bz61055

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 3:08 AM
bzimport set Reference to bz61055.
bzimport added a subscriber: Unknown Object (MLST).

swalling wrote:

Ukrainian

Attached:

swalling wrote:

French

Attached:

swalling wrote:

The biggest impact on the UI here is when the user has the two calls to action. #mw-gettingstarted-editable-main-fix-pages tends to wrap, even to the point of being pushed to a second line, even after we limited the button's width to 210px.

The Wikipedias that will soon have both CTAs, and where the worst wrapping happens, is:

  • ca
  • de
  • es
  • fr
  • ru
  • uk

I've attached screenshots of three examples to show you the varying degrees of what can happen.

Now, this technically isn't broken, since the user can scroll within the modal. But that's a really crappy experience. If we continue to need to use fixed width rendering, we should consider partially undoing the change that limited the width even more (gerrit 110946).

Change 114347 had a related patch set uploaded by Mattflaschen:
Center GettingStarted modal in IE7+

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

Change 114347 merged by jenkins-bot:
Center GettingStarted modal in IE7+

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

That also improves matters somewhat for long text.

It doesn't put the buttons on one line (there is an explicit width). However, it does remove the explicit height, which means it expands vertically rather than requiring scrolling.

I'll attach new screenshots of those languages.

Created attachment 14658
GettingStarted modal after centering fix in Chromium with Ukranian

Attached:

Created attachment 14659
GettingStarted modal after centering fix in Chromium with French

Attached:

swalling wrote:

Tested this on piramido.wmflabs.org and mostly it looks good... but French + the single CTA has the text overflowing. (See attachment).

swalling wrote:

French single CTA on piramido after centering fix

Attached:

(In reply to Steven Walling from comment #10)

Created attachment 14676 [details]
French single CTA on piramido after centering fix

It looks as if .mw-ui-button is still styled with white-space: nowrap; Is mediawiki up to date on piramido?

Attached:

swalling wrote:

(In reply to Sam Smith from comment #11)

(In reply to Steven Walling from comment #10)

Created attachment 14676 [details]
French single CTA on piramido after centering fix

It looks as if .mw-ui-button is still styled with white-space: nowrap; Is
mediawiki up to date on piramido?

Yes it looks like white-space: normal; is what's in prod, and applying that fixes this issue.

Attached:

swalling wrote:

This is much better now. Smaller additional changes can be filed in a separate bug.

Yes, after updating piramido core to wmf/1.23wmf15, I get the following screenshots in Firefox. The first is with the category configuration missing (so it's the one-button modal), the second is after I fixed that.

Created attachment 14680
GettingStarted one-button modal with nowrap and centering fix in Firefox with French

Attached:

Created attachment 14681
GettingStarted two-button modal with nowrap and centering fix in Firefox with French

Attached: