filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-27 11:03:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(AuthWrapper): ios 100vh bug

Browse Source
This commit is contained in:
Aminejv 2022-01-06 18:26:09 +01:00 committed by Martina
parent c71f41111f
commit 6fbf8f5d00
2 changed files with 8 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/core/Auth/components/AuthWrapper.js
View File

@ -4,6 +4,7 @@ import * as System from "~/components/system";
import * as Styles from "~/common/styles"; import * as Styles from "~/common/styles";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { FullHeightLayout } from "~/components/system/components/FullHeightLayout";
const AUTH_BACKGROUNDS = [ const AUTH_BACKGROUNDS = [
"https://slate.textile.io/ipfs/bafybeigostprfkuuvuqlehutki32fnvshm2dyy4abqotmlffsca4f7qs7a", "https://slate.textile.io/ipfs/bafybeigostprfkuuvuqlehutki32fnvshm2dyy4abqotmlffsca4f7qs7a",
@ -52,28 +53,9 @@ const STYLES_AUTH_FOOTER = (theme) => css`
} }
`; `;
export default function AuthWrapper({ children, isMobile, ...props }) { export default function AuthWrapper({ children, ...props }) {
// NOTE(amine): fix for 100vh overflowing in mobile
// https://bugs.webkit.org/show_bug.cgi?id=141832
const [height, setHeight] = React.useState();
React.useLayoutEffect(() => {
if (!window) return;
const updateHeight = () => {
const windowInnerHeight = window.innerHeight;
setHeight(windowInnerHeight);
};
updateHeight();
// NOTE(amine): don't update height on mobile
if (isMobile) return;
window.addEventListener("resize", updateHeight);
return () => window.addEventListener("resize", updateHeight);
}, [isMobile]);
return ( return (
<div style={{ backgroundImage: `url(${backgroundUrl})`, minHeight: height }} {...props}> <FullHeightLayout style={{ backgroundImage: `url(${backgroundUrl})` }} {...props}>
{children} {children}
<footer css={STYLES_AUTH_FOOTER}> <footer css={STYLES_AUTH_FOOTER}>
<System.H6 as="a" href="/terms"> <System.H6 as="a" href="/terms">
@ -87,6 +69,6 @@ export default function AuthWrapper({ children, isMobile, ...props }) {
Join Discord Join Discord
</System.H6> </System.H6>
</footer> </footer>
</div> </FullHeightLayout>
); );
} }

8
components/system/components/Input.js
View File

@ -176,9 +176,9 @@ export class Input extends React.Component {
this.props.onSubmit(e); this.props.onSubmit(e);
}; };
_handleKeyDown = (e) => { _handleKeyUp = (e) => {
if (this.props.onKeyDown) { if (this.props.onKeyUp) {
this.props.onKeyDown(e); this.props.onKeyUp(e);
} }
if ((e.which === 13 || e.keyCode === 13) && this.props.onSubmit) { if ((e.which === 13 || e.keyCode === 13) && this.props.onSubmit) {
@ -260,7 +260,7 @@ export class Input extends React.Component {
: this.props.onFocus : this.props.onFocus
} }
onBlur={this.props.onBlur} onBlur={this.props.onBlur}
onKeyDown={this._handleKeyDown} onKeyUp={this._handleKeyUp}
autoComplete="off" autoComplete="off"
disabled={this.props.disabled} disabled={this.props.disabled}
readOnly={this.props.readOnly} readOnly={this.props.readOnly}