rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: iOS safe area using CSS (#1610)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-22 00:22:11 +05:30
committed by GitHub
parent 9dfeac7489
commit 8fa566336c
5 changed files with 44 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mobile/html/Web.bundle/src/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="viewport-fit=cover, width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="web-src/app.css" /> <link rel="stylesheet" href="web-src/app.css" />
<script> <script>
window.defaultSyncServer = "https://api.standardnotes.com"; window.defaultSyncServer = "https://api.standardnotes.com";

38
packages/mobile/src/MobileWebAppContainer.tsx
View File

@@ -1,20 +1,13 @@
import { MobileDevice, MobileDeviceEvent } from '@Lib/Interface' import { MobileDevice, MobileDeviceEvent } from '@Lib/Interface'
import { IsDev } from '@Lib/Utils' import { IsDev } from '@Lib/Utils'
import { ReactNativeToWebEvent } from '@standardnotes/snjs' import { ReactNativeToWebEvent } from '@standardnotes/snjs'
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Platform, SafeAreaView } from 'react-native' import { Platform } from 'react-native'
import { WebView, WebViewMessageEvent } from 'react-native-webview' import { WebView, WebViewMessageEvent } from 'react-native-webview'
import { ThemeContext } from 'styled-components'
import styled from 'styled-components/native'
import { AppStateObserverService } from './AppStateObserverService' import { AppStateObserverService } from './AppStateObserverService'
const LoggingEnabled = IsDev const LoggingEnabled = IsDev
const StyledSafeAreaView = styled(SafeAreaView)`
flex: 1;
${(props) => `background-color: ${props.theme.stylekitBackgroundColor}`}
`
export const MobileWebAppContainer = () => { export const MobileWebAppContainer = () => {
const [identifier, setIdentifier] = useState(Math.random()) const [identifier, setIdentifier] = useState(Math.random())
@@ -26,7 +19,6 @@ export const MobileWebAppContainer = () => {
} }
const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => void }) => { const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => void }) => {
const theme = useContext(ThemeContext)
const webViewRef = useRef<WebView>(null) const webViewRef = useRef<WebView>(null)
const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/src/index.html' const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/src/index.html'
const stateService = useMemo(() => new AppStateObserverService(), []) const stateService = useMemo(() => new AppStateObserverService(), [])
@@ -180,20 +172,18 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
/* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable @typescript-eslint/no-empty-function */
return ( return (
<StyledSafeAreaView theme={theme}> <WebView
<WebView ref={webViewRef}
ref={webViewRef} source={{ uri: sourceUri }}
source={{ uri: sourceUri }} originWhitelist={['*']}
originWhitelist={['*']} onLoad={() => {}}
onLoad={() => {}} onError={(err) => console.error('An error has occurred', err)}
onError={(err) => console.error('An error has occurred', err)} onHttpError={() => console.error('An HTTP error occurred')}
onHttpError={() => console.error('An HTTP error occurred')} onMessage={onMessage}
onMessage={onMessage} allowFileAccess={true}
allowFileAccess={true} allowUniversalAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true} injectedJavaScriptBeforeContentLoaded={injectedJS}
injectedJavaScriptBeforeContentLoaded={injectedJS} />
/>
</StyledSafeAreaView>
) )
/* eslint-enable @typescript-eslint/no-empty-function */ /* eslint-enable @typescript-eslint/no-empty-function */
} }

19
packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
View File

@@ -57,9 +57,8 @@ const PositionedPopoverContent = ({
<Portal> <Portal>
<div <div
className={classNames( className={classNames(
'absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs', 'safe-area-padding absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
overrideZIndex ? overrideZIndex : 'z-dropdown-menu', overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
className,
)} )}
style={{ style={{
...styles, ...styles,
@@ -71,15 +70,17 @@ const PositionedPopoverContent = ({
}} }}
data-popover={id} data-popover={id}
> >
<div className="md:hidden"> <div className={className}>
<div className="flex items-center justify-end px-3"> <div className="md:hidden">
<button className="rounded-full border border-border p-1" onClick={togglePopover}> <div className="flex items-center justify-end px-3">
<Icon type="close" className="h-4 w-4" /> <button className="rounded-full border border-border p-1" onClick={togglePopover}>
</button> <Icon type="close" className="h-4 w-4" />
</button>
</div>
<HorizontalSeparator classes="my-2" />
</div> </div>
<HorizontalSeparator classes="my-2" /> {children}
</div> </div>
{children}
</div> </div>
</Portal> </Portal>
) )

16
packages/web/src/stylesheets/_main.scss
View File

@@ -23,6 +23,15 @@
--sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font); --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);
--reach-checkbox: 1; --reach-checkbox: 1;
--safe-area-inset-top: env(safe-area-inset-top, 0);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
--safe-area-inset-left: env(safe-area-inset-left, 0);
--safe-area-inset-right: env(safe-area-inset-right, 0);
--safe-viewport-height: calc(
var(--viewport-height) - calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom))
);
} }
html { html {
@@ -31,9 +40,16 @@ html {
body { body {
font-size: var(--sn-stylekit-base-font-size); font-size: var(--sn-stylekit-base-font-size);
background-color: var(--sn-stylekit-background-color);
color: var(--sn-stylekit-foreground-color); color: var(--sn-stylekit-foreground-color);
} }
body,
.safe-area-padding {
padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom)
var(--safe-area-inset-left);
}
html, html,
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',

6
packages/web/tailwind.config.js
View File

@@ -43,16 +43,16 @@ module.exports = {
125: '31.25rem', 125: '31.25rem',
}, },
height: { height: {
screen: 'var(--viewport-height)', screen: 'var(--safe-viewport-height)',
}, },
minHeight: { minHeight: {
1: '0.25rem', 1: '0.25rem',
2: '0.5rem', 2: '0.5rem',
screen: 'var(--viewport-height)', screen: 'var(--safe-viewport-height)',
}, },
maxHeight: { maxHeight: {
110: '27.5rem', 110: '27.5rem',
screen: 'var(--viewport-height)', screen: 'var(--safe-viewport-height)',
}, },
zIndex: { zIndex: {
'editor-content': 'var(--z-index-editor-content)', 'editor-content': 'var(--z-index-editor-content)',