diff --git a/assets/css/src/components-public/_public.scss b/assets/css/src/components-public/_public.scss index cc8bec82b6..ec79bab46d 100644 --- a/assets/css/src/components-public/_public.scss +++ b/assets/css/src/components-public/_public.scss @@ -202,8 +202,27 @@ div.mailpoet_form_popup { } } +div.mailpoet_form_fixed_bar { + background-color: white; + box-shadow: 0 4px 35px 0 rgba(195, 65, 2, .2); + display: none; + left: 0; + max-width: 100% !important; + padding: 10px; + position: fixed; + top: 0; + width: 100% !important; + z-index: 1000; + + form { + margin: 0 auto; + max-width: 960px; + } +} + .mailpoet_form_popup_overlay.active, -div.mailpoet_form_popup.active { +div.mailpoet_form_popup.active, +div.mailpoet_form_fixed_bar { display: block; } @@ -215,15 +234,17 @@ div.mailpoet_form_popup.active { } .aligncenter { - display: flex; align-items: center; - justify-content: center; + display: flex; flex-direction: column; + justify-content: center; } + .alignleft { float: left; margin-right: 1em; } + .alignright { float: right; margin-left: 1em; diff --git a/assets/js/src/public.jsx b/assets/js/src/public.jsx index a3c00ec526..f7d49b8ff8 100644 --- a/assets/js/src/public.jsx +++ b/assets/js/src/public.jsx @@ -57,6 +57,23 @@ jQuery(($) => { return true; } + function showForm(formDiv, showOverlay = false) { + const form = formDiv.find('form'); + const background = form.data('background-color'); + formDiv.css('background-color', background || 'white'); + let delay = form.data('delay'); + delay = parseInt(delay, 10); + if (Number.isNaN(delay)) { + delay = 0; + } + setTimeout(() => { + formDiv.addClass('active'); + if (showOverlay) { + formDiv.prev('.mailpoet_form_popup_overlay').addClass('active'); + } + }, delay * 1000); + } + $(() => { const closePopupForm = (formDiv) => { formDiv.removeClass('active'); @@ -69,23 +86,18 @@ jQuery(($) => { closePopupForm(formDiv); }); + $('div.mailpoet_form_fixed_bar').each((index, element) => { + const formDiv = $(element); + showForm(formDiv); + }); + $('div.mailpoet_form_popup').each((index, element) => { const cookieValue = getCookie('popup_form_dismissed'); if (cookieValue === '1') return; const formDiv = $(element); - const form = formDiv.find('form'); - const background = form.data('background-color'); - formDiv.css('background-color', background || 'white'); - let delay = form.data('delay'); - delay = parseInt(delay, 10); - if (Number.isNaN(delay)) { - delay = 0; - } - setTimeout(() => { - formDiv.addClass('active'); - formDiv.prev('.mailpoet_form_popup_overlay').addClass('active'); - }, delay * 1000); + const showOverlay = true; + showForm(formDiv, showOverlay); }); // setup form validation