Repository navigation
feat(editor): add mobile bottom navigation and responsive panels - #41
Open
youtsuhodev wants to merge 1 commit into
Open
youtsuhodev wants to merge 1 commit into
youtsuhodev wants to merge 1 commit into
Conversation
Rework the narrow-viewport editor so phones get a discoverable, Instagram-style bottom menu instead of the hidden pair of sidebar toggles. - Add src/AvatarMobileNav.tsx: a fixed bottom tab bar (Preview, Avatar type, Body, Style, Effects, Animation) rendered only on narrow, non-embedded viewports. - App.tsx: track narrow viewport with a matchMedia listener, default the resources sidebar to collapsed on mobile, derive the active nav section from the panel state, and let nav taps open or toggle the matching sidebar/sheet. Selecting a section closes the others so only one panel is open at a time. - Keep the global top actions (save, camera, GitHub, theme, language, project menu) on the stage on mobile and drop the now-redundant resources/controls toggle buttons; hide the stage animation button because the bottom nav owns it. - App.scss: make the mobile stage full height (100dvh) with safe-area padding and reserve space for the nav and any open sheet, move the orientation gizmo and rotate/move selector above the nav in every state, present both control sidebars and the animation panel as fixed bottom sheets, and wrap/shrink the top action rows to 36px and 32px touch targets. - AvatarControls.scss: turn the mobile sidebars into scrollable cards with a capped height and internal panel scrolling. - AnimationPanel.scss: make the timeline responsive by wrapping the transport into two rows with compact sizing, hiding the zoom group and total timecode, narrowing the track column, enlarging track/keyframe touch targets, capping the options popover, enlarging library tiles, and revealing trim/track affordances on hover-less devices. - AnimationPanel.tsx: disable the drag-to-resize gesture below 840px to match the hidden resize grip. Verified with pnpm typecheck plus the AnimationPanel and AppPixelEffect suites.
This branch has not been deployed
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
1 participant
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.
Rework the narrow-viewport editor so phones get a discoverable, Instagram-style bottom menu instead of the hidden pair of sidebar toggles.
Add src/AvatarMobileNav.tsx: a fixed bottom tab bar (Preview, Avatar type, Body, Style, Effects, Animation) rendered only on narrow, non-embedded viewports.
App.tsx: track narrow viewport with a matchMedia listener, default the resources sidebar to collapsed on mobile, derive the active nav section from the panel state, and let nav taps open or toggle the matching sidebar/sheet. Selecting a section closes the others so only one panel is open at a time.
Keep the global top actions (save, camera, GitHub, theme, language, project menu) on the stage on mobile and drop the now-redundant resources/controls toggle buttons; hide the stage animation button because the bottom nav owns it.
App.scss: make the mobile stage full height (100dvh) with safe-area padding and reserve space for the nav and any open sheet, move the orientation gizmo and rotate/move selector above the nav in every state, present both control sidebars and the animation panel as fixed bottom sheets, and wrap/shrink the top action rows to 36px and 32px touch targets.
AvatarControls.scss: turn the mobile sidebars into scrollable cards with a capped height and internal panel scrolling.
AnimationPanel.scss: make the timeline responsive by wrapping the transport into two rows with compact sizing, hiding the zoom group and total timecode, narrowing the track column, enlarging track/keyframe touch targets, capping the options popover, enlarging library tiles, and revealing trim/track affordances on hover-less devices.
AnimationPanel.tsx: disable the drag-to-resize gesture below 840px to match the hidden resize grip.
Verified with pnpm typecheck plus the AnimationPanel and AppPixelEffect suites.