Last modified: 2013-06-22 19:58:19 UTC
Created attachment 12330 [details] display in Firefox in a 900px-wide window GettingStarted's task toolbar can overflow and look weird if your window isn't wide enough. See attached screenshot, note buttons and close boxes appearing outside the dark background. It happened to me half-HD screen window (960px wide), but that's because I zoom fonts; At 100% the overflow happens at around 905px in Firefox. The appearance glitches are similar in Chrome. Changing mw-gettingstarted-toolbar to "display: table" greatly improves the appearance at narrow widths in Firefox but causes other problems in Chromium.
It's complicated by the way the page is being shifted for the toolbar, but this can probably be improved with media queries. We just need to choose an alternative layout (probably requiring more toolbar height) for small-width screens like this. CCing the designers.
Yes, since the beginning of this (i.e. the prototyping and testing) we knew that anything smaller than 1024x768 would get a slightly broken-looking toolbar. For the purposes of the test, the number of desktop users who regularly use windows with a width of less than 1000 is small enough not pervert the test results, but when we move to productize this, this should be fixed. FWIW: in Chrome on OSX, I can get down to 910px without overflow.
I could use some help from the designers in crafting alternative CSS and appearance. If they just tell me (e.g. "use this alternative CSS for under 950px width", I can implement that pretty easily.
(In reply to comment #1) > It's complicated by the way the page is being shifted for the toolbar, but > this > can probably be improved with media queries. We just need to choose an > alternative layout (probably requiring more toolbar height) for small-width > screens like this. > > CCing the designers. Okay, this issue has lingered enough. If Pau and May are comfortable, I'd like to rectify this sooner rather than later, and simply hide the toolbar at small sizes. Say, anything under 900 width? Until we come up with a smarter responsive design (say, hiding the center elements in the toolbar and reducing it to the "Back to list" and "Try another article" elements?), we can prevent broken views of the toolbar. Out of curiosity, I retested this on in the iPad simulator (which gets redirected to desktop Vector, not MobileFrontEnd) and the toolbar works just fine.
I'm on this now. I'm first working on expanding the toolbar height, so it's usable at a smaller resolution. If that doesn't work, I can just hide it.
Related URL: https://gerrit.wikimedia.org/r/69282 (Gerrit Change I44a472e97e99f4107a964f64422e7892533d194b)
Okay, this isn't perfect, but it significantly improves matters.
(In reply to comment #7) > Okay, this isn't perfect, but it significantly improves matters. Yep, this works fairly well down to about 850px wide. I'd still ideally like to hide the toolbar below that size, but I think this patch works.
Done and on Piramido for testing. Do we want to log that for Analytics purposes (whether they saw the toolbar)?
Merged and deployed.
