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

fix: better safe area padding on iOS (#1618)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-23 01:03:36 +05:30
committed by GitHub
parent 5961bc491d
commit 86251b49d3
11 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/index.html
View File

@@ -3,7 +3,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="canonical" href="https://app.standardnotes.com" /> <link rel="canonical" href="https://app.standardnotes.com" />

4
packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
View File

@@ -185,13 +185,13 @@ const ContentListView: FunctionComponent<Props> = ({
<div <div
id="items-column" id="items-column"
className={classNames( className={classNames(
'sn-component section app-column flex h-screen flex-col md:h-full', 'sn-component section app-column flex h-screen flex-col pt-safe-top md:h-full',
'xl:w-87.5 xsm-only:!w-full sm-only:!w-full pointer-coarse:md-only:!w-52 pointer-coarse:lg-only:!w-52', 'xl:w-87.5 xsm-only:!w-full sm-only:!w-full pointer-coarse:md-only:!w-52 pointer-coarse:lg-only:!w-52',
)} )}
aria-label={'Notes & Files'} aria-label={'Notes & Files'}
ref={itemsViewPanelRef} ref={itemsViewPanelRef}
> >
<ResponsivePaneContent paneId={AppPaneId.Items} className="min-h-[85vh]"> <ResponsivePaneContent paneId={AppPaneId.Items}>
<div id="items-title-bar" className="section-title-bar border-b border-solid border-border"> <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
<div id="items-title-bar-container"> <div id="items-title-bar-container">
<input <input

6
packages/web/src/javascripts/Components/Navigation/Navigation.tsx
View File

@@ -11,6 +11,7 @@ import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
import { classNames } from '@/Utils/ConcatenateClassNames' import { classNames } from '@/Utils/ConcatenateClassNames'
import Icon from '../Icon/Icon' import Icon from '../Icon/Icon'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider' import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
import { isIOS } from '@/Utils'
type Props = { type Props = {
application: WebApplication application: WebApplication
@@ -60,7 +61,10 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
return ( return (
<div <div
id="navigation" id="navigation"
className="sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pb-8 md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full" className={classNames(
'sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pt-safe-top md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full',
isIOS() ? 'pb-safe-bottom' : 'pb-2.5',
)}
ref={ref} ref={ref}
> >
<ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content"> <ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">

2
packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View File

@@ -91,7 +91,7 @@ class NoteGroupView extends PureComponent<Props, State> {
return ( return (
<div <div
id={ElementIds.EditorColumn} id={ElementIds.EditorColumn}
className="app-column app-column-third flex min-h-screen flex-col md:h-full md:min-h-0" className="app-column app-column-third flex min-h-screen flex-col pt-safe-top md:h-full md:min-h-0"
> >
<ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow"> <ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow">
{this.state.showMultipleSelectedNotes && ( {this.state.showMultipleSelectedNotes && (

4
packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
View File

@@ -8,7 +8,9 @@ import { PreferencesProps } from './PreferencesProps'
const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = (props) => ( const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = (props) => (
<div className="flex min-h-0 flex-grow flex-col-reverse md:flex-row md:justify-between"> <div className="flex min-h-0 flex-grow flex-col-reverse md:flex-row md:justify-between">
<PreferencesMenuView menu={props.menu} /> <PreferencesMenuView menu={props.menu} />
<PaneSelector {...props} /> <div className="min-h-0 flex-grow overflow-auto bg-contrast">
<PaneSelector {...props} />
</div>
</div> </div>
) )

2
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
View File

@@ -7,7 +7,7 @@ const PreferencesPane: FunctionComponent<{ children?: ReactNode }> = ({ children
{children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children} {children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
</div> </div>
</div> </div>
<div className="flex-shrink basis-[13.75rem]" /> <div className="hidden flex-shrink basis-[13.75rem] md:block" />
</div> </div>
) )

2
packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
View File

@@ -37,7 +37,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
) )
return ( return (
<div className="border-t border-border bg-default px-5 pt-2 pb-6 md:border-0 md:bg-transparent md:px-0 md:py-0"> <div className="border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-transparent md:px-0 md:py-0">
<div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex"> <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
{menuItems.map((pref) => ( {menuItems.map((pref) => (
<PreferencesMenuItem <PreferencesMenuItem

8
packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
View File

@@ -4,8 +4,9 @@ import { observer } from 'mobx-react-lite'
import { PreferencesMenu } from './PreferencesMenu' import { PreferencesMenu } from './PreferencesMenu'
import PreferencesCanvas from './PreferencesCanvas' import PreferencesCanvas from './PreferencesCanvas'
import { PreferencesProps } from './PreferencesProps' import { PreferencesProps } from './PreferencesProps'
import { fitNodeToMobileScreen } from '@/Utils' import { fitNodeToMobileScreen, isIOS } from '@/Utils'
import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile' import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
import { classNames } from '@/Utils/ConcatenateClassNames'
const PreferencesView: FunctionComponent<PreferencesProps> = (props) => { const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
const menu = useMemo( const menu = useMemo(
@@ -31,7 +32,10 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
return ( return (
<div <div
className="absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-contrast" className={classNames(
'absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-default pt-safe-top',
isIOS() ? 'pb-safe-bottom' : 'pb-2',
)}
ref={fitNodeToMobileScreen} ref={fitNodeToMobileScreen}
> >
<div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3"> <div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3">

2
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View File

@@ -16,7 +16,7 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
> >
<DialogContent <DialogContent
aria-label="Note revision history" aria-label="Note revision history"
className="my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]" className="my-0 flex h-screen w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]"
> >
<div className="flex h-full flex-col overflow-hidden bg-default">{children}</div> <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
</DialogContent> </DialogContent>

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

@@ -28,10 +28,6 @@
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
--safe-area-inset-left: env(safe-area-inset-left, 0); --safe-area-inset-left: env(safe-area-inset-left, 0);
--safe-area-inset-right: env(safe-area-inset-right, 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 {
@@ -44,7 +40,6 @@ body {
color: var(--sn-stylekit-foreground-color); color: var(--sn-stylekit-foreground-color);
} }
body,
.safe-area-padding { .safe-area-padding {
padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom)
var(--safe-area-inset-left); var(--safe-area-inset-left);

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

@@ -15,6 +15,10 @@ module.exports = {
87.5: '21.875rem', 87.5: '21.875rem',
125: '31.25rem', 125: '31.25rem',
160: '40rem', 160: '40rem',
'safe-top': 'var(--safe-area-inset-top)',
'safe-bottom': 'var(--safe-area-inset-bottom)',
'safe-left': 'var(--safe-area-inset-left)',
'safe-right': 'var(--safe-area-inset-right)',
}, },
minWidth: { minWidth: {
1: '0.25rem', 1: '0.25rem',
@@ -43,16 +47,16 @@ module.exports = {
125: '31.25rem', 125: '31.25rem',
}, },
height: { height: {
screen: 'var(--safe-viewport-height)', screen: 'var(--viewport-height)',
}, },
minHeight: { minHeight: {
1: '0.25rem', 1: '0.25rem',
2: '0.5rem', 2: '0.5rem',
screen: 'var(--safe-viewport-height)', screen: 'var(--viewport-height)',
}, },
maxHeight: { maxHeight: {
110: '27.5rem', 110: '27.5rem',
screen: 'var(--safe-viewport-height)', screen: 'var(--viewport-height)',
}, },
zIndex: { zIndex: {
'editor-content': 'var(--z-index-editor-content)', 'editor-content': 'var(--z-index-editor-content)',