Skip to content

make sky chart bottom bar responsive and add FOV rotation slider for narrow screens#3

Merged
giancarloerra merged 1 commit intomainfrom
fix/skychart-fov-bar
Mar 10, 2026
Merged

make sky chart bottom bar responsive and add FOV rotation slider for narrow screens#3
giancarloerra merged 1 commit intomainfrom
fix/skychart-fov-bar

Conversation

@giancarloerra
Copy link
Owner

Summary

Makes the sky chart bottom bar fully responsive and adds an inline FOV rotation
slider for narrower viewports.

Changes

  • Dynamic button reflow: The quick-access bar now uses flex-wrap: wrap at
    all widths, so buttons redistribute into multiple rows as soon as they no longer
    fit — no more disappearing buttons at intermediate screen sizes.
  • Inline Camera Angle slider: When the bottom bar wraps to multiple rows, a
    "Cam Angle" slider appears at the bottom of the bar. This keeps the FOV rotation
    control accessible without needing to open the settings panel (which overlays the
    sky on narrow screens). The slider syncs bidirectionally with the panel slider.
  • Simplified media query: The 480px breakpoint now only adjusts padding and
    font sizes; wrapping behaviour is handled dynamically.

How to test

  1. Open /skychart.html and manually resize the browser window narrower.
  2. Verify buttons wrap smoothly at any width — no buttons should disappear.
  3. When the bar wraps to 2+ rows, confirm the "Cam Angle" slider row appears.
  4. Drag the bottom-bar slider and verify the panel "Camera Angle Offset" slider
    stays in sync (and vice-versa).
  5. Widen the window so the bar fits in a single row — the slider should hide.

… for narrow screens

- Add flex-wrap to quick-bar so buttons reflow dynamically at any
  screen width instead of only at the fixed 480px breakpoint
- Simplify 480px media query to spacing/font adjustments only
- Add a Camera Angle slider row that appears in the bottom bar when
  it wraps to multiple rows, keeping FOV rotation accessible when
  the settings panel covers the sky view
- Bidirectional sync between bottom-bar and panel rotation sliders
@giancarloerra giancarloerra self-assigned this Mar 10, 2026
@giancarloerra giancarloerra merged commit e732769 into main Mar 10, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant