Skip to content

fix: better safe area padding on iOS #1618

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amanharwara merged 11 commits into from
Sep 22, 2022
Merged

fix: better safe area padding on iOS #1618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ca54b0f
fix: better safe area padding on iOS
amanharwara Sep 22, 2022
965d430
Merge branch 'main' into fix/safe-area-new
amanharwara Sep 22, 2022
71a6e07
fix: bottom padding
amanharwara Sep 22, 2022
c3f36f9
fix: history modal
amanharwara Sep 22, 2022
919ce71
fix: add fallback padding for non-iOS platforms
amanharwara Sep 22, 2022
14b85c1
Merge branch 'main' into fix/safe-area-new
amanharwara Sep 22, 2022
e587ba1
Merge branch 'main' into fix/safe-area-new
amanharwara Sep 22, 2022
eaea2be
fix: try platform-based conditional styling
amanharwara Sep 22, 2022
8252937
fix: import
amanharwara Sep 22, 2022
dab484b
Merge branch 'main' into fix/safe-area-new
amanharwara Sep 22, 2022
d88c6d3
fix: platform detection
amanharwara Sep 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/web/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8"/>
<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" />

Expand Down
4 changes: 2 additions & 2 deletions packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion packages/web/src/javascripts/Components/Navigation/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
4 changes: 3 additions & 1 deletion packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
2 changes: 1 addition & 1 deletion ...ages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 0 additions & 5 deletions packages/web/src/stylesheets/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@
--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 {
Expand All @@ -44,7 +40,6 @@ body {
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);
Expand Down
10 changes: 7 additions & 3 deletions packages/web/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ module.exports = {
87.5: '21.875rem',
125: '31.25rem',
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: {
1: '0.25rem',
Expand Down Expand Up @@ -43,16 +47,16 @@ module.exports = {
125: '31.25rem',
},
height: {
screen: 'var(--safe-viewport-height)',
screen: 'var(--viewport-height)',
},
minHeight: {
1: '0.25rem',
2: '0.5rem',
screen: 'var(--safe-viewport-height)',
screen: 'var(--viewport-height)',
},
maxHeight: {
110: '27.5rem',
screen: 'var(--safe-viewport-height)',
screen: 'var(--viewport-height)',
},
zIndex: {
'editor-content': 'var(--z-index-editor-content)',
Expand Down