diff --git a/Sources/index.js b/Sources/index.js
index 2b87ede6..cf3d042f 100644
--- a/Sources/index.js
+++ b/Sources/index.js
@@ -18,6 +18,8 @@ import * as Controls from './controls';
import ReaderFactory from './io/ReaderFactory';
import UI from './ui';
+const MainComponent = UI.MobileOverlay(MainView);
+
export const {
registerReader,
listReaders,
@@ -34,7 +36,7 @@ export function createViewer(container, proxyConfig = null) {
const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
const mainView = ReactDOM.render(
- ,
+ ,
container
);
diff --git a/Sources/ui/MobileOverlay/Overlay.mcss b/Sources/ui/MobileOverlay/Overlay.mcss
new file mode 100644
index 00000000..af1e8e3d
--- /dev/null
+++ b/Sources/ui/MobileOverlay/Overlay.mcss
@@ -0,0 +1,25 @@
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 99;
+ background: $colors.menu;
+}
+
+.centered {
+ text-align: center;
+ font-size: 2em;
+ padding: 15px;
+}
+
+.glance {
+ max-width: 100%;
+}
+
+.kitware {
+ margin: 0 auto;
+ margin-top: 15px;
+ width: 55%;
+}
diff --git a/Sources/ui/MobileOverlay/index.js b/Sources/ui/MobileOverlay/index.js
new file mode 100644
index 00000000..e4ba678e
--- /dev/null
+++ b/Sources/ui/MobileOverlay/index.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import icons from '../../icons';
+
+import style from './Overlay.mcss';
+
+const DEFAULT_WIDTH = 700; // px
+
+function Overlay(props) {
+ return (
+
+
+
+
+ This application is not yet optimized for mobile. Please use a
+ desktop.
+
+
+ For interactive 3D samples on mobile, check out
+ vtk.js.
+
+
+
+
+ );
+}
+
+export default function MobileOverlay(Component, width = DEFAULT_WIDTH) {
+ // right now this is not dynamic; only applies on first run
+ const isMobile = window.innerWidth <= DEFAULT_WIDTH;
+
+ return function WrappedComponent(props) {
+ if (isMobile) {
+ return ;
+ }
+ return ;
+ };
+}
diff --git a/Sources/ui/index.js b/Sources/ui/index.js
index 1d62df16..42d4f99d 100644
--- a/Sources/ui/index.js
+++ b/Sources/ui/index.js
@@ -2,6 +2,7 @@ import Button from './Button';
import Messages from './Messages';
import FaIcon from './FaIcon';
import Menu from './Menu';
+import MobileOverlay from './MobileOverlay';
import Progress from './Progress';
import TitleModal from './TitleModal';
@@ -10,6 +11,7 @@ export default {
Messages,
FaIcon,
Menu,
+ MobileOverlay,
Progress,
TitleModal,
};