Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: disable scrolling when modal is open on desktop (#30035) 

Uses the `htmlClass` to automagically set the `modal-open` class to
`<html>` so that we can do `overflow: hidden` and prevent the
"background" behind the modal from scrolling while the modal is open.

Internal ref - t/142760
This commit is contained in:
Régis Hanol 2024-12-02 15:08:43 +01:00 committed by GitHub
parent 5d5f9ecfb9
commit ab32623c07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/d-modal.gjs
View File

@ -12,6 +12,7 @@ import DButton from "discourse/components/d-button";
import FlashMessage from "discourse/components/flash-message"; import FlashMessage from "discourse/components/flash-message";
import concatClass from "discourse/helpers/concat-class"; import concatClass from "discourse/helpers/concat-class";
import element from "discourse/helpers/element"; import element from "discourse/helpers/element";
import htmlClass from "discourse/helpers/html-class";
import { import {
disableBodyScroll, disableBodyScroll,
enableBodyScroll, enableBodyScroll,
@ -261,6 +262,7 @@ export default class DModal extends Component {
@inline={{@inline}} @inline={{@inline}}
@append={{true}} @append={{true}}
> >
{{htmlClass "modal-open"}}
<this.dynamicElement <this.dynamicElement
class={{concatClass class={{concatClass
"modal" "modal"

4
app/assets/stylesheets/desktop/modal.scss
View File

@ -1,3 +1,7 @@
html.modal-open {
overflow: hidden;
}
.d-modal { .d-modal {
--modal-max-width: 600px; --modal-max-width: 600px;
--modal-width: 30em; // set in ems to scale with user font-size --modal-width: 30em; // set in ems to scale with user font-size