rework welcome screen responsiveness

fix brave/brave-browser#5950
brave · Oct 3, 2019 · fce83fb · fce83fb
1 parent cf2c425
commit fce83fb
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 29 deletions.
diff --git a/components/brave_welcome_ui/brave_welcome.html b/components/brave_welcome_ui/brave_welcome.html
@@ -14,7 +14,7 @@
 <script src="/brave_welcome.bundle.js"></script>
 <script src="/strings.js"></script>
 <style>
-  #root { height: -webkit-fill-available; width: -webkit-fill-available; }
+  #root { height: 100%; width: 100%; }
 </style>
 </head>
 <body>

diff --git a/components/brave_welcome_ui/components/images/index.ts b/components/brave_welcome_ui/components/images/index.ts
@@ -47,28 +47,26 @@ export const topToBottom = keyframes`
   }
 `
 
+export const backgroundHeight = 136
+
 export const BackgroundContainer = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   width: inherit;
-  height: inherit;
-  position: absolute;
+  height: ${backgroundHeight}px;
+  position: relative;
   animation-delay: 0s;
   animation-name: ${topToBottom};
   animation-duration: 2000ms;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
-  overflow: hidden;
 `
 
 export const Background = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   background: url('${WelcomeImage}');
   width: 100%;
-  height: 136px;
+  height: ${backgroundHeight}px;
   background-size: cover;
   background-position-x: center;
-  position: absolute;
-  bottom: 0;
-  overflow: hidden;
 `
diff --git a/components/brave_welcome_ui/components/wrapper/index.ts b/components/brave_welcome_ui/components/wrapper/index.ts
@@ -3,6 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled, { css, keyframes } from 'styled-components'
+import { backgroundHeight } from '../images'
+
+const slideContentHeight = 540
+const footerHeight = 52
 
 const fadeIn = keyframes`
   from {
@@ -35,7 +39,7 @@ export const SelectGrid = styled(BaseGrid)`
 
 export const Footer = styled(BaseGrid.withComponent('footer'))`
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 52px;
+  grid-template-rows: ${footerHeight}px;
   max-width: 540px;
   margin: 24px 0 0 0;
 `
@@ -83,16 +87,21 @@ export const Content = styled<ContentProps, 'section'>('section')`
   `}
 `
 
-export const Page = styled<{}, 'div'>('div')`
-  position: absolute;
+interface PageProps {
+  shouldUpdateElementOverflow: boolean
+}
+
+export const Page = styled<PageProps, 'div'>('div')`
   width: inherit;
   height: inherit;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   background: ${p => p.theme.color.panelBackground};
-  overflow: hidden;
-  transition: background 0.3s linear;
+  flex-direction: column;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: ${p => p.shouldUpdateElementOverflow ? 'initial' : 'hidden' };
 `
 
 export const Panel = styled('div')`
@@ -108,21 +117,22 @@ export const Panel = styled('div')`
   /* end of animation stuff */
   box-sizing: border-box;
   position: relative;
-  overflow: visible;
   max-width: 800px;
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 0;
-  margin: 0;
+  padding-top: 64px;
+  margin: 0 auto;
   font-size: inherit;
   align-items: center;
+  min-height: ${slideContentHeight + footerHeight}px;
+  height: calc(100vh - ${backgroundHeight}px);
 `
 
 export const SlideContent = styled<{}, 'div'>('div')`
   max-width: inherit;
   width: inherit;
-  min-height: 540px;
+  min-height: ${slideContentHeight}px;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/components/brave_welcome_ui/containers/app.tsx b/components/brave_welcome_ui/containers/app.tsx
@@ -37,6 +37,7 @@ export interface State {
   currentScreen: number,
   finished: boolean,
   skipped: boolean
+  shouldUpdateElementOverflow: boolean
 }
 
 const totalScreensSize = 5
@@ -47,7 +48,8 @@ export class WelcomePage extends React.Component<Props, State> {
     this.state = {
       currentScreen: 1,
       finished: false,
-      skipped: false
+      skipped: false,
+      shouldUpdateElementOverflow: false
     }
   }
 
@@ -102,14 +104,20 @@ export class WelcomePage extends React.Component<Props, State> {
     this.props.actions.goToTabRequested('chrome://newtab', '_self')
   }
 
+  resetStyleOverflow = () => {
+    this.setState({ shouldUpdateElementOverflow: true })
+  }
+
   render () {
     const { welcomeData, actions } = this.props
+    const { shouldUpdateElementOverflow } = this.state
     return (
       <>
-        <Page id='welcomePage'>
-          <BackgroundContainer>
-            <Background/>
-          </BackgroundContainer>
+        <Page
+          id='welcomePage'
+          onAnimationEnd={this.resetStyleOverflow}
+          shouldUpdateElementOverflow={shouldUpdateElementOverflow}
+        >
           <Panel>
             <SlideContent>
               <WelcomeBox index={1} currentScreen={this.currentScreen} onClick={this.onClickLetsGo} />
@@ -138,6 +146,9 @@ export class WelcomePage extends React.Component<Props, State> {
               onClickDone={this.onClickDone}
             />
           </Panel>
+          <BackgroundContainer>
+            <Background/>
+          </BackgroundContainer>
         </Page>
       </>
     )

diff --git a/components/brave_welcome_ui/stories/page/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx
@@ -21,6 +21,7 @@ import { Background, BackgroundContainer } from '../../components/images'
 
 export interface State {
   currentScreen: number
+  shouldUpdateElementOverflow: boolean
   fakeChangedSearchEngine: boolean
   fakeBookmarksImported: boolean
   fakeChangedDefaultTheme: boolean
@@ -35,6 +36,7 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
     super(props)
     this.state = {
       currentScreen: 1,
+      shouldUpdateElementOverflow: false,
       fakeChangedSearchEngine: false,
       fakeBookmarksImported: false,
       fakeChangedDefaultTheme: false
@@ -108,15 +110,19 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
     }
   }
 
+  resetStyleOverflow = () => {
+    this.setState({ shouldUpdateElementOverflow: true })
+  }
+
   render () {
-    const { currentScreen } = this.state
+    const { currentScreen, shouldUpdateElementOverflow } = this.state
     const { isDefaultSearchGoogle } = this.props
     return (
       <>
-        <Page>
-          <BackgroundContainer>
-            <Background />
-          </BackgroundContainer>
+        <Page
+          onAnimationEnd={this.resetStyleOverflow}
+          shouldUpdateElementOverflow={shouldUpdateElementOverflow}
+        >
           <Panel>
             <SlideContent>
               <WelcomeBox index={1} currentScreen={currentScreen} onClick={this.onClickLetsGo} />
@@ -135,6 +141,9 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
               onClickDone={this.onClickDone}
             />
           </Panel>
+          <BackgroundContainer>
+            <Background />
+          </BackgroundContainer>
         </Page>
       </>
     )

diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx
@@ -16,8 +16,8 @@ import WelcomePage from './page/index'
 const themes = [welcomeLightTheme, welcomeDarkTheme]
 
 const fullPageStoryStyles: object = {
-  width: '-webkit-fill-available',
-  height: '-webkit-fill-available'
+  width: '100%',
+  height: '100%'
 }
 
 export const FullPageStory = (storyFn: any) =>