diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl index 6ec39797e9..3aac06a4c2 100644 --- a/assets/css/src/newsletter_editor/components/sidebar.styl +++ b/assets/css/src/newsletter_editor/components/sidebar.styl @@ -126,3 +126,34 @@ $widget-icon-width = 30px .mailpoet_widget_title display: none + +/* Browser preview modal */ +.mailpoet_browser_preview_toggle + height: 30px + padding: 10px 0 + text-align: center + +.mailpoet_browser_preview_toggle > label + display: inline-block + margin: 0 5px + +.mailpoet_browser_preview_container + margin: auto + height: calc(100% - 60px) + transition: width 0.5s + border: 20px solid white + border-radius: 20px + box-sizing: border-box + -moz-box-sizing: border-box + -webkit-box-sizing: border-box + background: white + padding: 15px 0 + +.mailpoet_browser_preview_container_desktop + width: 100% + +.mailpoet_browser_preview_container_mobile + width: 350px + +.mailpoet_browser_preview_iframe + border: 1px solid #c3c3c3 diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js index 484ec7438d..3e9228c0c5 100644 --- a/assets/js/src/newsletter_editor/components/sidebar.js +++ b/assets/js/src/newsletter_editor/components/sidebar.js @@ -345,6 +345,11 @@ define([ Module.NewsletterPreviewView = Marionette.View.extend({ getTemplate: function () { return window.templates.newsletterPreview; }, + events: function () { + return { + 'change .mailpoet_browser_preview_type': 'changeBrowserPreviewType' + }; + }, initialize: function (options) { this.previewUrl = options.previewUrl; this.width = '100%'; @@ -358,6 +363,17 @@ define([ width: this.width, height: this.height }; + }, + changeBrowserPreviewType: function (event) { + var value = jQuery(event.target).val(); + + if (value === 'mobile') { + this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_desktop'); + this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_mobile'); + } else { + this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_desktop'); + this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_mobile'); + } } }); diff --git a/views/newsletter/templates/components/newsletterPreview.hbs b/views/newsletter/templates/components/newsletterPreview.hbs index a5740689da..2aa0f426ea 100644 --- a/views/newsletter/templates/components/newsletterPreview.hbs +++ b/views/newsletter/templates/components/newsletterPreview.hbs @@ -1 +1,11 @@ - +