client: Use fullscreen dialogs on mobile.

client/components/DescriptionDialog.js

@@ -3,14 +3,21 @@ import stripIndent from 'strip-indent';
 import Markdown from 'react-markdown';
 import Button from 'material-ui/Button';
 import Dialog, { DialogTitle, DialogContent, DialogActions } from 'material-ui/Dialog';
+import getContext from 'recompose/getContext';
+
+const enhance = getContext({
+  isMobile: React.PropTypes.bool,
+});
 
 const DescriptionDialog = ({
   server,
+  isMobile,
   isOpen,
   onCloseDescription,
 }) => (
   <Dialog
     open={isOpen}
+    fullScreen={isMobile}
     onRequestClose={onCloseDescription}
   >
     <DialogTitle>
@@ -41,4 +48,4 @@ const DescriptionDialog = ({
   </Dialog>
 );
 
-export default DescriptionDialog;
+export default enhance(DescriptionDialog);

client/components/Layout.js

@@ -1,12 +1,20 @@
 import React from 'react';
 import Head from 'next/head';
 import ThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import withContext from 'recompose/withContext';
+import isMobile from 'is-mobile';
 
 import createUwaveTheme from '../muiTheme';
 import AppBar from './AppBar';
 import Text from './Text';
 import SSR from './SSR';
 
+const enhance = withContext({
+  isMobile: React.PropTypes.bool,
+}, ({ userAgent }) => ({
+  isMobile: isMobile(userAgent),
+}));
+
 const Layout = ({
   children,
   userAgent,
@@ -74,4 +82,4 @@ const Layout = ({
   </ThemeProvider>
 );
 
-export default Layout;
+export default enhance(Layout);

client/package.json

@@ -5,6 +5,7 @@
   "description": "Web client for üWave's server listing.",
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^6.8.0",
+    "is-mobile": "^0.2.2",
     "isomorphic-fetch": "^2.2.1",
     "material-ui": "^1.0.0-alpha.3",
     "ms": "^0.7.2",