diff --git a/addons/web/static/src/legacy/scss/base_frontend.scss b/addons/web/static/src/legacy/scss/base_frontend.scss index c300b3db38e..585ce965ec5 100644 --- a/addons/web/static/src/legacy/scss/base_frontend.scss +++ b/addons/web/static/src/legacy/scss/base_frontend.scss @@ -24,6 +24,3 @@ html, body, #wrapwrap { flex: 1 0 auto; } } -.modal-open #wrapwrap { - overflow: hidden; -} diff --git a/addons/web/static/src/legacy/scss/bootstrap_review.scss b/addons/web/static/src/legacy/scss/bootstrap_review.scss index df56c20ba29..bd37b1bd68f 100644 --- a/addons/web/static/src/legacy/scss/bootstrap_review.scss +++ b/addons/web/static/src/legacy/scss/bootstrap_review.scss @@ -66,21 +66,24 @@ // Modify modals so that their scrollable element is the modal-body (except in // mobile). +// TODO: should be replaced by .modal-dialog-scrollable class @include media-breakpoint-up(sm) { - .modal-dialog { - height: 100%; - padding: $modal-dialog-margin-y-sm-up 0; - margin: 0 auto; - } - .modal-content { - max-height: 100%; - } - .modal-header, .modal-footer { - flex: 0 0 auto; - } - .modal-body { - overflow: auto; - min-height: 0; + :not(.s_popup) > .modal { + .modal-dialog { + height: 100%; + padding: $modal-dialog-margin-y-sm-up 0; + margin: 0 auto; + } + .modal-content { + max-height: 100%; + } + .modal-header, .modal-footer { + flex: 0 0 auto; + } + .modal-body { + overflow: auto; + min-height: 0; + } } } diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index f204d3a8943..c26425acf8f 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1478,9 +1478,6 @@ $ribbon-padding: 100px; // Cookies Bar #website_cookies_bar { - :not(.o_cookies_popup) { - bottom: 0; - } .o_cookies_discrete { .js_close_popup.o_cookies_bar_text_button, .o_cookies_bar_text_policy { @include media-breakpoint-down(lg) { diff --git a/addons/website/static/src/snippets/s_popup/000.js b/addons/website/static/src/snippets/s_popup/000.js index 1f367af9f3b..52a951910ca 100644 --- a/addons/website/static/src/snippets/s_popup/000.js +++ b/addons/website/static/src/snippets/s_popup/000.js @@ -2,7 +2,6 @@ odoo.define('website.s_popup', function (require) { 'use strict'; const config = require('web.config'); -const dom = require('web.dom'); const publicWidget = require('web.public.widget'); const utils = require('web.utils'); @@ -52,7 +51,6 @@ const PopupWidget = publicWidget.Widget.extend({ display = 'afterDelay'; delay = 5000; } - this.$('.modal').removeClass('s_popup_middle').addClass('s_popup_bottom'); } if (display === 'afterDelay') { @@ -118,66 +116,5 @@ const PopupWidget = publicWidget.Widget.extend({ publicWidget.registry.popup = PopupWidget; -// Try to update the scrollbar based on the current context (modal state) -// and only if the modal overflowing has changed - -function _updateScrollbar(ev) { - const context = ev.data; - const isOverflowing = dom.hasScrollableContent(context._element); - if (context._isOverflowingWindow !== isOverflowing) { - context._isOverflowingWindow = isOverflowing; - context._checkScrollbar(); - context._setScrollbar(); - if (isOverflowing) { - document.body.classList.add('modal-open'); - } else { - document.body.classList.remove('modal-open'); - context._resetScrollbar(); - } - } -} - -// Prevent bootstrap to prevent scrolling and to add the strange body -// padding-right they add if the popup does not use a backdrop (especially -// important for default cookie bar). - -const _baseShowElement = Modal.prototype._showElement; -Modal.prototype._showElement = function () { - _baseShowElement.apply(this, arguments); - - if (this._element.classList.contains('s_popup_no_backdrop')) { - // Update the scrollbar if the content changes or if the window has been - // resized. Note this could technically be done for all modals and not - // only the ones with the s_popup_no_backdrop class but that would be - // useless as allowing content scroll while a modal with that class is - // opened is a very specific Odoo behavior. - $(this._element).on('content_changed.update_scrollbar', this, _updateScrollbar); - $(window).on('resize.update_scrollbar', this, _updateScrollbar); - - this._odooLoadEventCaptureHandler = _.debounce(() => _updateScrollbar({ data: this }, 100)); - this._element.addEventListener('load', this._odooLoadEventCaptureHandler, true); - - _updateScrollbar({ data: this }); - } -}; - -const _baseHideModal = Modal.prototype._hideModal; -Modal.prototype._hideModal = function () { - _baseHideModal.apply(this, arguments); - - // Note: do this in all cases, not only for popup with the - // s_popup_no_backdrop class, as the modal may have lost that class during - // edition before being closed. - this._element.classList.remove('s_popup_overflow_page'); - - $(this._element).off('content_changed.update_scrollbar'); - $(window).off('resize.update_scrollbar'); - - if (this._odooLoadEventCaptureHandler) { - this._element.removeEventListener('load', this._odooLoadEventCaptureHandler, true); - delete this._odooLoadEventCaptureHandler; - } -}; - return PopupWidget; }); diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss index 550827e5bef..7eb56e1a93d 100644 --- a/addons/website/static/src/snippets/s_popup/001.scss +++ b/addons/website/static/src/snippets/s_popup/001.scss @@ -1,20 +1,11 @@ .s_popup[data-vcss='001'] { .modal-content { min-height: $font-size-lg * 2; - max-height: none; border: 0; border-radius: 0; box-shadow: $modal-content-box-shadow-sm-up; } - .modal-dialog { - height: auto; - min-height: 100%; - @include media-breakpoint-down(sm) { - min-height: calc(100% - 2 * #{$modal-dialog-margin}); - } - } - // Close icon .s_popup_close { z-index: $zindex-modal; @@ -42,39 +33,39 @@ } } - // Position option - Middle - .s_popup_middle .modal-dialog { - align-items: center; - } - - // Position option - Top/Bottom - .s_popup_top, - .s_popup_bottom { - .modal-dialog { - margin-right: 0; - &:not(.s_popup_size_full) { - padding: $spacer !important; - } + // Position option + .modal-dialog { + margin: 0 0 0 auto; + min-height: 100%; + &:not(.s_popup_size_full) { + padding: $spacer !important; } } .s_popup_top .modal-dialog { align-items: flex-start; } + .s_popup_middle .modal-dialog { + align-items: center; + margin-right: auto; + } .s_popup_bottom .modal-dialog { align-items: flex-end; } // No backdrop .s_popup_no_backdrop { - // If the popup is taller than the page you should not be able to - // interact with the elements behind, otherwise you should (when there - // is no backdrop). - &:not(.s_popup_overflow_page) { - pointer-events: none; - } + // Allow scrolling on elements behind + pointer-events: none; - .modal-content { - pointer-events: auto; + // Allow Chrome to scroll the modal content even if there is no scroll on the document behind. + // Not needed for Firefox and Safari + .modal-dialog { + height: 100%; + + .modal-content { + max-height:100%; + overflow: auto; + } } } } diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js index 71814c4f64c..4e48b94b4c2 100644 --- a/addons/website/static/src/snippets/s_popup/options.js +++ b/addons/website/static/src/snippets/s_popup/options.js @@ -79,12 +79,6 @@ options.registry.SnippetPopup = options.Class.extend({ this.$bsTarget.modal('hide'); }); }, - /** - * @override - */ - cleanForSave: function () { - this.$target.removeClass("s_popup_overflow_page"); - }, //-------------------------------------------------------------------------- // Options