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

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

@@ -185,13 +185,13 @@ const ContentListView: FunctionComponent<Props> = ({
<div
id="items-column"
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',
)}
aria-label={'Notes & Files'}
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-container">
<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 Icon from '../Icon/Icon'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
import { isIOS } from '@/Utils'
type Props = {
application: WebApplication
@@ -60,7 +61,10 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
return (
<div
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}
>
<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 (
<div
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">
{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) => (
<div className="flex min-h-0 flex-grow flex-col-reverse md:flex-row md:justify-between">
<PreferencesMenuView menu={props.menu} />
<PaneSelector {...props} />
<div className="min-h-0 flex-grow overflow-auto bg-contrast">
<PaneSelector {...props} />
</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}
</div>
</div>
<div className="flex-shrink basis-[13.75rem]" />
<div className="hidden flex-shrink basis-[13.75rem] md:block" />
</div>
)

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

@@ -37,7 +37,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
)
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">
{menuItems.map((pref) => (
<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 PreferencesCanvas from './PreferencesCanvas'
import { PreferencesProps } from './PreferencesProps'
import { fitNodeToMobileScreen } from '@/Utils'
import { fitNodeToMobileScreen, isIOS } from '@/Utils'
import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
import { classNames } from '@/Utils/ConcatenateClassNames'
const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
const menu = useMemo(
@@ -31,7 +32,10 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
return (
<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}
>
<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
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>
</DialogContent>