diff --git a/webapp/src/pages/boardPage.scss b/webapp/src/pages/boardPage.scss index 79b2097e5..2229c7061 100644 --- a/webapp/src/pages/boardPage.scss +++ b/webapp/src/pages/boardPage.scss @@ -14,6 +14,32 @@ > .WSConnection.error { background-color: rgba(230, 192, 192, 0.9); } + + > .mobileWarning { + background-color: rgba(230, 192, 192, 0.9); + text-align: center; + padding: 10px; + display: none; + + div { + width: 100%; + } + + .IconButton { + float: right; + width: 16px; + min-width: 16px; + height: 100%; + + i { + font-size: 16px; + } + } + } + + @media screen and (max-width: 768px) { + .mobileWarning {display: flex;} + } } .Dialog.dialog-back.workspaceSwitcherModal > div > .dialog { diff --git a/webapp/src/pages/boardPage.tsx b/webapp/src/pages/boardPage.tsx index f90a3516c..348e52bc8 100644 --- a/webapp/src/pages/boardPage.tsx +++ b/webapp/src/pages/boardPage.tsx @@ -28,6 +28,9 @@ import {initialLoad, initialReadOnlyLoad} from '../store/initialLoad' import {useAppSelector, useAppDispatch} from '../store/hooks' import {UserSettings} from '../userSettings' +import IconButton from '../widgets/buttons/iconButton' +import CloseIcon from '../widgets/icons/close' + type Props = { readonly?: boolean } @@ -44,6 +47,7 @@ const BoardPage = (props: Props): JSX.Element => { const history = useHistory() const match = useRouteMatch<{boardId: string, viewId: string, cardId?: string, workspaceId?: string}>() const [websocketClosed, setWebsocketClosed] = useState(false) + const [mobileWarningClosed, setMobileWarningClosed] = useState(UserSettings.mobileWarningClosed) let workspaceId = match.params.workspaceId || UserSettings.lastWorkspaceId || '0' @@ -255,6 +259,26 @@ const BoardPage = (props: Props): JSX.Element => { /> } + + {!mobileWarningClosed && +