| @@ -1,8 +1,7 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | defined( 'ABSPATH' ) || exit; |
| 3 | 3 | use YayMail\Utils\TemplateHelpers; |
| 4 | -use YayMail\Models\TemplateModel; | |
| 5 | 4 | |
| 6 | 5 | /** |
| 7 | 6 | * $args includes |
| 8 | 7 | * $element |
| @@ -14,11 +13,56 @@ | ||
| 14 | 13 | } |
| 15 | 14 | |
| 16 | 15 | $element = $args['element']; |
| 17 | 16 | |
| 17 | +// Inline styles survive WooCommerce style_inline (Emogrifier) in email preview. | |
| 18 | +$container_style = 'background-color:#fff;padding:2.5rem 1rem;box-sizing:border-box;'; | |
| 19 | +$skeleton_style = 'display:table;width:100%;'; | |
| 20 | +$skeleton_mb_style = $skeleton_style . 'margin-bottom:10px;'; | |
| 21 | +$content_style = 'display:table-cell;width:100%;vertical-align:top;'; | |
| 22 | +$list_style = 'padding:0;margin:3px;list-style:none;'; | |
| 23 | +$bar_li_base_style = 'height:15px;list-style:none;background:#f2f2f2;border-radius:100px;display:block;margin:0;padding:0;'; | |
| 24 | +$image_li_style = 'width:100%;height:300px;list-style:none;background:#f2f2f2;border-radius:10px;display:block;margin:0;padding:0;'; | |
| 25 | + | |
| 18 | 26 | ob_start(); |
| 19 | 27 | ?> |
| 20 | -<div class="yaymail-skeleton-divider"><div class="yaymail-skeleton yaymail-skeleton-round css-dev-only-do-not-override-scpxro" style="margin-bottom: 10px;"><div class="yaymail-skeleton-content"><ul class="yaymail-skeleton-paragraph"><li style="width: 30%;"></li></ul></div></div><div class="yaymail-skeleton yaymail-skeleton-round yaymail-skeleton-divider__image css-dev-only-do-not-override-scpxro" style="margin-bottom: 10px;"><div class="yaymail-skeleton-content"><ul class="yaymail-skeleton-paragraph"><li style="width: 100%;"></li></ul></div></div><div class="yaymail-skeleton yaymail-skeleton-round css-dev-only-do-not-override-scpxro"><div class="yaymail-skeleton-content"><ul class="yaymail-skeleton-paragraph"><li style="width: 70%;"></li></ul></div></div><div class="yaymail-skeleton yaymail-skeleton-round css-dev-only-do-not-override-scpxro"><div class="yaymail-skeleton-content"><ul class="yaymail-skeleton-paragraph"><li style="width: 100%;"></li></ul></div></div><div class="yaymail-skeleton yaymail-skeleton-round css-dev-only-do-not-override-scpxro"><div class="yaymail-skeleton-content"><ul class="yaymail-skeleton-paragraph"><li style="width: 100%;"></li></ul></div></div></div> | |
| 28 | +<div class="yaymail-skeleton-divider" style="<?php echo esc_attr( $container_style ); ?>"> | |
| 29 | + <div class="yaymail-skeleton yaymail-skeleton-round" style="<?php echo esc_attr( $skeleton_mb_style ); ?>"> | |
| 30 | + <div class="yaymail-skeleton-content" style="<?php echo esc_attr( $content_style ); ?>"> | |
| 31 | + <ul class="yaymail-skeleton-paragraph" style="<?php echo esc_attr( $list_style ); ?>"> | |
| 32 | + <li style="<?php echo esc_attr( $bar_li_base_style . 'width:30%;' ); ?>"></li> | |
| 33 | + </ul> | |
| 34 | + </div> | |
| 35 | + </div> | |
| 36 | + <div class="yaymail-skeleton yaymail-skeleton-round yaymail-skeleton-divider__image" style="<?php echo esc_attr( $skeleton_mb_style ); ?>"> | |
| 37 | + <div class="yaymail-skeleton-content" style="<?php echo esc_attr( $content_style ); ?>"> | |
| 38 | + <ul class="yaymail-skeleton-paragraph" style="<?php echo esc_attr( $list_style ); ?>"> | |
| 39 | + <li style="<?php echo esc_attr( $image_li_style ); ?>"></li> | |
| 40 | + </ul> | |
| 41 | + </div> | |
| 42 | + </div> | |
| 43 | + <div class="yaymail-skeleton yaymail-skeleton-round" style="<?php echo esc_attr( $skeleton_style ); ?>"> | |
| 44 | + <div class="yaymail-skeleton-content" style="<?php echo esc_attr( $content_style ); ?>"> | |
| 45 | + <ul class="yaymail-skeleton-paragraph" style="<?php echo esc_attr( $list_style ); ?>"> | |
| 46 | + <li style="<?php echo esc_attr( $bar_li_base_style . 'width:70%;' ); ?>"></li> | |
| 47 | + </ul> | |
| 48 | + </div> | |
| 49 | + </div> | |
| 50 | + <div class="yaymail-skeleton yaymail-skeleton-round" style="<?php echo esc_attr( $skeleton_style ); ?>"> | |
| 51 | + <div class="yaymail-skeleton-content" style="<?php echo esc_attr( $content_style ); ?>"> | |
| 52 | + <ul class="yaymail-skeleton-paragraph" style="<?php echo esc_attr( $list_style ); ?>"> | |
| 53 | + <li style="<?php echo esc_attr( $bar_li_base_style . 'width:100%;' ); ?>"></li> | |
| 54 | + </ul> | |
| 55 | + </div> | |
| 56 | + </div> | |
| 57 | + <div class="yaymail-skeleton yaymail-skeleton-round" style="<?php echo esc_attr( $skeleton_style ); ?>"> | |
| 58 | + <div class="yaymail-skeleton-content" style="<?php echo esc_attr( $content_style ); ?>"> | |
| 59 | + <ul class="yaymail-skeleton-paragraph" style="<?php echo esc_attr( $list_style ); ?>"> | |
| 60 | + <li style="<?php echo esc_attr( $bar_li_base_style . 'width:100%;' ); ?>"></li> | |
| 61 | + </ul> | |
| 62 | + </div> | |
| 63 | + </div> | |
| 64 | +</div> | |
| 21 | 65 | <?php |
| 22 | 66 | $element_content = ob_get_clean(); |
| 23 | 67 | |
| 24 | 68 | TemplateHelpers::wrap_element_content( $element_content, $element ); |