Need fullscreen/small screen mode for mobile

[bvibber]

For usage on mobile browsers and PhoneGap/Cordova-based apps we'll need to be able to make the dialog full-screen.

Currently the dialog shows up offset, and wider than the screen -- mobiles typically have 320px or 360px or such as a display width.

This shouldn't necessarily be forced for all mobile things; for instance on a larger tablet screen the dialog style may be fine.

[bvibber]

For the moment I'm forcing a "fullscreen" view with this css:

.uls-menu { position: absolute; min-width: auto; top: 0 !important; left: 0 !important; width: 100%; height: 100%; }

however the map doesn't fit onscreen at there's not room for four hardcoded columns of language links, at most for two.

One way to solve the columns issue would be to switch from hardcoded columns to using CSS columns, with a target column-width. This should work in browsers supporting CSS multi-column text, and will fall back to a single-column list in more primitive browsers.

[bvibber]

More style tweaks can be found at https://github.com/brion/Wikipedia/blob/uls/assets/www/app.css#L856

This fits most stuff on screen, but there are some current problems:

• "Select Language" overlaps with the map
• search icon spills slightly off the screen to the left
• four-column language lists are too short and cut off a lot of language names. This makes some illegible (eg two 'Bahas...' entries doesn't help you tell which language is which).

[pauginer]

We ave split the uls-menu in 3 classes in order to povide better fexibility. The ULS main element is defined with the classes: uls-menu (to identify the ULS), grid (to define the scope of the grid we use) and uls-wide (to define size constraints).

• The grid is based on Foundation.css, but does not include the mobile rules. By including them or using an alternative Foundation-based grid for mobile may make things easier.
• uls-wide defines the width constraints as 45% of the screen with 715px as minimum, but alternative classes can be defined for other devices.