Merge pull request #8752 from aneequeahmad/login-layout-ipad

login form layout for ipad
Expensify · May 20, 2022 · 02fb4e9 · 02fb4e9
2 parents 837e546 + 77487ee
commit 02fb4e9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -55,7 +55,8 @@ const SignInPageContent = props => (
             <LoginKeyboardAvoidingView
                 behavior="position"
                 contentContainerStyle={[
-                    props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : styles.signInPageWideLeftContentMargin,
+                    props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : {},
+                    !props.isMediumScreenWidth ? styles.signInPageWideLeftContentMargin : {},
                     styles.mb3,
                     StyleUtils.getModalPaddingStyles({
                         shouldAddBottomSafeAreaPadding: true,

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -8,6 +8,7 @@ import SVGImage from '../../../components/SVGImage';
 import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import * as Link from '../../../libs/actions/Link';
+import variables from '../../../styles/variables';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -35,34 +36,48 @@ const SignInPageLayout = (props) => {
         </SignInPageContent>
     );
 
+    const hasRedirect = !_.isEmpty(backgroundStyle.redirectUri);
+
+    const graphicLayout = (
+        <Pressable
+            style={[
+                styles.flex1,
+                StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+            ]}
+            onPress={() => {
+                Link.openExternalLink(backgroundStyle.redirectUri);
+            }}
+            disabled={!hasRedirect}
+        >
+            <SVGImage
+                width="100%"
+                height="100%"
+                src={backgroundStyle.backgroundImageUri}
+                resizeMode={props.isMediumScreenWidth ? 'contain' : 'cover'}
+            />
+        </Pressable>
+    );
+
     if (props.isSmallScreenWidth) {
         return content;
     }
 
-    const hasRedirect = !_.isEmpty(backgroundStyle.redirectUri);
+    if (props.isMediumScreenWidth && props.windowHeight >= variables.minHeigthToShowGraphics) {
+        return (
+            <View style={[styles.dFlex, styles.signInPageInner, styles.flexColumnReverse, styles.justifyContentBetween]}>
+                {graphicLayout}
+                <View style={styles.flex1}>
+                    {content}
+                </View>
+            </View>
+        );
+    }
 
     return (
         <View style={[styles.flex1, styles.signInPageInner]}>
             <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
                 {content}
-                <Pressable
-                    style={[
-                        styles.flexGrow1,
-                        StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-                        props.isMediumScreenWidth && styles.alignItemsCenter,
-                    ]}
-                    onPress={() => {
-                        Link.openExternalLink(backgroundStyle.redirectUri);
-                    }}
-                    disabled={!hasRedirect}
-                >
-                    <SVGImage
-                        width="100%"
-                        height="100%"
-                        src={backgroundStyle.backgroundImageUri}
-                        resizeMode={props.isMediumScreenWidth ? 'contain' : 'cover'}
-                    />
-                </Pressable>
+                {graphicLayout}
             </View>
         </View>
     );

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -46,4 +46,5 @@ export default {
     tooltipzIndex: 10050,
     gutterWidth: 16,
     popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)',
+    minHeightToShowGraphics: 854, // below this height UI was broken on login form layout as there isn't enough height to show forma and graphics.
 };