Last modified: 2014-02-25 20:04:09 UTC
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).
Created attachment 14541 [details] Ukrainian
Created attachment 14542 [details] French
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 change #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 [details] GettingStarted modal after centering fix in Chromium with Ukranian
Created attachment 14659 [details] GettingStarted modal after centering fix in Chromium with French
Tested this on piramido.wmflabs.org and mostly it looks good... but French + the single CTA has the text overflowing. (See attachment).
Created attachment 14676 [details] French single CTA on piramido after centering fix
(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?
(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.
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 [details] GettingStarted one-button modal with nowrap and centering fix in Firefox with French
Created attachment 14681 [details] GettingStarted two-button modal with nowrap and centering fix in Firefox with French
