#4978131 Gutenboarding: Launch flow mobile layout.

Sent to vendor

Created on October 14, 2020 , translate by Sunday, October 18, 2020 (1323 days ago)

Translate 1 original (1 word) to Sakha Glossary

Prio	Original string	Translation	—
	%1$s of %2$s	You have to log in to add a translation.	Details
%1$s of %2$s %1$s of %2$s You have to log in to edit this translation. or Cancel Translation Memory Loading… Meta Status: untranslated Comment: translators: This is about SMS message parts, so %s is a number: e.g. 1 of 3. Priority: normal More links: Permalink to this original All translations of this original Show all translations across locales Show original across locales Show all deliverables with this original (sah) Show all deliverables with this original (overview) View deliverable: Gutenboarding: Launch flow mobile layout.

Legend:

Current

Waiting

Fuzzy

Old

With warnings

Export strings as

Visual changes:

Show launch sidebar as fullscreen on mobile. 
The sidebar is always shown first before continuing to the next uncompleted step on mobile.
Added sticky footer for all launch steps.
This includes Go Back button on all launch steps.
Added <LaunchProgress> component. 
This shows the (1 of 4, 2 of 4, …) text on the header. 
Hide inline help button (blue round question mark button on the bottom right corner) when launch modal is open. 
This was blocking the buttons on the sticky footer.

Technical changes:

Added sticky=true|false|null prop on <ActionButtons> component. 
This forces action buttons to be sticky all the time, not sticky all the time or automatically sticky on small viewport.
Added onMenuItemClick event on <LaunchMenu> component.
The fullscreen sidebar hides itself when a launch menu is clicked on.
Added isSidebarFullscreen reducer and (set|unset)SidebarFullscreen actions.
Reduce nested divs where possible.
To fix all sticky header/footer + scrollbar quirks, nested divs were removed where possible to help make this easier to work with.
SASS changes:
- Added mixins onboarding-heading-title, onboarding-body-margin & onboarding-block-edge2edge.
- Proporionate scaling for $onboarding-(block|heading|body)-margin-(mobile|small|medium).

Fixes:

Design Deviations:

On mobile view, a 1px bottom border is added to the sticky header. This creates a clearer separation between header and body.
On desktop view, the header (where the wordpress logo is) is no longer sticky. This is to simplify handling of overflowing content / scrollbar.

How to build:

How to test:

Point widgets.wp.com to your sandbox.
Create an unlaunched test site using Gutenboarding (/new)
Test on local calypso with the flag appended to the end of the url ?flags=gutenboarding/new-launch-mobile flag, e.g. calypso.localhost:3000/block-editor/page/UNLAUNCHED_SITE_HERE.wordpress.com/home?flags=gutenboarding/new-launch-mobile

What to test:

When gutenboarding/new-launch-mobile flag is enabled, it should show the launch flow in mobile.
Test all Go back and Continue buttons on sticky footer.
Test launch flow mobile view in various viewport width & height.
- Check if launch progress (1 of 4, 2 of 4, …) is showing correctly.
- Ensure inline help badge (blue round question mark button on the bottom right corner) is hidden when launch flow is
  opened.
- Ensure there are no weird scrollbar quirks by testing on long content like plans step and short content like name step.
  - Also test on Firefox as Firefox scrollbar & clipping behaves differently.
- Test on Safari iOS!
Test launch flow desktop view to ensure there’s no regression.
Test onboarding flow /new both mobile & desktop to ensure there’s no regression.

Unfortunately, no screenshots were provided by the developer.