Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

New wizard step layout

Browse Source 
[MAILPOET-2784]
This commit is contained in:
Ján Mikláš
2020-06-23 14:51:08 +02:00
committed by Veljko V
parent 2aaefb8af1
commit 717d33a220
4 changed files with 121 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
assets/css/src/components-plugin/_welcome-wizard.scss
View File

@@ -8,8 +8,64 @@
.wrap { .wrap {
margin: 0; margin: 0;
} }
div.updated,
div.error,
.notice {
display: none !important;
}
} }
.mailpoet-wizard-logo {
margin-bottom: 100px;
text-align: center;
@include respond-to(medium-screen) {
margin-bottom: 20px;
}
}
.mailpoet-wizard-step {
align-items: center;
display: flex;
justify-content: center;
@include respond-to(medium-screen) {
flex-direction: column;
}
}
.mailpoet-wizard-step-illustration {
margin-right: $grid-gap;
max-width: $grid-column;
text-align: center;
width: 100%;
img {
max-height: 300px;
max-width: 100%;
}
@include respond-to(medium-screen) {
margin-right: 0;
max-width: $grid-column-small;
img {
max-height: 240px;
}
}
}
.mailpoet-wizard-step-content {
max-width: $grid-column-small + $grid-gap + $grid-column;
width: 100%;
@include respond-to(medium-screen) {
max-width: $grid-column;
}
}
// Welcome wizard - old styles
.mailpoet_welcome_wizard_header { .mailpoet_welcome_wizard_header {
text-align: center; text-align: center;
} }
@@ -25,45 +81,12 @@
} }
} }
.mailpoet_welcome_wizard_flex {
display: flex;
}
.mailpoet_welcome_wizard_illustration {
flex-grow: 1;
height: 400px;
padding: 60px 40px 40px 60px;
text-align: right;
width: 50%;
img {
max-height: 100%;
max-width: 100%;
}
@include breakpoint-max-width(782px) {
display: none;
}
}
.mailpoet_welcome_wizard_step_revenue_tracking { .mailpoet_welcome_wizard_step_revenue_tracking {
input[type='submit'] { input[type='submit'] {
margin-top: 40px; margin-top: 40px;
} }
} }
.mailpoet_welcome_wizard_step {
flex-grow: 1;
padding: 60px 60px 40px 40px;
text-align: left;
width: 50%;
@include breakpoint-max-width(782px) {
padding: 30px;
width: 100%;
}
}
.mailpoet_welcome_wizard_step_content { .mailpoet_welcome_wizard_step_content {
margin-top: 40px; margin-top: 40px;
max-width: 620px; max-width: 620px;

4
assets/js/src/wizard/layout/step_layout.jsx
View File

@@ -5,8 +5,8 @@ import WelcomeWizardStepLayoutBody from './step_layout_body.jsx';
const WelcomeWizardStepLayout = (props) => ( const WelcomeWizardStepLayout = (props) => (
<> <>
<div className="mailpoet_welcome_wizard_header"> <div className="mailpoet-wizard-logo">
<img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" /> <img src={window.mailpoet_logo_url} width="160" height="50" alt="MailPoet logo" />
</div> </div>
<WelcomeWizardStepLayoutBody <WelcomeWizardStepLayoutBody
illustrationUrl={props.illustrationUrl} illustrationUrl={props.illustrationUrl}

6
assets/js/src/wizard/layout/step_layout_body.jsx
View File

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
const WelcomeWizardStepLayoutBody = (props) => ( const WelcomeWizardStepLayoutBody = (props) => (
<div className="mailpoet_welcome_wizard_flex"> <div className="mailpoet-wizard-step">
<div className="mailpoet_welcome_wizard_illustration"> <div className="mailpoet-wizard-step-illustration">
<img src={props.illustrationUrl} alt="" /> <img src={props.illustrationUrl} alt="" />
</div> </div>
<div className="mailpoet_welcome_wizard_step"> <div className="mailpoet-wizard-step-content">
{props.children} {props.children}
</div> </div>
</div> </div>

122
assets/js/src/wizard/welcome_wizard_controller.jsx
View File

@@ -78,72 +78,70 @@ const WelcomeWizardStepsController = (props) => {
<> <>
<Steps count={stepsCount} current={step} /> <Steps count={stepsCount} current={step} />
<StepsContent> <StepsContent>
<div className="mailpoet_welcome_wizard_steps"> { stepName === 'WelcomeWizardSenderStep'
{ stepName === 'WelcomeWizardSenderStep' ? (
? ( <WelcomeWizardStepLayout
<WelcomeWizardStepLayout illustrationUrl={window.wizard_sender_illustration_url}
illustrationUrl={window.wizard_sender_illustration_url} >
> <WelcomeWizardSenderStep
<WelcomeWizardSenderStep update_sender={updateSender}
update_sender={updateSender} submit_sender={submitSender}
submit_sender={submitSender} finish={skipSenderStep}
finish={skipSenderStep} loading={loading}
loading={loading} sender={sender}
sender={sender} />
/> </WelcomeWizardStepLayout>
</WelcomeWizardStepLayout> ) : null}
) : null}
{ stepName === 'WelcomeWizardMigratedUserStep' { stepName === 'WelcomeWizardMigratedUserStep'
? ( ? (
<WelcomeWizardStepLayout <WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url} illustrationUrl={window.wizard_sender_illustration_url}
> >
<WelcomeWizardMigratedUserStep <WelcomeWizardMigratedUserStep
next={() => redirect(step)} next={() => redirect(step)}
/> />
</WelcomeWizardStepLayout> </WelcomeWizardStepLayout>
) : null} ) : null}
{ stepName === 'WelcomeWizardEmailCourseStep' { stepName === 'WelcomeWizardEmailCourseStep'
? ( ? (
<WelcomeWizardStepLayout <WelcomeWizardStepLayout
illustrationUrl={window.wizard_email_course_illustration_url} illustrationUrl={window.wizard_email_course_illustration_url}
> >
<WelcomeWizardEmailCourseStep <WelcomeWizardEmailCourseStep
next={() => redirect(step)} next={() => redirect(step)}
/> />
</WelcomeWizardStepLayout> </WelcomeWizardStepLayout>
) : null} ) : null}
{ stepName === 'WelcomeWizardUsageTrackingStep' { stepName === 'WelcomeWizardUsageTrackingStep'
? ( ? (
<WelcomeWizardStepLayout <WelcomeWizardStepLayout
illustrationUrl={window.wizard_tracking_illustration_url} illustrationUrl={window.wizard_tracking_illustration_url}
> >
<WelcomeWizardUsageTrackingStep <WelcomeWizardUsageTrackingStep
skip_action={() => redirect(step)} skip_action={() => redirect(step)}
allow_action={activateTracking} allow_action={activateTracking}
allow_text={stepsCount > 3 allow_text={stepsCount > 3
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')} ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
loading={loading} loading={loading}
/> />
</WelcomeWizardStepLayout> </WelcomeWizardStepLayout>
) : null} ) : null}
{ stepName === 'WelcomeWizardPitchMSSStep' { stepName === 'WelcomeWizardPitchMSSStep'
? ( ? (
<WelcomeWizardStepLayout <WelcomeWizardStepLayout
illustrationUrl={window.wizard_MSS_pitch_illustration_url} illustrationUrl={window.wizard_MSS_pitch_illustration_url}
> >
<WelcomeWizardPitchMSSStep <WelcomeWizardPitchMSSStep
next={() => redirect(step)} next={() => redirect(step)}
subscribersCount={window.subscribers_count} subscribersCount={window.subscribers_count}
mailpoetAccountUrl={window.mailpoet_account_url} mailpoetAccountUrl={window.mailpoet_account_url}
/> />
</WelcomeWizardStepLayout> </WelcomeWizardStepLayout>
) : null} ) : null}
</div>
</StepsContent> </StepsContent>
</> </>
); );