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 (
+
+
+
+ {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"
+ }
}
}