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

Add mailpoet-automation-section-content to define a max-width for section content

Browse Source 
[MAILPOET-4536]
This commit is contained in:
David Remer
2022-11-03 08:57:35 +02:00
committed by Jan Jakeš
parent 945ff65358
commit 6ad315b8de
4 changed files with 97 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
mailpoet/assets/css/src/components-automation-listing/_sections.scss
View File

@ -11,6 +11,19 @@
} }
.mailpoet-automation-section { .mailpoet-automation-section {
@include full-width;
}
.mailpoet-automation-white-background {
background: #fff;
}
.mailpoet-automation-section-content {
display: block;
margin: auto;
max-width: 1072px;
padding: 65px 0;
h2 { h2 {
font-size: 23px; font-size: 23px;
font-weight: 400; font-weight: 400;
@ -29,14 +42,10 @@
} }
.mailpoet-automation-section-hero { .mailpoet-automation-section-hero {
background: #fff;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-top: -20px; margin-top: -20px;
padding: 65px;
@include full-width;
h1 { h1 {
font-size: 32px; font-size: 32px;
@ -71,7 +80,7 @@
} }
.mailpoet-section-templates { .mailpoet-section-templates {
padding: 48px 64px 48px 84px; padding: 48px 0;
.components-button { .components-button {
display: block; display: block;
@ -129,13 +138,9 @@
} }
.mailpoet-section-build-your-own { .mailpoet-section-build-your-own {
background: #fff;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: 64px;
@include full-width;
ol { ol {
list-style: decimal-leading-zero inside; list-style: decimal-leading-zero inside;

66
mailpoet/assets/js/src/automation/sections/build-your-own-section.tsx
View File

@ -46,39 +46,41 @@ export function BuildYourOwnSection(): JSX.Element {
const selectedItem = list.filter((item) => item.slug === itemOpen)[0]; const selectedItem = list.filter((item) => item.slug === itemOpen)[0];
return ( return (
<section className="mailpoet-automation-section mailpoet-section-build-your-own"> <section className="mailpoet-automation-section mailpoet-automation-white-background">
<div> <div className="mailpoet-automation-section-content mailpoet-section-build-your-own">
<h2>{__('Build your own automation workflows', 'mailpoet')}</h2> <div>
<p> <h2>{__('Build your own automation workflows', 'mailpoet')}</h2>
{__( <p>
'Create customized email sequences with our new automation editor.', {__(
'mailpoet', 'Create customized email sequences with our new automation editor.',
)} 'mailpoet',
</p> )}
<ol> </p>
{list.map((item, index) => ( <ol>
<li {list.map((item, index) => (
key={item.slug} <li
className={itemOpen === item.slug ? 'open' : ''} key={item.slug}
> className={itemOpen === item.slug ? 'open' : ''}
<div className="marker"> >
{index < 10 ? `0${index + 1}` : index + 1} <div className="marker">
</div> {index < 10 ? `0${index + 1}` : index + 1}
<div> </div>
<button <div>
type="button" <button
onClick={() => setItemOpen(item.slug)} type="button"
className="mailpoet-section-build-list-button" onClick={() => setItemOpen(item.slug)}
> className="mailpoet-section-build-list-button"
{item.title} >
</button> {item.title}
<p>{item.text}</p> </button>
</div> <p>{item.text}</p>
</li> </div>
))} </li>
</ol> ))}
</ol>
</div>
<img src={selectedItem.image} alt={selectedItem.title} />
</div> </div>
<img src={selectedItem.image} alt={selectedItem.title} />
</section> </section>
); );
} }

52
mailpoet/assets/js/src/automation/sections/hero-section.tsx
View File

@ -9,33 +9,35 @@ export function HeroSection(): JSX.Element {
[], [],
); );
return ( return (
<section className="mailpoet-automation-section mailpoet-automation-section-hero"> <section className="mailpoet-automation-section mailpoet-automation-white-background">
<div> <div className="mailpoet-automation-section-content mailpoet-automation-section-hero">
<span className="mailpoet-automation-preheading"> <div>
{__('Automations', 'mailpoet')} <span className="mailpoet-automation-preheading">
</span> {__('Automations', 'mailpoet')}
<h1>{__('Better engagement begins with automation', 'mailpoet')}</h1> </span>
<p> <h1>{__('Better engagement begins with automation', 'mailpoet')}</h1>
{__( <p>
'Send emails that inform, reward, and engage your audience through powerful segmenting, scheduling, and design tools.', {__(
'mailpoet', 'Send emails that inform, reward, and engage your audience through powerful segmenting, scheduling, and design tools.',
)} 'mailpoet',
</p> )}
</p>
<OptionButton <OptionButton
variant="primary" variant="primary"
onClick={() => { onClick={() => {
window.location.href = MailPoet.urls.automationTemplates; window.location.href = MailPoet.urls.automationTemplates;
}} }}
title={__('Start with a template', 'mailpoet')} title={__('Start with a template', 'mailpoet')}
> >
{buttonActions} {buttonActions}
</OptionButton> </OptionButton>
</div>
<img
src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
alt={__('Welcome', 'mailpoet')}
/>
</div> </div>
<img
src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
alt={__('Welcome', 'mailpoet')}
/>
</section> </section>
); );
} }

42
mailpoet/assets/js/src/automation/sections/templates-section.tsx
View File

@ -8,26 +8,28 @@ export function TemplatesSection(): JSX.Element {
const templates = workflowTemplates.slice(0, 3); const templates = workflowTemplates.slice(0, 3);
return ( return (
<section className="mailpoet-automation-section mailpoet-section-templates"> <section className="mailpoet-automation-section">
<h2>{__('Explore essentials', 'mailpoet')}</h2> <div className="mailpoet-automation-section-content mailpoet-section-templates">
<p> <h2>{__('Explore essentials', 'mailpoet')}</h2>
{__( <p>
'Choose from our list of pre-made templates and make it your own.', {__(
'mailpoet', 'Choose from our list of pre-made templates and make it your own.',
)} 'mailpoet',
</p> )}
<ul className="mailpoet-section-template-list"> </p>
{templates.map((template) => ( <ul className="mailpoet-section-template-list">
<TemplateListItem {templates.map((template) => (
key={template.slug} <TemplateListItem
template={template} key={template.slug}
heading="h3" template={template}
/> heading="h3"
))} />
</ul> ))}
<Button variant="link" href={MailPoet.urls.automationTemplates}> </ul>
{__('Browse all templates →', 'mailpoet')} <Button variant="link" href={MailPoet.urls.automationTemplates}>
</Button> {__('Browse all templates →', 'mailpoet')}
</Button>
</div>
</section> </section>
); );
} }