regressions on mobile

[tyrasd]

There are some recently introduced regressions when browsing www.openstreetmap.org with mobile browsers:

1. "login / signup" links are slightly larger than the rest of the text and can overlap the tabs when the screen is small enough. This is even wore when one is logged in. I think those links were meant to be displayed in the top right corner?
2. the arrow-down symbol of the "Edit" tab is not displayed.
3. zoom buttons and layer switcher have a too large top-margin.
4. zoom buttons apparently shows +/- symbols twice and overlapping.
5. permalink/shortlink bar cut off on opera mobile
6. panning and zooming the map does not work on opera mobile (note that panning/zooming is only broken on the main page - it works for example on the mini-maps of changesets).

Some other issues with mobile / small screen devices: (edit: moved to separate issue)

Here are some screenshots (Android 4.1.2, Nexus S):

default android browser:

Opera Mobile 12.10:

[tomhughes]

Thanks for the report - we'll look at these things.

A small note for the future - in general it's better not to report multiple issues in one ticket as different people may want to work on them and it becomes very hard to track what has and has not been fixed when it is all on one ticket.

[tyrasd]

You're right! Will move "some other issues" to a separate issue.

[tomhughes]

I've fixed point 3 in 1fe5282 and have been unable to reproduce points 2 and 4 using a small screen view in a normal desktop browser.

[tyrasd]

@ 4 - Hm... I see those even in my desktop browsers. Anyway, I think background images for .leaflet-control-zoom-in/out have to be removed from leaflet-all.css.scss (c.f. leaflet changelog)
@ 2 - It looks like androids font (roboto or droid-sans) does not provide this particular glyph (▾ U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) as it doesn't even show up when it's used in E-Mails for example. As a workaround one could use ▼ (U+25BC BLACK DOWN-POINTING TRIANGLE) instead...
@ 6 - I noticed that this can be worked-around by setting position:absolute instead of position:fixed for div#content. In principle, this looks like a bug of Opera Mobile, but I don't see why we have to use fixed positioning for the mobile view after all.

[tomhughes]

I think fa53a9c will probably fix point 4.

[tomhughes]

Point 2 should be fixed by 469b3c5 which changes the arrow to be U+25BC as suggested.

[tomhughes]

I also noticed that the Android browser (in Android v2.x) but not Firefox seems to be positioning the map wrongly, so it is underneath the top bar.

[tomhughes]

Testing with the opera mobile emulator from http://www.opera.com/developer/tools/mobile/ it looks like the problems with panning are happening on http://notes.apis.dev.openstreetmap.org/ which has the redesign but not the update to Leaflet 0.5 so it looks like the redesign work is somehow causing that.

[tyrasd]

Yes. The commit in question should be b70aa5d where fixed positioning was introduced, instead of absolute.

btw: the zoom-button background images are still present in the embed stylesheet.

[tomhughes]

Yes I need @samanpwbb to look at the fixed/absolute position thing really as I don't entirely understand it... I imagine that is also responsible for the odd positioning of the map in the default android browser.

[tomhughes]

I've fixed the embed stylesheet in 05cb14b.

[samanpwbb]

I just submitted a pull request to help the mobile situation out a bit (#202). Playing with the site a little more on my phone and with the Opera emulator makes it pretty apparent that thoughtful design work is needed to make the site usable on mobile. Right now it's a pretty rough experience. This should at least help a little.

[tomhughes]

I've merged #202 now which I hope should help with 1, 5 and 6.

[positron96]

Hello. For what it's worth, I confirm that 6 has been fixed. Great job!

[tomhughes]

I think a lot of this was already fixed, but in any case the redesign branch (#498) has a much improved mobile interface that resolves most outstanding issues.