Skip to content
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

Jump to bottom

Fix alignment on Welcome page content (uplift to 1.3.x) #4136

Merged
merged 1 commit into from
Dec 5, 2019
Merged

Fix alignment on Welcome page content (uplift to 1.3.x) #4136

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 13 additions & 19 deletions components/brave_welcome_ui/components/wrapper/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import styled, { css, keyframes } from 'styled-components'
import { backgroundHeight } from '../images'

const contentMaxWidth = 580
const slideContentHeight = 540
const footerHeight = 52
const footerTopMargin = 24
Expand Down Expand Up @@ -42,7 +43,8 @@ export const Footer = styled(BaseGrid.withComponent('footer'))`
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: ${footerHeight}px;
max-width: 540px;
margin: ${footerTopMargin}px 0 0 0;
margin: ${footerTopMargin}px auto 0;
height: auto;
`

export const FooterLeftColumn = styled(BaseColumn)`
Expand Down Expand Up @@ -72,15 +74,20 @@ export const Content = styled<ContentProps, 'section'>('section')`
will-change: transform;
transform: translateX(${p => p.isPrevious ? '-' + p.screenPosition : p.screenPosition}) scale(0.8);
transition: opacity 600ms, transform 600ms ease-in-out;
position: absolute;
z-index: ${p => p.zIndex};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
max-width: 580px;
max-width: ${contentMaxWidth}px;
padding: 24px;
margin: auto;
/*
inactive elements need to be absolute positioned to prevent pilling up
in the background making visible elements misaligned. In this case display:none
would prevent us from seeing the ransition animation. See comment below.
*/
position: ${p => p.active ? 'static' : 'absolute'};

/*
prevents focus on all content's child elements if the parent is not active.
Expand All @@ -106,12 +113,7 @@ interface PageProps {
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};
flex-direction: column;
position: relative;
overflow-x: hidden;
overflow-y: ${p => p.shouldUpdateElementOverflow ? 'initial' : 'hidden' };
`
Expand All @@ -128,23 +130,15 @@ export const Panel = styled('div')`
animation-fill-mode: forwards;
/* end of animation stuff */
box-sizing: border-box;
position: relative;
max-width: 800px;
max-width: ${contentMaxWidth}px;
width: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
font-size: inherit;
align-items: center;
min-height: ${slideContentHeight + footerTopMargin + footerHeight}px;
height: calc(100vh - ${backgroundHeight}px);
`

export const SlideContent = styled<{}, 'div'>('div')`
max-width: inherit;
width: inherit;
min-height: ${slideContentHeight}px;
display: flex;
justify-content: center;
align-items: center;
height: ${slideContentHeight}px;
`