From 9955d0d937f9b8d43ef15e22ae7b493492b05f3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= Date: Tue, 9 Apr 2019 12:52:57 +0200 Subject: [PATCH] Add new illustrations and two-column layout for welcome wizard [MAILPOET-1927] --- assets/css/src/components/_welcomeWizard.scss | 34 ++++++ .../steps/email_course_step.jsx | 7 -- .../src/welcome_wizard/steps_controller.jsx | 99 ++++++++++-------- .../assets/welcome-wizard/step1.20190409.png | Bin 0 -> 38664 bytes .../assets/welcome-wizard/step2.20190409.png | Bin 0 -> 39229 bytes .../assets/welcome-wizard/step3.20190409.png | Bin 0 -> 33515 bytes .../step4-woocommerce.20190409.png | Bin 0 -> 24088 bytes .../assets/welcome-wizard/step4.20190409.png | Bin 0 -> 38162 bytes views/welcome_wizard.html | 7 +- 9 files changed, 92 insertions(+), 55 deletions(-) create mode 100644 plugin_repository/assets/welcome-wizard/step1.20190409.png create mode 100644 plugin_repository/assets/welcome-wizard/step2.20190409.png create mode 100644 plugin_repository/assets/welcome-wizard/step3.20190409.png create mode 100644 plugin_repository/assets/welcome-wizard/step4-woocommerce.20190409.png create mode 100644 plugin_repository/assets/welcome-wizard/step4.20190409.png diff --git a/assets/css/src/components/_welcomeWizard.scss b/assets/css/src/components/_welcomeWizard.scss index ae3a28934e..f8d76e4c9b 100644 --- a/assets/css/src/components/_welcomeWizard.scss +++ b/assets/css/src/components/_welcomeWizard.scss @@ -17,6 +17,40 @@ } } +.mailpoet_welcome_wizard_flex { + align-items: center; + display: flex; +} + +.mailpoet_welcome_wizard_illustration { + flex-grow: 1; + padding: 60px 40px 40px 60px; + text-align: right; + width: 50%; + + img { + height: 400px; + max-width: 100%; + width: auto; + } + + @media screen and (max-width: 782px) { + display: none; + } +} + +.mailpoet_welcome_wizard_step { + flex-grow: 1; + padding: 60px 60px 40px 40px; + text-align: left; + width: 50%; + + @media screen and (max-width: 782px) { + padding: 30px; + width: 100%; + } +} + .mailpoet_welcome_wizard_step_content { margin-top: 40px; max-width: 620px; diff --git a/assets/js/src/welcome_wizard/steps/email_course_step.jsx b/assets/js/src/welcome_wizard/steps/email_course_step.jsx index 7e91caad52..6f7f9610e4 100644 --- a/assets/js/src/welcome_wizard/steps/email_course_step.jsx +++ b/assets/js/src/welcome_wizard/steps/email_course_step.jsx @@ -7,12 +7,6 @@ const WelcomeWizardEmailCourseStep = props => (

{MailPoet.I18n.t('welcomeWizardEmailCourseTitle')}

{MailPoet.I18n.t('welcomeWizardEmailCourseText')}

-