discourse/app/assets/stylesheets/common
David Taylor 88ec2320dc
UX: Only close modal for full 'click' events outside (#23566)
Previously we were using 'mouseup', which meant that if you started the click inside, and then dragged to outside the modal, it would still close. This kind of dragging action is common when selecting text, and having it close the modal can be very frustrating.

Simply switching to a 'click' listener doesn't totally solve the problem, because when a click event involves dragging from one element to another, the browser will fire the event on "the most specific ancestor element that contained both elements". For modals, the most specific common ancestor was still the `modal-middle-container`, which would cause the modal to close.

Therefore, this commit sets the modal containers to have `pointer-events: none`, and sets up the click listener on the `.modal-backdrop` element, which is **adjacent** to the modal in the DOM. That means that click events fired on any ancestors of the modal will not accidentally trigger closure.
2023-09-25 14:23:59 +01:00
..
admin A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
base UX: Only close modal for full 'click' events outside (#23566) 2023-09-25 14:23:59 +01:00
components A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
foundation A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
modal DEV: converts user-status modal to component (#23168) 2023-08-21 16:19:21 +02:00
select-kit UX: More tweaks to compact tag picker (#22859) 2023-07-28 12:11:24 -04:00
d-editor.scss UX: prevent overscroll behaviour in composer (#23056) 2023-08-10 10:23:41 +02:00
font-variables.scss
input_tip.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
loading-slider.scss FEATURE: Introduce 'loading slider' for page navigations (#22042) 2023-07-05 14:59:24 +01:00
printer-friendly.scss DEV: Remove lazy-yt and replace with lazy-videos (#20722) 2023-03-29 11:54:25 -04:00
software-update-prompt.scss REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
topic-entrance.scss REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
topic-timeline.scss UX: fix mobile timeline footer button positioning (#23470) 2023-09-07 18:26:35 -04:00
whcm.scss A11Y: Improve accessibility in WHCM themes (#18606) 2022-10-17 07:07:46 -07:00