Show popup window in full screen at mobile devices
This commit is contained in:
parent
44c3dec9dc
commit
9a22b25564
9 changed files with 18 additions and 9 deletions
|
@ -16,7 +16,7 @@ function Dialog({
|
|||
}) {
|
||||
return (
|
||||
<RawModal
|
||||
className={`${className === null ? '' : `${className} `}dialog-model`}
|
||||
className={`${className === null ? '' : `${className} `}dialog-modal`}
|
||||
isOpen={isOpen}
|
||||
onAfterOpen={onAfterOpen}
|
||||
onAfterClose={onAfterClose}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.dialog-model {
|
||||
.dialog-modal {
|
||||
--modal-height: 656px;
|
||||
max-height: min(100%, var(--modal-height));
|
||||
display: flex;
|
||||
|
|
|
@ -58,7 +58,8 @@ function PopupWindow({
|
|||
|
||||
return (
|
||||
<RawModal
|
||||
className={`${className === null ? '' : `${className} `}pw-model`}
|
||||
className={`${className === null ? '' : `${className} `}pw-modal`}
|
||||
overlayClassName="pw-modal__overlay"
|
||||
isOpen={isOpen}
|
||||
onAfterClose={onAfterClose}
|
||||
onRequestClose={onRequestClose}
|
||||
|
|
|
@ -1,9 +1,18 @@
|
|||
@use '../../partials/dir';
|
||||
@use '../../partials/screen';
|
||||
|
||||
.pw-model {
|
||||
.pw-modal {
|
||||
--modal-height: 774px;
|
||||
max-height: var(--modal-height) !important;
|
||||
height: 100%;
|
||||
|
||||
@include screen.smallerThan(mobileBreakpoint) {
|
||||
--modal-height: 100%;
|
||||
border-radius: 0 !important;
|
||||
&__overlay {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pw {
|
||||
|
|
|
@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
|
|||
import './RoomTile.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
import { sanitizeText } from '../../../util/sanitize';
|
||||
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ import Text from '../../atoms/text/Text';
|
|||
function DragDrop({ isOpen }) {
|
||||
return (
|
||||
<RawModal
|
||||
className="drag-drop__model"
|
||||
className="drag-drop__modal"
|
||||
overlayClassName="drag-drop__overlay"
|
||||
isOpen={isOpen}
|
||||
>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.drag-drop__model {
|
||||
.drag-drop__modal {
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
|
||||
|
|
|
@ -199,7 +199,7 @@ function Search() {
|
|||
|
||||
return (
|
||||
<RawModal
|
||||
className="search-dialog__model dialog-model"
|
||||
className="search-dialog__modal dialog-modal"
|
||||
isOpen={isOpen}
|
||||
onAfterOpen={handleAfterOpen}
|
||||
onAfterClose={handleAfterClose}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.search-dialog__model {
|
||||
.search-dialog__modal {
|
||||
--modal-height: 380px;
|
||||
height: 100%;
|
||||
background-color: var(--bg-surface);
|
||||
|
|
Loading…
Reference in a new issue