diff options
| author | lonkaars <loek@pipeframe.xyz> | 2021-07-09 08:36:52 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2021-07-09 08:36:52 +0200 |
| commit | 06b284fd063ab5f75ff68bbcf5629e8ba66770b3 (patch) | |
| tree | 7c5306a1f323e6c1d0d02b34b54a5f455c5f510c /pages/mobile | |
| parent | c80a8b2615f2b576c1a022b16141d54f2c24f6a2 (diff) | |
more icons and manifests
Diffstat (limited to 'pages/mobile')
| -rw-r--r-- | pages/mobile/index.tsx | 44 |
1 files changed, 42 insertions, 2 deletions
diff --git a/pages/mobile/index.tsx b/pages/mobile/index.tsx index 50d2558..5474827 100644 --- a/pages/mobile/index.tsx +++ b/pages/mobile/index.tsx @@ -1,4 +1,5 @@ -import { ReactNode, useState } from 'react'; +import Head from 'next/head'; +import { ReactNode, useEffect, useState } from 'react'; import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; @@ -24,8 +25,45 @@ export function MobileWrapper(props: { nobar?: boolean; }) { var [drawerOpen, setDrawerOpen] = useState(false); + var [iOS, setIOS] = useState(false); + useEffect(() => { + setIOS(process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent)); + }, []); return <div className='mobile'> + <Head> + <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' /> + <meta name='theme-color' content='#171D33' /> + <link rel='manifest' href='/mobile/manifest.json' /> + + <link rel='apple-touch-icon' sizes='512x512' href='/img/icon-remote-ios-512x512.png' /> + <link rel='apple-touch-icon' sizes='384x384' href='/img/icon-remote-ios-384x384.png' /> + <link rel='apple-touch-icon' sizes='192x192' href='/img/icon-remote-ios-192x192.png' /> + <link rel='apple-touch-icon' sizes='180x180' href='/img/icon-remote-ios-180x180.png' /> + <link rel='apple-touch-icon' sizes='152x152' href='/img/icon-remote-ios-152x152.png' /> + <link rel='apple-touch-icon' sizes='144x144' href='/img/icon-remote-ios-144x144.png' /> + <link rel='apple-touch-icon' sizes='128x128' href='/img/icon-remote-ios-128x128.png' /> + <link rel='apple-touch-icon' sizes='120x120' href='/img/icon-remote-ios-120x120.png' /> + <link rel='apple-touch-icon' sizes='96x96' href='/img/icon-remote-ios-96x96.png' /> + <link rel='apple-touch-icon' sizes='72x72' href='/img/icon-remote-ios-72x72.png' /> + </Head> + <style + children=' + html, body { + position: fixed; + overflow: hidden; + width: 100vw; + height: 100vh; + } + ' + /> + <style + children=' + body { + background-color: var(--c300); + } + ' + /> {!props.nobar && <AppBar position='static'> <Toolbar> <IconButton edge='start' color='inherit' aria-label='menu' onClick={() => setDrawerOpen(true)}> @@ -39,6 +77,8 @@ export function MobileWrapper(props: { open={drawerOpen} onOpen={() => setDrawerOpen(true)} onClose={() => setDrawerOpen(false)} + disableBackdropTransition={!iOS} + disableDiscovery={iOS} > <List> <div className='listWrapper'> @@ -52,7 +92,7 @@ export function MobileWrapper(props: { <ListItemIcon children={<HomeRoundedIcon />} /> <ListItemText primary='Home' /> </ListItem> - <div className='b0 posabs dispbl fullwidth'> + <div className='bottomActions posabs dispbl fullwidth'> <ListItem button selected={props.page == 'account'}> <ListItemIcon children={<AccountCircleRoundedIcon />} /> <ListItemText primary='Account' /> |