Skip to content

Commit 2ea46d0

Browse files
wpalaniwpalani
authored
Merge pull request #797 from newfold-labs/update/mobile-ui
v3 Mobile
2 parents 433f681 + e6ae003 commit 2ea46d0

19 files changed

+86
-39
lines changed

‎src/app/components/AppBody/AppBody.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ const AppBody = () => {
7474
}, [ location ] );
7575

7676
return (
77-
<div className="nfd-onboarding-body nfd-flex nfd-justify-center nfd-py-20">
78-
<div className="nfd-onboarding-body-container">
77+
<div className="nfd-onboarding-body nfd-flex nfd-justify-center nfd-py-20 mobile:nfd-py-10">
78+
<div className="nfd-onboarding-body-container nfd-w-full">
7979
<AppErrorBoundary FallbackComponent={ ErrorBoundaryFallback }>
8080
{ boot() }
8181
</AppErrorBoundary>

‎src/app/components/Header/Header.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,13 @@ const Header = () => {
2323
isCanvasStep && 'nfd-border-b nfd-bg-white'
2424
) }
2525
>
26-
<div className="nfd-onboarding-header-container nfd-flex nfd-justify-between nfd-items-center nfd-min-h-16 nfd-px-6">
27-
<BluehostLogo id="nfd-onboarding-header-logo" />
26+
<div className="nfd-onboarding-header-container nfd-flex nfd-justify-between nfd-items-center nfd-min-h-16 nfd-px-6 mobile:nfd-px-0 mobile:nfd-max-w-[90%] mobile:nfd-mx-auto">
27+
<BluehostLogo
28+
id="nfd-onboarding-header-logo"
29+
className={ classNames(
30+
isCanvasStep && 'mobile:nfd-hidden'
31+
) }
32+
/>
2833
{ isCanvasStep && <CanvasStepHeaderActions /> }
2934
</div>
3035
</header>

‎src/app/steps/Canvas/CanvasStep.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,36 @@
1+
import { useNavigate } from 'react-router-dom';
2+
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
3+
import { Button } from '@newfold/ui-component-library';
14
import { Step } from '@/components';
25
import { Preview, Sidebar } from './';
36

7+
/**
8+
* Since we disable the sidebar on mobile, we need to add a button to switch between previews.
9+
* @return {JSX.Element} - A button that allows the user to safely navigate back to the previews step to change the preview.
10+
*/
11+
const MobileLayoutSwitcher = () => {
12+
const navigate = useNavigate();
13+
14+
const handleNavigate = () => {
15+
navigate( '/previews', {
16+
state: { direction: 'backward' },
17+
} );
18+
};
19+
20+
return (
21+
<Button
22+
variant="primary"
23+
size="large"
24+
className="nfd-onboarding-mobile-layout-switcher [@media(min-width:601px)]:nfd-hidden nfd-w-max nfd-fixed nfd-bottom-[6%] nfd-mx-auto nfd-left-1/2 -nfd-translate-x-1/2 nfd-z-10"
25+
onClick={ handleNavigate }
26+
>
27+
<ChevronLeftIcon className="nfd-w-4 nfd-h-4 nfd-mr-2" />
28+
{ __( 'Change Preview', 'wp-module-onboarding' ) }
29+
<ChevronRightIcon className="nfd-w-4 nfd-h-4 nfd-ml-2" />
30+
</Button>
31+
);
32+
};
33+
434
const CanvasStep = () => {
535
const [ canvasHeight, setCanvasHeight ] = useState( '100dvh' );
636

@@ -32,6 +62,7 @@ const CanvasStep = () => {
3262
>
3363
<Preview />
3464
<Sidebar />
65+
<MobileLayoutSwitcher />
3566
</div>
3667
</Step>
3768
);

‎src/app/steps/Canvas/HeaderActions.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const HeaderActions = () => {
6161
};
6262

6363
return (
64-
<div className="nfd-onboarding-canvas-header-actions nfd-flex nfd-gap-4">
64+
<div className="nfd-onboarding-canvas-header-actions nfd-flex nfd-gap-4 mobile:nfd-w-full mobile:nfd-justify-between">
6565
{ isPublishing && (
6666
<InteractionBlockingOverlay
6767
hasLoadingSpinner={ true }
@@ -72,7 +72,7 @@ const HeaderActions = () => {
7272
type="button"
7373
title={ __( 'Toggle layouts sidebar', 'wp-module-onboarding' ) }
7474
aria-label={ __( 'Toggle layouts sidebar', 'wp-module-onboarding' ) }
75-
className="nfd-onboarding-canvas-sidebar-header-close nfd-mr-2 nfd-rounded-sm hover:nfd-text-primary focus:nfd-text-primary focus:nfd-outline-none focus:nfd-ring-2 focus:nfd-ring-primary focus:nfd-ring-offset-2"
75+
className="nfd-onboarding-canvas-sidebar-header-close nfd-mr-2 nfd-rounded-sm hover:nfd-text-primary focus:nfd-text-primary focus:nfd-outline-none focus:nfd-ring-2 focus:nfd-ring-primary focus:nfd-ring-offset-2 mobile:nfd-hidden"
7676
onClick={ handleCanvasSidebarToggle }
7777
>
7878
{

‎src/app/steps/Canvas/Preview.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ const Preview = () => {
102102
{ minWidth: 1024, scale: 0.9 },
103103
{ minWidth: 768, scale: 0.85 },
104104
{ minWidth: 480, scale: 0.8 },
105+
{ minWidth: 280, scale: 0.75 },
105106
];
106107

107108
// Find the scale breakpoint that matches the container width.

‎src/app/steps/Canvas/Sidebar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const Sidebar = () => {
100100

101101
return (
102102
<div
103-
className={ `nfd-onboarding-canvas-sidebar nfd-h-full nfd-bg-white nfd-border-l nfd-overflow-y-auto nfd-transition-all nfd-duration-300 nfd-ease-in-out ${
103+
className={ `nfd-onboarding-canvas-sidebar nfd-h-full nfd-bg-white nfd-border-l nfd-overflow-y-auto nfd-transition-all nfd-duration-300 nfd-ease-in-out mobile:nfd-hidden ${
104104
canvasSidebarIsOpen
105105
? 'nfd-min-w-[325px] nfd-max-w-[325px] nfd-opacity-100'
106106
: 'nfd-min-w-0 nfd-max-w-0 nfd-opacity-0 nfd-overflow-hidden'

‎src/app/steps/Fork/ForkStep.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,23 +46,23 @@ const ForkStep = () => {
4646
}
4747
` }
4848
</style>
49-
<Title className="nfd-text-3xl">
49+
<Title className="nfd-text-3xl mobile:nfd-text-2xl">
5050
{ __( 'Welcome to WordPress', 'wp-module-onboarding' ) }
5151
</Title>
52-
<div className="nfd-flex nfd-items-center nfd-justify-center nfd-gap-2 nfd-mt-3.5">
53-
<span className="!nfd-text-xl nfd-text-content-primary">
52+
<div className="nfd-flex nfd-items-center nfd-justify-center nfd-gap-2 nfd-mt-3.5 mobile:nfd-mt-2">
53+
<span className="nfd-text-xl nfd-text-content-primary mobile:nfd-text-base">
5454
{ __( 'Powered by', 'wp-module-onboarding' ) }
5555
</span>
5656
<img
5757
src={ bluehostLogoUrl }
5858
alt="Bluehost"
59-
className="nfd-w-[90px] nfd-h-auto"
59+
className="nfd-w-[90px] nfd-h-auto mobile:nfd-w-[70px]"
6060
/>
6161
</div>
6262

6363
<Title
6464
as="h3"
65-
className="nfd-text-2xl nfd-mt-14 nfd-mb-10"
65+
className="nfd-text-2xl nfd-mt-14 nfd-mb-10 mobile:nfd-text-xl mobile:nfd-mt-10 mobile:nfd-mb-6"
6666
>
6767
{ __( 'How would you like to start?', 'wp-module-onboarding' ) }
6868
</Title>

‎src/app/steps/Fork/MigrationCard.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ const MigrationCard = ( {
3535
{ ...props }
3636
>
3737
<div className="nfd-flex nfd-items-center nfd-justify-center nfd-text-center nfd-gap-3">
38-
<ArrowsRightLeftIcon className="nfd-w-6 nfd-h-6 nfd-text-content-primary" />
39-
<span className="!nfd-text-xl nfd-font-medium nfd-text-content-primary">
38+
<ArrowsRightLeftIcon className="nfd-w-6 nfd-h-6 nfd-text-content-primary mobile:nfd-hidden" />
39+
<span className="nfd-text-xl nfd-font-medium nfd-text-content-primary mobile:nfd-text-lg">
4040
{ __( 'Import an Existing WordPress Site', 'wp-module-onboarding' ) }
4141
</span>
4242
</div>

‎src/app/steps/Fork/SiteCreatorCard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const SiteCreatorCard = ( { initialFocus = false } ) => {
5555
<div className="nfd-flex nfd-flex-col nfd-gap-2">
5656
<Title
5757
as="h3"
58-
className="!nfd-text-xl nfd-font-medium nfd-text-content-primary"
58+
className="nfd-text-xl nfd-font-medium nfd-text-content-primary mobile:nfd-text-lg"
5959
>
6060
{ __( 'Get a site created in seconds!', 'wp-module-onboarding' ) }
6161
</Title>

‎src/app/steps/Generating/ExperienceOptions.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ const ExperienceOptions = () => {
7272
.nfd-onboarding-experience-options .nfd-features-select__feature-content {
7373
padding: 1rem !important;
7474
border-color: white !important;
75+
width: 100% !important;
7576
}
7677
7778
.nfd-onboarding-experience-options .nfd-features-select__feature .nfd-features-select__feature-input:checked:focus + .nfd-label .nfd-features-select__feature-content {
@@ -97,7 +98,7 @@ const ExperienceOptions = () => {
9798
{ getCustomStyles() }
9899
<FeaturesSelect
99100
behavior="radio"
100-
className="nfd-flex"
101+
className="nfd-flex mobile:nfd-flex-col"
101102
>
102103
{ experienceOptions.map( ( option ) => (
103104
<FeaturesSelect.Feature
@@ -107,7 +108,7 @@ const ExperienceOptions = () => {
107108
value={ option.value }
108109
checked={ selectedExperienceLevel === option.value }
109110
screenReaderLabel={ option.label }
110-
className="nfd-w-[30%] nfd-flex-grow [&>label]:nfd-h-full [&>label]:nfd-flex"
111+
className="nfd-w-[30%] nfd-flex-grow [&>label]:nfd-h-full [&>label]:nfd-flex mobile:nfd-w-full"
111112
onChange={ handleChange }
112113
>
113114
<div className="nfd-flex nfd-flex-col nfd-self-stretch nfd-gap-3 nfd-text-left">

0 commit comments

Comments
 (0)