From 9a22b255645287bad642d3e320a23d584121990e Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 24 Apr 2022 17:29:49 +0530
Subject: [PATCH] Show popup window in full screen at mobile devices
---
src/app/molecules/dialog/Dialog.jsx | 2 +-
src/app/molecules/dialog/Dialog.scss | 2 +-
src/app/molecules/popup-window/PopupWindow.jsx | 3 ++-
src/app/molecules/popup-window/PopupWindow.scss | 11 ++++++++++-
src/app/molecules/room-tile/RoomTile.jsx | 1 -
src/app/organisms/drag-drop/DragDrop.jsx | 2 +-
src/app/organisms/drag-drop/DragDrop.scss | 2 +-
src/app/organisms/search/Search.jsx | 2 +-
src/app/organisms/search/Search.scss | 2 +-
9 files changed, 18 insertions(+), 9 deletions(-)
diff --git a/src/app/molecules/dialog/Dialog.jsx b/src/app/molecules/dialog/Dialog.jsx
index a59520f6..2f29971d 100644
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -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}
diff --git a/src/app/molecules/dialog/Dialog.scss b/src/app/molecules/dialog/Dialog.scss
index 77e5f059..269d909e 100644
--- a/src/app/molecules/dialog/Dialog.scss
+++ b/src/app/molecules/dialog/Dialog.scss
@@ -1,4 +1,4 @@
-.dialog-model {
+.dialog-modal {
--modal-height: 656px;
max-height: min(100%, var(--modal-height));
display: flex;
diff --git a/src/app/molecules/popup-window/PopupWindow.jsx b/src/app/molecules/popup-window/PopupWindow.jsx
index 1133252a..4179f49a 100644
--- a/src/app/molecules/popup-window/PopupWindow.jsx
+++ b/src/app/molecules/popup-window/PopupWindow.jsx
@@ -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}
diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss
index f03d1dcd..3251b02d 100644
--- a/src/app/molecules/popup-window/PopupWindow.scss
+++ b/src/app/molecules/popup-window/PopupWindow.scss
@@ -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 {
diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
index 7dd4292b..95481ece 100644
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -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';
diff --git a/src/app/organisms/drag-drop/DragDrop.jsx b/src/app/organisms/drag-drop/DragDrop.jsx
index 4fd0bb7f..e92f8a70 100644
--- a/src/app/organisms/drag-drop/DragDrop.jsx
+++ b/src/app/organisms/drag-drop/DragDrop.jsx
@@ -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}
>
diff --git a/src/app/organisms/drag-drop/DragDrop.scss b/src/app/organisms/drag-drop/DragDrop.scss
index 6361553f..2e5b4f51 100644
--- a/src/app/organisms/drag-drop/DragDrop.scss
+++ b/src/app/organisms/drag-drop/DragDrop.scss
@@ -1,4 +1,4 @@
-.drag-drop__model {
+.drag-drop__modal {
box-shadow: none;
text-align: center;
diff --git a/src/app/organisms/search/Search.jsx b/src/app/organisms/search/Search.jsx
index 1eddbf67..d40d8615 100644
--- a/src/app/organisms/search/Search.jsx
+++ b/src/app/organisms/search/Search.jsx
@@ -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}
diff --git a/src/app/organisms/search/Search.scss b/src/app/organisms/search/Search.scss
index 97106e0a..3612d742 100644
--- a/src/app/organisms/search/Search.scss
+++ b/src/app/organisms/search/Search.scss
@@ -1,6 +1,6 @@
@use '../../partials/dir';
-.search-dialog__model {
+.search-dialog__modal {
--modal-height: 380px;
height: 100%;
background-color: var(--bg-surface);