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 ( +
+
+ ParaView Glance +

+ This application is not yet optimized for mobile. Please use a + desktop. +

+

+ For interactive 3D samples on mobile, check out  + vtk.js. +

+
+ + Kitware + +
+
+
+ ); +} + +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, };