1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-26 00:48:35 +00:00

Fixed header and footer using sticky 2

This commit is contained in:
Vladimir Volek 2018-09-10 16:38:00 +02:00
parent 2788355811
commit cd8e1a2214

View File

@ -12,10 +12,9 @@ import CoinMenu from './components/CoinMenu';
import DeviceMenu from './components/DeviceMenu'; import DeviceMenu from './components/DeviceMenu';
const Wrapper = styled.div` const Wrapper = styled.div`
position: relative;
width: 320px; width: 320px;
min-width: 320px; overflow: scroll;
overflow-x: hidden; border: 2px solid red;
background: ${colors.MAIN}; background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER}; border-right: 1px solid ${colors.DIVIDER};
`; `;
@ -159,11 +158,10 @@ class LeftNavigation extends Component {
render() { render() {
return ( return (
<Wrapper <Wrapper
className="block"
location={this.props.location.pathname} location={this.props.location.pathname}
deviceSelection={this.props.deviceDropdownOpened} deviceSelection={this.props.deviceDropdownOpened}
> >
<Sticky boundaryElement=".block" scrollElement=".scroll-area"> <Sticky>
<Header <Header
onClickWrapper={() => this.handleOpen()} onClickWrapper={() => this.handleOpen()}
device={this.props.wallet.selectedDevice} device={this.props.wallet.selectedDevice}
@ -173,12 +171,12 @@ class LeftNavigation extends Component {
{...this.props} {...this.props}
/> />
</Sticky> </Sticky>
<Body className="scroll-area"> <Body>
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />} {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
{this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)} {this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
{this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)} {this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
</Body> </Body>
<Sticky mode="bottom" boundaryElement=".block" /> <Sticky mode="bottom" />
<Footer> <Footer>
<Help> <Help>
<A <A