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

Use larger spacing in modal popup

Browse Source 
[MAILPOET-1510]
This commit is contained in:
Jan Jakeš
2019-01-16 14:47:26 +01:00
parent fdd16b3ee3
commit 390a376829
2 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/src/modal.styl
View File

@@ -1,6 +1,10 @@
modal_title_color = #cfcfcf modal_title_color = #cfcfcf
modal_highlight_background_color = #f1f1f1 modal_highlight_background_color = #f1f1f1
modal_background_color = #fff modal_background_color = #fff
modal_popup_margin = 30px
modal_popup_margin_mobile = 10px
modal_popup_padding = 30px
modal_popup_padding_mobile = 12px
overlay_background_color = rgba(0, 0, 0, 0.6) overlay_background_color = rgba(0, 0, 0, 0.6)
// hide scrollbars on background when a modal window opened // hide scrollbars on background when a modal window opened
@@ -21,6 +25,8 @@ body.mailpoet_modal_opened
display: flex display: flex
align-items: center align-items: center
justify-content: center justify-content: center
padding: modal_popup_margin
box-sizing: border-box
.mailpoet_modal_highlight .mailpoet_modal_highlight
pointer-events: none pointer-events: none
@@ -44,6 +50,7 @@ body.mailpoet_modal_opened
// modal popup // modal popup
.mailpoet_popup .mailpoet_popup
z-index: 25 z-index: 25
max-width: 100%
margin: auto margin: auto
.mailpoet_popup_wrapper .mailpoet_popup_wrapper
@@ -55,6 +62,8 @@ body.mailpoet_modal_opened
height: 96% height: 96%
border-radius: 4px border-radius: 4px
box-shadow: 1px 2px 4px #343434 box-shadow: 1px 2px 4px #343434
box-sizing: border-box
padding: modal_popup_padding
.mailpoet_overlay_hidden .mailpoet_popup_wrapper .mailpoet_overlay_hidden .mailpoet_popup_wrapper
border: 1px solid #333 border: 1px solid #333
@@ -75,7 +84,6 @@ body.mailpoet_modal_opened
font-family: "Lucida Grande", Verdana, Arial, sans-serif font-family: "Lucida Grande", Verdana, Arial, sans-serif
.mailpoet_popup_body .mailpoet_popup_body
padding: 10px 10px 10px 10px
height: 92% height: 92%
.button + .button .button + .button
@@ -166,6 +174,15 @@ body.mailpoet_modal_opened
text-align: right text-align: right
@media screen and (max-width: 782px) @media screen and (max-width: 782px)
.mailpoet_modal_overlay
padding: modal_popup_margin_mobile
.mailpoet_popup
width: 100%
.mailpoet_popup_wrapper
padding: modal_popup_padding_mobile
.mailpoet_modal_overlay.mailpoet_panel_overlay .mailpoet_modal_overlay.mailpoet_panel_overlay
top: 46px top: 46px

23
assets/js/src/modal.js
View File

@@ -312,14 +312,21 @@ define('modal', ['mailpoet', 'jquery'],
switch (this.options.type) { switch (this.options.type) {
case 'popup': case 'popup':
// set popup dimensions // set popup dimensions
jQuery('#mailpoet_popup').css({ if (this.options.width && this.options.width !== 'auto') {
width: this.options.width, jQuery('#mailpoet_popup').css({
height: this.options.height width: this.options.width
}); });
// set popup wrapper height }
jQuery('#mailpoet_popup_wrapper').css({
height: this.options.height if (this.options.height && this.options.height !== 'auto') {
}); jQuery('#mailpoet_popup_wrapper').css({
height: this.options.height
});
jQuery('#mailpoet_popup').css({
height: this.options.height
});
}
if (this.options.minWidth) { if (this.options.minWidth) {
jQuery('#mailpoet_popup').css({ minWidth: this.options.minWidth }); jQuery('#mailpoet_popup').css({ minWidth: this.options.minWidth });
} }