diff --git a/src/App.tsx b/src/App.tsx index ed8637e..e19b71f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { TwakeMuiThemeProvider } from "@linagora/twake-mui"; -import { Suspense, useEffect } from "react"; +import { Suspense, useEffect, useState } from "react"; import { Route, Routes } from "react-router-dom"; import { push } from "redux-first-history"; import { HistoryRouter as Router } from "redux-first-history/rr6"; @@ -13,6 +13,7 @@ import { Loading } from "./components/Loading/Loading"; import { AVAILABLE_LANGUAGES } from "./features/Settings/constants"; import HandleLogin from "./features/User/HandleLogin"; import { CallbackResume } from "./features/User/LoginCallback"; +import { ScreenTooSmall } from "./ScreenTooSmall"; import { WebSocketGate } from "./websocket/WebSocketGate"; import { @@ -62,6 +63,20 @@ function App() { } }, [error, dispatch]); + const SMALL_SCREEN_QUERY = "(max-width: 925px)"; + const [isTooSmall, setIsTooSmall] = useState( + () => window.matchMedia(SMALL_SCREEN_QUERY).matches + ); + + useEffect(() => { + const mediaQuery = window.matchMedia(SMALL_SCREEN_QUERY); + const onChange = (event: MediaQueryListEvent) => + setIsTooSmall(event.matches); + setIsTooSmall(mediaQuery.matches); + mediaQuery.addEventListener("change", onChange); + return () => mediaQuery.removeEventListener("change", onChange); + }, []); + return ( - }> - - - - } /> - } /> - } /> - } /> - - - - - {appLoading && } + {isTooSmall ? ( + + ) : ( + <> + }> + + + + } /> + } /> + } /> + } /> + + + + + {appLoading && } + + )} ); diff --git a/src/ScreenTooSmall.tsx b/src/ScreenTooSmall.tsx new file mode 100644 index 0000000..9ccf169 --- /dev/null +++ b/src/ScreenTooSmall.tsx @@ -0,0 +1,32 @@ +import calendarImage from "@/static/images/calendar.svg"; +import { Box, Typography } from "@linagora/twake-mui"; +import { useI18n } from "twake-i18n"; + +export function ScreenTooSmall() { + const { t } = useI18n(); + return ( + + logo + + {t("mobile.comingSoon.title")} + + {t("mobile.comingSoon.subtitle")} + + + ); +} diff --git a/src/locales/en.json b/src/locales/en.json index acde8e4..1e31d41 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -331,5 +331,11 @@ "10": "November", "11": "December" } + }, + "mobile": { + "comingSoon": { + "subtitle": "Please open Twake Calendar on a desktop to enjoy all features. A fully optimized mobile version is coming soon.", + "title": "Mobile version coming soon" + } } } diff --git a/src/locales/fr.json b/src/locales/fr.json index ef67b70..1d445ae 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -332,5 +332,11 @@ "10": "Novembre", "11": "Décembre" } + }, + "mobile": { + "comingSoon": { + "subtitle": "Veuillez ouvrir Twake Calendar sur un ordinateur pour profiter de toutes les fonctionnalités. Une version mobile optimisée arrive bientôt.", + "title": "Version mobile bientôt disponible" + } } } diff --git a/src/locales/ru.json b/src/locales/ru.json index 63e144a..1091463 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -332,5 +332,11 @@ "10": "Ноябрь", "11": "Декабрь" } + }, + "mobile": { + "comingSoon": { + "subtitle": "Пожалуйста, откройте Twake Calendar на компьютере, чтобы воспользоваться всеми функциями. Полностью оптимизированная мобильная версия скоро появится.", + "title": "Мобильная версия скоро будет доступна" + } } } diff --git a/src/locales/vi.json b/src/locales/vi.json index a454810..718f094 100644 --- a/src/locales/vi.json +++ b/src/locales/vi.json @@ -330,5 +330,11 @@ "10": "Tháng 11", "11": "Tháng 12" } + }, + "mobile": { + "comingSoon": { + "subtitle": "Vui lòng mở Twake Calendar trên máy tính để sử dụng đầy đủ tính năng. Phiên bản di động được tối ưu hóa hoàn toàn sẽ sớm ra mắt.", + "title": "Phiên bản di động sắp ra mắt" + } } }