aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-07-09 08:36:52 +0200
committerlonkaars <loek@pipeframe.xyz>2021-07-09 08:36:52 +0200
commit06b284fd063ab5f75ff68bbcf5629e8ba66770b3 (patch)
tree7c5306a1f323e6c1d0d02b34b54a5f455c5f510c /pages
parentc80a8b2615f2b576c1a022b16141d54f2c24f6a2 (diff)
more icons and manifests
Diffstat (limited to 'pages')
-rw-r--r--pages/_app.tsx2
-rw-r--r--pages/editor.tsx34
-rw-r--r--pages/mobile/index.tsx44
3 files changed, 76 insertions, 4 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 92f91af..a42ad6c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -18,8 +18,6 @@ export default function Pressure({ Component, pageProps }) {
<Head>
<title>pressure</title>
<link as='style' href='/font/font.css' />
- <link rel='manifest' href='/manifest.json' />
- <meta name='theme-color' content='#171D33' />
</Head>
<Component {...pageProps} />
</>;
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 95085e1..bde174f 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,4 +1,5 @@
import { createState, Downgraded, none, State, useHookstate } from '@hookstate/core';
+import Head from 'next/head';
import { CSSProperties, ReactNode, Ref, useEffect, useRef, useState } from 'react';
import { animated, SpringRef, SpringValues, useSpring } from 'react-spring';
import { useDrag } from 'react-use-gesture';
@@ -1400,6 +1401,39 @@ export default function Index() {
}, []);
return <>
+ <Head>
+ <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
+ <meta name='theme-color' content='#171D33' />
+ <link rel='manifest' href='/editor/manifest.json' />
+
+ <link rel='apple-touch-icon' sizes='512x512' href='/img/icon-editor-ios-512x512.png' />
+ <link rel='apple-touch-icon' sizes='384x384' href='/img/icon-editor-ios-384x384.png' />
+ <link rel='apple-touch-icon' sizes='192x192' href='/img/icon-editor-ios-192x192.png' />
+ <link rel='apple-touch-icon' sizes='180x180' href='/img/icon-editor-ios-180x180.png' />
+ <link rel='apple-touch-icon' sizes='152x152' href='/img/icon-editor-ios-152x152.png' />
+ <link rel='apple-touch-icon' sizes='144x144' href='/img/icon-editor-ios-144x144.png' />
+ <link rel='apple-touch-icon' sizes='128x128' href='/img/icon-editor-ios-128x128.png' />
+ <link rel='apple-touch-icon' sizes='120x120' href='/img/icon-editor-ios-120x120.png' />
+ <link rel='apple-touch-icon' sizes='96x96' href='/img/icon-editor-ios-96x96.png' />
+ <link rel='apple-touch-icon' sizes='72x72' href='/img/icon-editor-ios-72x72.png' />
+ </Head>
+ <style
+ children='
+ html, body {
+ position: fixed;
+ overflow: hidden;
+ width: 100vw;
+ height: 100vh;
+ }
+ '
+ />
+ <style
+ children='
+ body {
+ background-color: var(--c300);
+ }
+ '
+ />
<div className='appGrid posabs a0'>
<TitleBar />
<SettingsPane />
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' />