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 {
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 {
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 {
input[type='submit'] {
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 {
margin-top: 40px;
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) => (
<>
<div className="mailpoet_welcome_wizard_header">
<img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
<div className="mailpoet-wizard-logo">
<img src={window.mailpoet_logo_url} width="160" height="50" alt="MailPoet logo" />
</div>
<WelcomeWizardStepLayoutBody
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';
const WelcomeWizardStepLayoutBody = (props) => (
<div className="mailpoet_welcome_wizard_flex">
<div className="mailpoet_welcome_wizard_illustration">
<div className="mailpoet-wizard-step">
<div className="mailpoet-wizard-step-illustration">
<img src={props.illustrationUrl} alt="" />
</div>
<div className="mailpoet_welcome_wizard_step">
<div className="mailpoet-wizard-step-content">
{props.children}
</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} />
<StepsContent>
<div className="mailpoet_welcome_wizard_steps">
{ stepName === 'WelcomeWizardSenderStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardSenderStep
update_sender={updateSender}
submit_sender={submitSender}
finish={skipSenderStep}
loading={loading}
sender={sender}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardSenderStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardSenderStep
update_sender={updateSender}
submit_sender={submitSender}
finish={skipSenderStep}
loading={loading}
sender={sender}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardMigratedUserStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardMigratedUserStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardMigratedUserStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_sender_illustration_url}
>
<WelcomeWizardMigratedUserStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardEmailCourseStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_email_course_illustration_url}
>
<WelcomeWizardEmailCourseStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardEmailCourseStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_email_course_illustration_url}
>
<WelcomeWizardEmailCourseStep
next={() => redirect(step)}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardUsageTrackingStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_tracking_illustration_url}
>
<WelcomeWizardUsageTrackingStep
skip_action={() => redirect(step)}
allow_action={activateTracking}
allow_text={stepsCount > 3
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
loading={loading}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardUsageTrackingStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_tracking_illustration_url}
>
<WelcomeWizardUsageTrackingStep
skip_action={() => redirect(step)}
allow_action={activateTracking}
allow_text={stepsCount > 3
? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
loading={loading}
/>
</WelcomeWizardStepLayout>
) : null}
{ stepName === 'WelcomeWizardPitchMSSStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_MSS_pitch_illustration_url}
>
<WelcomeWizardPitchMSSStep
next={() => redirect(step)}
subscribersCount={window.subscribers_count}
mailpoetAccountUrl={window.mailpoet_account_url}
/>
</WelcomeWizardStepLayout>
) : null}
</div>
{ stepName === 'WelcomeWizardPitchMSSStep'
? (
<WelcomeWizardStepLayout
illustrationUrl={window.wizard_MSS_pitch_illustration_url}
>
<WelcomeWizardPitchMSSStep
next={() => redirect(step)}
subscribersCount={window.subscribers_count}
mailpoetAccountUrl={window.mailpoet_account_url}
/>
</WelcomeWizardStepLayout>
) : null}
</StepsContent>
</>
);