ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redo MP drawer layout changes with mobile fixed (#6280)

Browse Source 
* fix: redo MP drawer layout changes with mobile fixed

* fix: mobile fix and another test

* fix: comments
This commit is contained in:
eddie 2023-04-10 12:53:58 -07:00 committed by GitHub
parent 4d85775d90
commit 5ec9cdc5c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
cypress/e2e/landing.test.ts
View File

@ -26,7 +26,15 @@ describe('Landing Page', () => {
it('allows navigation to pool', () => {
cy.viewport(2000, 1600)
cy.visit('/swap')
cy.get(getTestSelector('pool-nav-link')).first().click()
cy.url().should('include', '/pools')
})
it('allows navigation to pool on mobile', () => {
cy.viewport('iphone-6')
cy.visit('/swap')
cy.get(getTestSelector('pool-nav-link')).last().click()
cy.url().should('include', '/pools')
})
})

8
cypress/e2e/wallet-dropdown.test.ts
View File

@ -77,4 +77,12 @@ describe('Wallet Dropdown', () => {
cy.get(getTestSelector('theme-auto')).click()
cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(119, 128, 160)')
})
it('should use a bottom sheet and dismiss when on a mobile screen size', () => {
visit(true)
cy.viewport('iphone-6')
cy.get(getTestSelector('web3-status-connected')).click()
cy.root().click(15, 40)
cy.get(getTestSelector('wallet-settings')).should('not.be.visible')
})
})

2
src/components/AccountDrawer/AuthenticatedHeader.tsx
View File

@ -36,7 +36,7 @@ import MiniPortfolio from './MiniPortfolio'
import { portfolioFadeInAnimation } from './MiniPortfolio/PortfolioRow'
const AuthenticatedHeaderWrapper = styled.div`
padding: 14px 12px 16px 16px;
padding: 20px 16px;
display: flex;
flex-direction: column;
flex: 1;

52
src/components/AccountDrawer/index.tsx
View File

@ -76,32 +76,45 @@ const AccountDrawerScrollWrapper = styled.div`
border-radius: 12px;
`
const AccountDrawerWrapper = styled.div<{ open: boolean }>`
const Container = styled.div`
display: flex;
flex-direction: row;
height: calc(100% - 2 * ${DRAWER_MARGIN});
overflow: hidden;
position: fixed;
right: ${DRAWER_MARGIN};
top: ${DRAWER_MARGIN};
right: ${({ open }) => (open ? DRAWER_MARGIN : '-' + DRAWER_WIDTH)};
z-index: ${Z_INDEX.fixed};
overflow: hidden;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
top: 100%;
left: 0;
right: 0;
width: 100%;
overflow: visible;
}
`
height: calc(100% - 2 * ${DRAWER_MARGIN});
const AccountDrawerWrapper = styled.div<{ open: boolean }>`
margin-right: ${({ open }) => (open ? 0 : '-' + DRAWER_WIDTH)};
height: 100%;
overflow: hidden;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
z-index: ${Z_INDEX.modal};
top: unset;
left: 0;
right: 0;
bottom: ${({ open }) => (open ? 0 : `calc(-1 * (100% - ${DRAWER_TOP_MARGIN_MOBILE_WEB}))`)};
position: absolute;
margin-right: 0;
top: ${({ open }) => (open ? `calc(-1 * (100% - ${DRAWER_TOP_MARGIN_MOBILE_WEB}))` : 0)};
width: 100%;
height: calc(100% - ${DRAWER_TOP_MARGIN_MOBILE_WEB});
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
box-shadow: unset;
transition: top ${({ theme }) => theme.transition.duration.medium};
}
@media screen and (min-width: 1440px) {
right: ${({ open }) => (open ? DRAWER_MARGIN : '-' + DRAWER_WIDTH_XL)};
margin-right: ${({ open }) => (open ? 0 : `-${DRAWER_WIDTH_XL}`)};
width: ${DRAWER_WIDTH_XL};
}
@ -112,8 +125,7 @@ const AccountDrawerWrapper = styled.div<{ open: boolean }>`
border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
box-shadow: ${({ theme }) => theme.deepShadow};
transition: right ${({ theme }) => theme.transition.duration.medium},
bottom ${({ theme }) => theme.transition.duration.medium};
transition: margin-right ${({ theme }) => theme.transition.duration.medium};
`
const CloseIcon = styled(ChevronsRight).attrs({ size: 24 })`
@ -123,26 +135,20 @@ const CloseIcon = styled(ChevronsRight).attrs({ size: 24 })`
const CloseDrawer = styled.div`
${ClickableStyle}
cursor: pointer;
height: calc(100% - 2 * ${DRAWER_MARGIN});
position: fixed;
right: calc(${DRAWER_MARGIN} + ${DRAWER_WIDTH} - ${DRAWER_OFFSET});
top: 4px;
z-index: ${Z_INDEX.dropdown};
height: 100%;
// When the drawer is not hovered, the icon should be 18px from the edge of the sidebar.
padding: 24px calc(18px + ${DRAWER_OFFSET}) 24px 14px;
border-radius: 20px 0 0 20px;
transition: ${({ theme }) =>
`${theme.transition.duration.medium} ${theme.transition.timing.ease} background-color, ${theme.transition.duration.medium} ${theme.transition.timing.ease} margin`};
&:hover {
margin: 0 -4px 0 0;
z-index: -1;
margin: 0 -8px 0 0;
background-color: ${({ theme }) => theme.stateOverlayHover};
}
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
display: none;
}
@media screen and (min-width: 1440px) {
right: calc(${DRAWER_MARGIN} + ${DRAWER_WIDTH_XL} - ${DRAWER_OFFSET});
}
`
function AccountDrawer() {
@ -187,7 +193,7 @@ function AccountDrawer() {
}, [walletDrawerOpen, toggleWalletDrawer])
return (
<>
<Container>
{walletDrawerOpen && (
<TraceEvent
events={[BrowserEvent.onClick]}
@ -206,7 +212,7 @@ function AccountDrawer() {
<DefaultMenu />
</AccountDrawerScrollWrapper>
</AccountDrawerWrapper>
</>
</Container>
)
}