feat(formplayer): UX improvements#560
Merged
r0ssing merged 12 commits intoOpenDataEnsemble:devfrom Mar 21, 2026
Merged
Conversation
…tructure - Removed the visual viewport handling logic for keyboard inset, simplifying the component. - Updated comments for clarity regarding mobile keyboard submission. - Adjusted layout properties to ensure proper flex behavior and padding without relying on keyboard inset. - Enhanced the navigation bar and scroll area structure for better responsiveness.
- Updated CSS for body to use flex properties for better content handling. - Adjusted FormLayout component to ensure proper flex display and column direction. - Improved scrolling behavior by allowing the FormLayout to manage overflow effectively.
…responsiveness - Replaced Stack component with Box to enhance layout flexibility. - Adjusted button alignment and spacing for better responsiveness. - Removed unused spacing logic to simplify the component structure.
…nsistency - Changed button alignment from 'flex-start' and 'flex-end' to 'stretch' for better visual consistency. - Adjusted button styles to ensure full width usage while maintaining maximum width constraints.
- Replaced instances of 'button-reverse-primary' with 'formplayer-solid-primary' for the Finalize and Next buttons. - Updated CSS to reflect new button behavior, ensuring primary buttons remain filled at rest and darken slightly on hover.
IamLRBA
approved these changes
Mar 21, 2026
Contributor
|
Good work Emil! |
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
2 participants
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.
Formplayer UX improvements
Description
This PR resolves critical UX issues in the formplayer layout, particularly affecting mobile WebView interactions. The changes focus on:
Button Styling Fixes – Replaced the ad-hoc
.button-reverse-primaryclass with a comprehensive CSS system that properly freezes button hover/focus states for outline buttons, preventing unintended visual changes (e.g., "Previous" button appearing to randomly turn solid). Added dedicated.ode-buttonstyling for all button variants (primary, neutral, secondary, danger) with appropriate dark mode support and keyboard focus indicators.Layout Architecture Redesign – Refactored
FormLayoutto use flexbox column layout instead ofposition: fixedfooter withvisualViewportcalculations. The previous approach broke when the host app resized the WebView for mobile keyboards (e.g., AndroidadjustResize). The new approach keeps the prev/next bar in normal flex flow at the bottom, so it automatically stays visible when the viewport shrinks.Draft Management for New Observations – Added
draftSessionKeyto distinguish multiple unsaved drafts for the sameformType(previously onlyobservationIdwas tracked, which is null for new observations). This allows concurrent draft sessions for new forms and backward-compatible migration of legacy drafts.Mobile Keyboard UX – Implemented auto-focus for the first text input on page transitions in SwipeLayout, keeping the mobile keyboard open across page changes for faster form entry.
Draft Selector Improvements – Updated date formatting to include time (ISO locale string), improved responsive layout with
boxSizing: border-box, and refined draft summary display.Type of Change
Component(s) Affected
Related Issue(s)
Closes/Fixes/Resolves:
Testing
Breaking Changes
If breaking changes, please describe migration steps:
Documentation Updates
Checklist
Thank you for contributing to Open Data Ensemble (ODE)!