Improve UI on mobile devices, vertical design

e2jk commented 3 years ago

The UI works great on large screens like laptops, but is not ideal on smaller screens like smartphones. For example this is how it shows on my 6" screen Android smartphone:

Main issues:

Map is too narrow and long on the right side
Text information in table format on the left is not readable without zooming
Often zooming in causes issues when trying to zoom back out, in particular if the map is now full-screen-ish, since the pinching action then acts on the zoom level of the map instead of the entire page

On large screens, the screen real estate is most often horizontal, where it makes sense to have a design that lays out the map and the table content side-by-side. But mobile devices are most often held in vertical orientation, so it would make sense to have the map and the table be laid out in vertical form, either with the table first or the map first.

Here a couple test mockups for a vertical design:

Vertical mockup, table first	Vertical mockup, map first

Any suggestions on which of the table or the map would make sense to be first? I think I prefer the table first, but it might make for a more consistent layout to have the map first: when there is a large number of planes in view, having the table down would mean the table could continue below and allow the user to scroll down, with the map always consistently positioned on top?

Note: Ideally, the design would adapt itself to the orientation of the device, and switch back to the same side-by-side layout as on larger screens when the device is held horizontally.

eric1tran commented 3 years ago

I like the vertical design. There's been discussion about making it a bit more mobile friendly for some upcoming projects we're working on so I'll pass the suggestion along.

gvanem commented 3 years ago

I'll ask here instead of opening another issue.

I've built Dump1090-FA for Windows (with some patches and tweaks). It work great for --interactive mode! But I fail to see there is a Web-server built-in. An option somehow? Only SBS, Beast etc. Does it mean I have to feed via RadarScape to server a Web-client?

mutability commented 3 years ago

You should open a new issue for a new issue.

Dump1090 does not have an internal webserver, use --write-json and serve the results through a standalone webserver.

raccettura commented 3 years ago

I like the vertical design. There's been discussion about making it a bit more mobile friendly for some upcoming projects we're working on so I'll pass the suggestion along.

Along with this, any chance on a query arg to show just the map or just the table? It would be helpful when embedding as an iframe into other interfaces like HomeAssistant.

sigwx commented 3 years ago

I belive there is a sidebar=hide to hide the table, and banner=hide to hide the banner across the top. And you should be left with just the map

On Thu, Aug 19, 2021, 10:29 PM Robert Accettura @.***> wrote:

I like the vertical design. There's been discussion about making it a bit more mobile friendly for some upcoming projects we're working on so I'll pass the suggestion along.

Along with this, any chance on a query arg to show just the map or just the table? It would be helpful when embedding as an iframe into other interfaces like HomeAssistant.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/flightaware/dump1090/issues/114#issuecomment-902442304, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADJJGQ2DLNCTFWO3O75DEODT5XR2ZANCNFSM4YKJH4IA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

raccettura commented 3 years ago

Just tested and that works. Thanks so much! Wish that little tidbit was better documented.

therealhalifax commented 1 year ago

Just tested and that works. Thanks so much! Wish that little tidbit was better documented. @raccettura How you added this to Home Assistant Addon? If I call the Webpage outside of Home Assistant with that arguements, it works also fine for me. But I need that inside the Addon, so that the agrs are always used when the Addon Frontend is called.

gregdev commented 6 months ago

I've just submitted #235 which brings in improved display on smaller devices, notably vertical stacking of the map and info table. Currently I have the map sitting first and the table underneath but I do like the idea of this order being user-selectable. I'm also thinking I should make just the table rather than the whole window scroll, so that the map remains fixed in place - any thoughts on this?

flightaware / dump1090

Improve UI on mobile devices, vertical design #114