Hide spacers and limit dividers height in form on mobile

[MAILPOET-3024]
This commit is contained in:
Rostislav Wolny
2020-07-07 13:08:10 +02:00
committed by Veljko V
parent f956c5e13e
commit a6b8330968
3 changed files with 21 additions and 4 deletions

View File

@@ -389,6 +389,16 @@ div.mailpoet_form_slide_in.active {
justify-content: center; justify-content: center;
margin-bottom: $form-block-margin; margin-bottom: $form-block-margin;
width: 100%; width: 100%;
@include breakpoint-max-width($form-break-small-width - 1) {
&:not(.mailpoet_has_divider) {
display: none;
}
&.mailpoet_has_divider {
max-height: 10px;
}
}
} }
.mailpoet_message { .mailpoet_message {

View File

@@ -13,9 +13,16 @@ class Divider {
]; ];
public function render($block): string { public function render($block): string {
$classes = isset($block['params']['class_name']) ? $block['params']['class_name'] : ''; $classes = ['mailpoet_spacer'];
if (isset($block['params']['type']) && $block['params']['type'] === 'divider') {
$classes[] = 'mailpoet_has_divider';
}
if (!empty($block['params']['class_name'])) {
$classes[] = $block['params']['class_name'];
}
$classAttr = join(' ', $classes);
$height = $block['params']['height'] ?? self::DEFAULT_ATTRIBUTES['height']; $height = $block['params']['height'] ?? self::DEFAULT_ATTRIBUTES['height'];
return "<div class='mailpoet_spacer $classes' style='height: {$height}px;'>" return "<div class='{$classAttr}' style='height: {$height}px;'>"
. $this->renderDivider($block) . $this->renderDivider($block)
. '</div>'; . '</div>';
} }

View File

@@ -62,7 +62,7 @@ class DividerTest extends \MailPoetUnitTest {
expect($result)->contains('height: 12px;'); expect($result)->contains('height: 12px;');
expect($result)->contains("class='mailpoet_divider"); expect($result)->contains("class='mailpoet_divider");
expect($result)->contains("class='mailpoet_spacer"); expect($result)->contains("class='mailpoet_spacer mailpoet_has_divider");
expect($result)->contains("border-top-style: dotted;"); expect($result)->contains("border-top-style: dotted;");
expect($result)->contains("border-top-width: 10px;"); expect($result)->contains("border-top-width: 10px;");
expect($result)->contains("border-top-color: red;"); expect($result)->contains("border-top-color: red;");