Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile map view: size of opened filter pane #448

Open
wbazant opened this issue Sep 15, 2024 · 2 comments
Open

mobile map view: size of opened filter pane #448

wbazant opened this issue Sep 15, 2024 · 2 comments
Assignees
Labels
design mobile Specific to mobile layout

Comments

@wbazant
Copy link
Collaborator

wbazant commented Sep 15, 2024

#416 proposes:

  • Make the filter pane fullscreen (extend to footer)

I tried it, and it seemed a bit wasteful when the map is zoomed in and just a few locations are available. The proposed resolution is to flex the tree select, and let it be as big as it wants to be, with some bounds.

fa96e6b adds 5vh as the minimum (a tiny bit of white space so the user knows the feature is still there) and 65vh as max ( a tiny bit of map still visible so the user knows tha map is still there).

@wbazant
Copy link
Collaborator Author

wbazant commented Sep 25, 2024

This is live and working as the issue intended, @ezwelty I'll leave you to either close or suggest improvements to this one

@ezwelty ezwelty added the mobile Specific to mobile layout label Sep 25, 2024
@ezwelty
Copy link
Collaborator

ezwelty commented Oct 1, 2024

@wbazant The fixed maximum height leads to varying results on different screen sizes: either too short (the filter could use more space but can't), just right, or too long (the filter awkwardly covers part of the lower navigation, or worse, extends beyond the bottom of the screen such that you end up with double scroll of the container and the type tree within).

I get your point about letting it be shorter if the type filter is small – to leave some of the underlying map visible – but I think the maximum height should be set so that it extends either to the bottom of the map (to leave the bottom navigation perfectly exposed) or to the bottom of the screen.

Trying to make out of the HTML/CSS layout in React leaves me dizzy, so I mocked up a demo here (with filters extending to bottom of map):
https://jsfiddle.net/oyndt8q4/

@ezwelty ezwelty added the design label Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design mobile Specific to mobile layout
Projects
None yet
Development

No branches or pull requests

2 participants