arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-28 09:58:23 +00:00
Code Issues Releases Wiki Activity

sidebar height set to viewport height, disable scroll on bg content

Browse Source
This commit is contained in:
slowbackspace 2019-01-26 00:09:27 +01:00
parent ea2f8993b0
commit 96510d54f8
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js
View File

@ -29,7 +29,7 @@ const AbsoluteWrapper = styled.aside`
@media screen and (max-width: ${SCREEN_SIZE.SM}) { @media screen and (max-width: ${SCREEN_SIZE.SM}) {
position: absolute; position: absolute;
height: calc(100% - 52px); height: calc(100vh - 52px);
z-index: 200; z-index: 200;
top: 52px; top: 52px;
animation: ${props => (props.isOpen ? SLIDE_RIGHT : SLIDE_LEFT)} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; animation: ${props => (props.isOpen ? SLIDE_RIGHT : SLIDE_LEFT)} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;

14
src/views/Wallet/index.js
View File

@ -2,7 +2,7 @@
import * as React from 'react'; import * as React from 'react';
import colors from 'config/colors'; import colors from 'config/colors';
import styled from 'styled-components'; import styled, { css } from 'styled-components';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Route, withRouter } from 'react-router-dom'; import { Route, withRouter } from 'react-router-dom';
@ -76,7 +76,15 @@ const MainContent = styled.article`
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
border-top-right-radius: 4px; border-top-right-radius: 4px;
@media screen and (max-width: ${SCREEN_SIZE.SM}){
${props => props.preventBgScroll && css`
position: fixed;
width: 100%;
min-height: calc(100vh - 52px);
`}
}
@media screen and (max-width: 1170px) { @media screen and (max-width: 1170px) {
border-top-right-radius: 0px; border-top-right-radius: 0px;
} }
@ -111,7 +119,7 @@ const Wallet = (props: Props) => (
<WalletWrapper> <WalletWrapper>
<StyledBackdrop show={props.wallet.showSidebar} onClick={props.toggleSidebar} animated /> <StyledBackdrop show={props.wallet.showSidebar} onClick={props.toggleSidebar} animated />
{props.wallet.selectedDevice && <LeftNavigation />} {props.wallet.selectedDevice && <LeftNavigation />}
<MainContent> <MainContent preventBgScroll={props.wallet.showSidebar}>
<Navigation> <Navigation>
<Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} /> <Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} />
<Route path="/device/:device/device-settings" component={TopNavigationDeviceSettings} /> <Route path="/device/:device/device-settings" component={TopNavigationDeviceSettings} />