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

Refactor forms column block to container queries

Browse Source 
[MAILPOET-5917]
This commit is contained in:
Pavel Dohnal
2024-02-23 10:46:00 +01:00
committed by Aschepikov
parent 8ba4335dfb
commit 91ba2dc89d
5 changed files with 26 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
mailpoet/assets/css/src/components-public/_public.scss
View File

@@ -1,6 +1,7 @@
@use 'sass:math';
$form-break-small-width: 500px;
$form-container-break-small-width: 400px;
$form-block-margin: 20px;
$form-columns-with-background-padding: 10px;
$form-columns-space-between: 20px;
@@ -242,6 +243,11 @@ div.mailpoet_form:not(.mailpoet_form_fixed_bar) {
}
}
.mailpoet_form_columns_container {
container-name: columns;
container-type: inline-size;
}
.mailpoet_form_columns {
display: flex;
flex-wrap: nowrap;
@@ -258,19 +264,17 @@ div.mailpoet_form:not(.mailpoet_form_fixed_bar) {
&.mailpoet_vertically_align_bottom {
align-items: flex-start;
}
}
&.mailpoet_stack_on_mobile {
@include breakpoint-max-width(#{($form-break-small-width - 1)}) {
@include maxWidthColumns;
}
}
.mailpoet_form_tight_container &.mailpoet_stack_on_mobile {
@container columns (width < #{($form-container-break-small-width)}) {
.mailpoet_form_columns.mailpoet_stack_on_mobile {
@include maxWidthColumns;
}
}
.mailpoet_form_column {
container-name: column;
container-type: inline-size;
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -288,23 +292,16 @@ div.mailpoet_form:not(.mailpoet_form_fixed_bar) {
align-self: flex-end;
}
@include breakpoint-min-width($form-break-small-width) {
.mailpoet_form_form:not(.mailpoet_form_tight_container)
.mailpoet_column_with_background
&
.mailpoet_paragraph:last-child {
margin-bottom: 0 !important;
}
}
.mailpoet_stack_on_mobile & {
@include breakpoint-max-width(#{($form-break-small-width - 1)}) {
@include maxWidthColumn;
}
}
}
.mailpoet_form_tight_container .mailpoet_stack_on_mobile & {
@include maxWidthColumn;
@container column (width > #{($form-container-break-small-width)}) {
.mailpoet_paragraph:last-child {
margin-bottom: 0;
}
}

6
mailpoet/assets/js/src/form-editor/form-preview.ts
View File

@@ -142,12 +142,6 @@ jQuery(($) => {
);
}
}
// Detect tight container
$previewForm.removeClass('mailpoet_form_tight_container');
if ($previewForm.width() < 400) {
$previewForm.addClass('mailpoet_form_tight_container');
}
};
window.addEventListener('message', updateForm, false);

21
mailpoet/assets/js/src/public.tsx
View File

@@ -241,17 +241,6 @@ jQuery(($) => {
setTimeout(renderCaptcha, 400, element, 1);
});
/**
* @param form jQuery object of form form.mailpoet_form
*/
function checkFormContainer(form) {
if (form.width() < 400) {
form.addClass('mailpoet_form_tight_container');
} else {
form.removeClass('mailpoet_form_tight_container');
}
}
/**
* Sets the cookie for the form after dismissing the form
* Uses cookie expiration time defined on the form
@@ -312,7 +301,6 @@ jQuery(($) => {
function doDisplayForm(formDiv, showOverlay) {
formDiv.addClass('active');
checkFormContainer(formDiv);
if (showOverlay) {
formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
@@ -424,19 +412,10 @@ jQuery(($) => {
showForm(formDiv, showOverlay);
});
$(window).on('resize', () => {
$('.mailpoet_form').each((_, element) => {
// Detect form is placed in tight container
const formDiv = $(element);
checkFormContainer(formDiv);
});
});
// setup form validation
$('form.mailpoet_form').each((_, element) => {
const form = $(element);
// Detect form is placed in tight container
checkFormContainer(form.closest('div.mailpoet_form'));
form.parsley().on('form:validated', () => {
// clear messages
form.find('.mailpoet_message > p').hide();

2
mailpoet/lib/Form/Block/Columns.php
View File

@@ -15,7 +15,7 @@ class Columns {
}
public function render(array $block, string $content): string {
return "<div {$this->getClass($block['params'] ?? [])}{$this->getStyles($block['params'] ?? [])}>$content</div>";
return "<div class='mailpoet_form_columns_container'><div {$this->getClass($block['params'] ?? [])}{$this->getStyles($block['params'] ?? [])}>$content</div></div>";
}
private function getStyles(array $params): string {

20
mailpoet/tests/unit/Form/Block/ColumnsTest.php
View File

@@ -30,14 +30,14 @@ class ColumnsTest extends \MailPoetUnitTest {
public function testItShouldRenderColumns() {
$html = $this->columns->render($this->block, 'content');
verify($html)->equals('<div class="mailpoet_form_columns mailpoet_paragraph mailpoet_stack_on_mobile">content</div>');
verify($html)->stringContainsString('<div class="mailpoet_form_columns mailpoet_paragraph mailpoet_stack_on_mobile">content</div>');
}
public function testItShouldRenderVerticalAlignClass() {
$block = $this->block;
$block['params']['vertical_alignment'] = 'top';
$html = $this->columns->render($block, 'content');
$column = $this->htmlParser->getElementByXpath($html, '//div[1]');
$column = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$class = $this->htmlParser->getAttribute($column, 'class');
verify($class->textContent)->stringContainsString('mailpoet_vertically_align_top');
}
@@ -46,7 +46,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['class_name'] = 'my-class';
$html = $this->columns->render($block, 'content');
$column = $this->htmlParser->getElementByXpath($html, '//div[1]');
$column = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$class = $this->htmlParser->getAttribute($column, 'class');
verify($class->textContent)->stringContainsString('my-class');
}
@@ -54,7 +54,7 @@ class ColumnsTest extends \MailPoetUnitTest {
public function testItShouldRenderStackOnMobileClassWhenFlagIsNotSet() {
$block = $this->block;
$html = $this->columns->render($block, 'content');
$column = $this->htmlParser->getElementByXpath($html, '//div[1]');
$column = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$class = $this->htmlParser->getAttribute($column, 'class');
verify($class->textContent)->stringContainsString('mailpoet_stack_on_mobile');
}
@@ -63,7 +63,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['is_stacked_on_mobile'] = '1';
$html = $this->columns->render($block, 'content');
$column = $this->htmlParser->getElementByXpath($html, '//div[1]');
$column = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$class = $this->htmlParser->getAttribute($column, 'class');
verify($class->textContent)->stringContainsString('mailpoet_stack_on_mobile');
}
@@ -72,7 +72,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['is_stacked_on_mobile'] = '0';
$html = $this->columns->render($block, 'content');
$column = $this->htmlParser->getElementByXpath($html, '//div[1]');
$column = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$class = $this->htmlParser->getAttribute($column, 'class');
verify($class->textContent)->stringNotContainsString('mailpoet_stack_on_mobile');
}
@@ -81,7 +81,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['background_color'] = '#ffffff';
$html = $this->columns->render($block, 'content');
$columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
$columns = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$style = $this->htmlParser->getAttribute($columns, 'style');
verify($style->textContent)->stringContainsString('background-color:#ffffff;');
$class = $this->htmlParser->getAttribute($columns, 'class');
@@ -92,7 +92,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['text_color'] = '#ffffee';
$html = $this->columns->render($block, 'content');
$columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
$columns = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$style = $this->htmlParser->getAttribute($columns, 'style');
verify($style->textContent)->stringContainsString('color:#ffffee;');
}
@@ -101,7 +101,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['gradient'] = 'linear-gradient(red, yellow)';
$html = $this->columns->render($block, 'content');
$columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
$columns = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$style = $this->htmlParser->getAttribute($columns, 'style');
verify($style->textContent)->stringContainsString('background:linear-gradient(red, yellow);');
$class = $this->htmlParser->getAttribute($columns, 'class');
@@ -112,7 +112,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['padding'] = ['top' => '1em', 'right' => '2em', 'bottom' => '3em', 'left' => '4em'];
$html = $this->columns->render($block, 'content');
$columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
$columns = $this->htmlParser->getElementByXpath($html, '//div[contains(@class, \'mailpoet_form_columns\')]/div[1]');
$style = $this->htmlParser->getAttribute($columns, 'style');
verify($style->textContent)->stringContainsString('padding:1em 2em 3em 4em;');
}