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

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