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

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

@@ -57,9 +57,8 @@ const PositionedPopoverContent = ({
<Portal>
<div
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',
className,
)}
style={{
...styles,
@@ -71,15 +70,17 @@ const PositionedPopoverContent = ({
}}
data-popover={id}
>
<div className="md:hidden">
<div className="flex items-center justify-end px-3">
<button className="rounded-full border border-border p-1" onClick={togglePopover}>
<Icon type="close" className="h-4 w-4" />
</button>
<div className={className}>
<div className="md:hidden">
<div className="flex items-center justify-end px-3">
<button className="rounded-full border border-border p-1" onClick={togglePopover}>
<Icon type="close" className="h-4 w-4" />
</button>
</div>
<HorizontalSeparator classes="my-2" />
</div>
<HorizontalSeparator classes="my-2" />
{children}
</div>
{children}
</div>
</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);
--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 {
@@ -31,9 +40,16 @@ html {
body {
font-size: var(--sn-stylekit-base-font-size);
background-color: var(--sn-stylekit-background-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,
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',