diff --git a/wagtail_hallo/static/css/hallo.css b/wagtail_hallo/static/css/hallo.css index 5ddc46f..81b1668 100644 --- a/wagtail_hallo/static/css/hallo.css +++ b/wagtail_hallo/static/css/hallo.css @@ -201,7 +201,7 @@ display: block; } -/* +/* These styles correspond to the image formats defined in wagtailimages/formats.py, so that images displayed in the rich text field receive more or less the same styling that they would receive on the site front-end. @@ -231,27 +231,27 @@ } /* Page Editor */ -.object .halloeditor { +.halloeditor { padding-top: 1em; padding-bottom: 1em; } -.object .halloeditor.expanded { - padding-top: 5em; +.halloeditor.expanded { + padding-top: 7em; padding-bottom: 2em; } -.object.full .halloeditor { +.full .halloeditor { padding-top: 3em; padding-bottom: 3em; } -.object.full .halloeditor.expanded { +.full .halloeditor.expanded { padding-top: 5em; padding-bottom: 5em; } -.object.full .error .halloeditor { +.full .error .halloeditor { background-color: #ffe6e6; } @@ -273,7 +273,7 @@ font-family: Roboto Slab, Georgia, serif; } @media screen and (min-width: breakpoint-min(sm)) { - .object.full .halloeditor { + .full .halloeditor { border-width: 0 1px; } } diff --git a/wagtail_hallo/static/js/hallo-editor.js b/wagtail_hallo/static/js/hallo-editor.js index d6d1d32..3da43ca 100644 --- a/wagtail_hallo/static/js/hallo-editor.js +++ b/wagtail_hallo/static/js/hallo-editor.js @@ -88,12 +88,14 @@ /* Hallo's toolbar will reposition itself on the scroll event. This is useful since animating the fields can cause it to be positioned badly initially. */ - $(window).trigger('scroll'); + // Adding .content-wrapper as a triggered element makes this work + // in Wagtail 4. + $(window).add('.content-wrapper').trigger('scroll'); }); }) .on('hallodeactivated', function (event) { $(event.target).removeClass('expanded', 200, function () { - $(window).trigger('scroll'); + $(window).add('.content-wrapper').trigger('scroll'); }); }); setupLinkTooltips(editor); diff --git a/wagtail_hallo/static/js/vendor/hallo.js b/wagtail_hallo/static/js/vendor/hallo.js index 6c4bb84..0ad69dc 100644 --- a/wagtail_hallo/static/js/vendor/hallo.js +++ b/wagtail_hallo/static/js/vendor/hallo.js @@ -459,7 +459,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -598,7 +598,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -627,7 +627,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -735,7 +735,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -787,7 +787,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -838,7 +838,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -913,7 +913,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1023,7 +1023,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1301,7 +1301,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1672,7 +1672,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1808,7 +1808,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1951,7 +1951,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2042,7 +2042,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2521,7 +2521,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2583,7 +2583,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2620,7 +2620,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2781,7 +2781,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2825,7 +2825,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2942,7 +2942,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2979,7 +2979,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3034,7 +3034,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3163,7 +3163,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3184,12 +3184,18 @@ this.toolbar.show(); jQuery(this.options.parentElement).append(this.toolbar); this._bindEvents(); - jQuery(window).on('resize', function (event) { - return _this.setPosition(); - }); - jQuery(window).on('scroll', function (event) { - return _this.setPosition(); - }); + // Adding .content-wrapper as a triggering element makes these work + // in Wagtail 4. + jQuery(window) + .add('.content-wrapper') + .on('resize', function (event) { + return _this.setPosition(); + }); + jQuery(window) + .add('.content-wrapper') + .on('scroll', function (event) { + return _this.setPosition(); + }); if (this.options.parentElement === 'body') { el = jQuery(this.element); widthToAdd = parseFloat(el.css('padding-left')); @@ -3232,9 +3238,11 @@ return; } this.toolbar.css('position', 'absolute'); + // The 44 is to account for the changes to the Page Editor UI in + // Wagtail 4. this.toolbar.css( 'top', - this.element.offset().top - this.toolbar.outerHeight(), + this.element.offset().top - this.toolbar.outerHeight() + 44, ); if (this.options.affix) { scrollTop = jQuery(window).scrollTop(); @@ -3249,7 +3257,6 @@ this.toolbar.css('position', 'fixed'); this.toolbar.css('top', this.options.affixTopOffset); } - } else { } return this.toolbar.css('left', this.element.offset().left - 2); @@ -3267,7 +3274,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3396,7 +3403,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3582,7 +3589,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3676,4 +3683,4 @@ }, }); })(jQuery); -}.call(this)); +}).call(this);