Repository navigation
Improve mobile UX of the explorer - #15
Merged
Merged
Conversation
… panels below search bar, auto-hide feedback note
- On portrait screens fit a lon/lat box with the screen's aspect ratio so the map fills the full height instead of a letterboxed band - Lock page scroll, overscroll and pinch-zoom on the explorer (touch-action, dynamic viewport meta, iOS gesture events) so gestures only pan/zoom the map while search bar, filters and legend stay fixed - Use dynamic viewport height and a fixed full-screen root on mobile - Track user pans (geo.center.lon/lat) and refit the default view on resize
- Top bar groups home | search | filters; home links back to the landing page - Desktop: search bar centered in the free space between controls and info panel; below 1130px it stacks above the controls panel (no more overlap) - Compact layout (phones in portrait and landscape, short windows) shares one media query with JS; panels use min(400px, 100% - 20px) so landscape gets a left column for search/filters and a right column for city info - Controls panel scrolls instead of running into the legend on short windows
…ity visible - Pick a lon/lat box matching the container's aspect ratio instead of letting Plotly fit the whole globe (removes empty bands on desktop too) while keeping all cities in view on landscape screens - When zooming to a city, offset the center so it lands in the map area not covered by the info panel (tablets, landscape phones)
|
🚀 Preview deployed for this PR: https://ai4up.github.io/cities-learning-explorer/pr-15/ This comment is kept up to date automatically. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #14
Explorer
Landing page