Improve the TerriaJS experience on mobile devices, especially phones

[kring]

This is far from perfect, but it's much less embarrassing than what we had before.

• Don't cut off the edge of popup messages on small screens.
• Make the explorer panel overlap the map instead of displacing it on small screens. The most noticeable affect of this is that the globe doesn't start out tiny on small screens.
• Make the feature info modal and in the middle of the screen on small screens. And also usable at all.
• Support swiping to expand / collapse the explorer panel. It's not quite right, but mostly works.
• Don't show any of the menu buttons on small screens. Some of them are kind of important, but there's no place to put them without more rework, so good enough for now.
• Don't show the location bar, distance legend, or navigation controls on small screens.
• Add an option to Terria.start to default to 2D. National Map will use this to default to 2D on any browser with "Android", "iPhone", "iPad", "Windows Phone", or "IEMobile" in its user agent. This saves CPU, battery life, and bandwidth. If you want to play with 3D, add #map=3d to the URL.

Live demo is here:
http://nationalmap.research.nicta.com.au/kring

For some reason (still unknown after quite a while spent trying to figure it out), panning doesn't work in Leaflet in the Chrome device emulator. It works fine in Cesium and on my actual Nexus 5. Hopefully it's just a Chrome quirk, but let me know if panning also doesn't work on your iPhones or whatnot.

[arrayjam]

The Chrome device emulator issue is fixed in Leaflet/Leaflet#3520, which is in the Leaflet stable branch.

[arrayjam]

The menu buttons could stay visible with:

@media screen and (max-width: 700px), screen and (max-height: 420px) {
    .menu-bar-item {
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }
}

Then the compass and navigation-controls can either also be pushed down (and centred with the menu buttons) or just hidden as they are now.

[kring]

The Chrome device emulator issue is fixed in Leaflet/Leaflet#3520, which is in the Leaflet stable branch.

Nice, thanks. We're currently using 0.7.3 via npm. Hopefully there will be a 0.7.4 before too long.

The menu buttons could stay visible with

Doesn't look very good, does it?

I think a hamburger menu type of thing is the better approach, but I'm happy to wait for Phil's complete mobile design rather than hacking that in now.

[arrayjam]

Ah, my bad, I think they should stay hidden below 550px, but stack up below 900px (the navigation/compass would need to move down), but I agree that it should probably just wait till a proper design.

[kgrochow]

I still think that starting with the map rather than the data menu is a better way to go. On my phone there is virtually no indication (a few pixels of blue/black pixels that merge with the screen frame) that there is a map anywhere and selecting things from the data catalog/now viewing/search does display it. The only way to get to the map is the faint < symbol in the upper right. If people miss that they're done and since starting on a menu is uncommon, most users will probably not know what to do. Bringing up a menu via the data catalog button on the other hand will be pretty clear to most phone users.

[hilarycinis]

yes please, put the breaks on this until we solve it in the full mobile version and just keep the current explanation that the application isn't suitable for mobile (small screen) devices.

A proposed solution for embeddable instances was proposed in May, which would translate to mobile as its essentially small screen. It has a different treatment to the layout of the global navigational elements but these could be used as direction for part of the problem you're solving.

it's not tested and is a different design to the current layout

Please note, its only handling a loaded data set (as it's an embedded "snapshot"), there is no catalog interaction.

So my added suggestion is to place the "data catalog | now viewing | search" bar under the solid branded header.

[kring]

@hilarycinis have you tried out the demo on a phone or anything? We've just gone from "totally, embarassingly broken" to "sort of works ok." The message about small screens not being well supported is still there and we won't get rid of it until we have an actual mobile design.

re: Keith's suggestion, I was resistant to the idea when Keith mentioned it yesterday, but I'm coming around. I'll do that, assuming @hilarycinis and @philipgrimmett don't have any objections.

[hilarycinis]

And remove the "add data" option as it's not viable on mobile anyway (location awareness is likely to be more of the driver)

[hilarycinis]

I am literally making this up on the fly to help with the decision making around the navigation and buttons stacking over the catalog/viewing/search bar.

If you have a different treatment for screens under 900px wide, you can make better use of the layout to have both map, header and navigation.

[kring]

I think we're all agreed we're not going to worry about the navigation controls or menu buttons (and just remove them entirely, as is done in the current demo linked above) for now. We'll revisit for the real mobile design, of course, but that's separate from this pull request.

[hilarycinis]

Sorry, only just saw your demo link in the start of this thread.

I fully agree, collapse the data cat so the map is seen on loading.

[kgrochow]

OK, so I'm assuming we're all ok with this now. This merge will be what's at http://nationalmap.research.nicta.com.au/kring with the data menu hidden to start. This will be upgraded to the 'real' mobile design when that is ready. If that's not the case, let me know and I'll hold off merging.

[hilarycinis]

Lovely!

On Fri, Jul 10, 2015 at 12:03 AM -0700, "Keith Grochow" <notifications@github.commailto:notifications@github.com> wrote:

OK, so I'm assuming we're all ok with this now. This merge will be what's at http://nationalmap.research.nicta.com.au/kring with the data menu hidden to start. This will be upgraded to the 'real' mobile design when that is ready. If that's not the case, let me know and I'll hold off merging.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/822#issuecomment-120258029.

---

The information in this e-mail may be confidential and subject to legal professional privilege and/or copyright. National ICT Australia Limited accepts no liability for any damage caused by this email or its attachments.