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

make holiday stops flow responsive #267

Merged
merged 16 commits into from
Sep 9, 2019
Merged

Conversation

twrichards
Copy link
Contributor

@twrichards twrichards commented Sep 6, 2019

This PR encompasses all the changes to make the holiday stop flow introduced in #227 responsive across different devices in accordance with the wireframes/designs provided.

Notes

There are a few additional changes and refactors to bring about the responsiveness screenshotted further down...

  • improved breakpoint calculation (and introduced height based breakpoints)
  • improved mechanism for wrapping text on long buttons on small viewports
  • added 401 handling for calls to holiday-stop-api in alignment with the way AsyncLoader handles these scenarios (e.g. when the user tries to select some holiday dates, but the users session has gone over one hour, then redirect to reauthenticate)
  • two further tweaks/hacks had to be made in the wrapping of onefinestay/react-daterange-picker to achieve an 'infinite' scroll type experience
    • because the library has a touchStart handler when presenting many calendars stacked (as we do now for mobile) this was causing dates to be selected while scrolling, this was fixed by adding onTouchStartCapture={e => e.stopPropagation()} on the parent container, which catches the event on the way down to the child component (solved by understanding the capture/target/bubbling lifecycle of events - see https://javascript.info/bubbling-and-capturing#capturing)
    • when dates change, by default the library jumps the calendars in-order to ensure the selection is in view, which is problematic in the 'infinite' scroll mode, so this behaviour is suppressed by replacing the isStartOrEndVisible function with () => true when this.props.numberOfCalendars > 12
  • some tweaks to the Modal component to ensure it is independently scrollable when the content is larger than the devices viewport

Holiday Overview Screen

mobile tablet
desktop

Holiday Date Chooser Screen

mobile
NOTE: as user scrolls the date boxes and count of issues selected turns into a 'sticky' header as the user scrolls beyond it to the calendars
desktop tablet

Holiday Review Screen

mobile tablet
desktop

Holiday Confirmation Screen

mobile tablet
desktop

arausuy
arausuy previously approved these changes Sep 9, 2019
@arausuy
Copy link
Contributor

arausuy commented Sep 9, 2019

Reviewed at desks 👍 Thanks for the PR write up!

@twrichards twrichards merged commit 95eddb3 into master Sep 9, 2019
@twrichards twrichards deleted the responsive-GW-holiday-stops branch September 9, 2019 14:06
@prout-bot
Copy link
Collaborator

Seen on PROD (merged by @twrichards 4 minutes and 16 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants