arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

fixed aside css

Browse Source
This commit is contained in:
Szymon Lesisz 2018-05-10 15:43:25 +02:00
parent dfcca2f959
commit 91f1c01735
3 changed files with 79 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/wallet/aside/Aside.js
View File

@ -80,9 +80,11 @@ const Aside = (props: Props): React$Element<typeof StickyContainer | string> =>
<StickyContainer location={ location } devices={ props.deviceDropdownOpened.toString() }> <StickyContainer location={ location } devices={ props.deviceDropdownOpened.toString() }>
<DeviceSelect {...props} /> <DeviceSelect {...props} />
{ menu } { menu }
<div className="sticky-bottom">
<div className="help"> <div className="help">
<a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a> <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
</div> </div>
</div>
</StickyContainer> </StickyContainer>
) )
} }

13
src/js/components/wallet/aside/StickyContainer.js
View File

@ -42,12 +42,11 @@ export default class StickyContainer extends PureComponent<Props> {
const wrapper: ?HTMLElement = this.wrapper; const wrapper: ?HTMLElement = this.wrapper;
const aside: ?HTMLElement = this.aside; const aside: ?HTMLElement = this.aside;
if (!wrapper || !aside) return; if (!wrapper || !aside) return;
const helpButton: ?HTMLElement = wrapper.querySelector('.help'); const bottom: ?HTMLElement = wrapper.querySelector('.sticky-bottom');
if (!helpButton) return; if (!bottom) return;
const viewportHeight: number = getViewportHeight(); const viewportHeight: number = getViewportHeight();
const helpButtonBounds = helpButton.getBoundingClientRect(); const bottomBounds = bottom.getBoundingClientRect();
const asideBounds = aside.getBoundingClientRect(); const asideBounds = aside.getBoundingClientRect();
const wrapperBounds = wrapper.getBoundingClientRect(); const wrapperBounds = wrapper.getBoundingClientRect();
@ -58,7 +57,7 @@ export default class StickyContainer extends PureComponent<Props> {
wrapper.classList.add('fixed'); wrapper.classList.add('fixed');
let maxTop : number= 1; let maxTop : number= 1;
if (wrapperBounds.height > viewportHeight) { if (wrapperBounds.height > viewportHeight) {
const bottomOutOfBounds: boolean = (helpButtonBounds.bottom <= viewportHeight && scrollDirection === 'down'); const bottomOutOfBounds: boolean = (bottomBounds.bottom <= viewportHeight && scrollDirection === 'down');
const topOutOfBounds: boolean = (wrapperBounds.top > 0 && scrollDirection === 'up'); const topOutOfBounds: boolean = (wrapperBounds.top > 0 && scrollDirection === 'up');
if (!bottomOutOfBounds && !topOutOfBounds) { if (!bottomOutOfBounds && !topOutOfBounds) {
this.topOffset += scrollDirection === 'down' ? - distanceScrolled : distanceScrolled; this.topOffset += scrollDirection === 'down' ? - distanceScrolled : distanceScrolled;
@ -80,10 +79,10 @@ export default class StickyContainer extends PureComponent<Props> {
wrapper.classList.remove('fixed-bottom'); wrapper.classList.remove('fixed-bottom');
} else { } else {
if (wrapper.classList.contains('fixed-bottom')) { if (wrapper.classList.contains('fixed-bottom')) {
if (helpButtonBounds.top < wrapperBounds.bottom - helpButtonBounds.height) { if (bottomBounds.top < wrapperBounds.bottom - bottomBounds.height) {
wrapper.classList.remove('fixed-bottom'); wrapper.classList.remove('fixed-bottom');
} }
} else if (helpButtonBounds.bottom < viewportHeight) { } else if (bottomBounds.bottom < viewportHeight) {
wrapper.classList.add('fixed-bottom'); wrapper.classList.add('fixed-bottom');
} }
} }

129
src/styles/aside.less
View File

@ -71,7 +71,7 @@ aside {
&.fixed-bottom { &.fixed-bottom {
padding-bottom: 60px; // height of .help padding-bottom: 60px; // height of .help
.help { .sticky-bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
background: @color_main; background: @color_main;
@ -105,7 +105,7 @@ aside {
.arrow { .arrow {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 28px; margin-right: 24px;
&:after { &:after {
.icomoon-arrow-down; .icomoon-arrow-down;
transition: transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s;
@ -147,7 +147,7 @@ aside {
width: 320px; width: 320px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 80px; padding-left: 60px;
&.item { &.item {
padding-right: 24px; padding-right: 24px;
@ -165,8 +165,8 @@ aside {
width: 13px; width: 13px;
height: 25px; height: 25px;
z-index: 2; z-index: 2;
left: 33px; left: 25px;
top: 17px; top: 19px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 13px 25px; background-size: 13px 25px;
@ -176,7 +176,7 @@ aside {
&.trezor-t { &.trezor-t {
&:before { &:before {
width: 17px; width: 17px;
left: 31px; left: 23px;
background-size: 17px 25px; background-size: 17px 25px;
background-image: url('../images/trezor-T.png'); background-image: url('../images/trezor-T.png');
} }
@ -204,55 +204,53 @@ aside {
} }
} }
.device-menu { // .device-menu {
display: flex; // display: flex;
justify-content: flex-end; // justify-content: flex-end;
padding-right: 4px; // padding-right: 4px;
padding-left: 4px; // padding-left: 4px;
div { // div {
display: inline-block; // display: inline-block;
} // }
.forget, // .forget,
.settings, // .settings,
.acquire { // .acquire {
cursor: pointer; // cursor: pointer;
&:before { // &:before {
.icomoon-refresh; // .icomoon-refresh;
color: @color_text_secondary; // color: @color_text_secondary;
position: relative; // position: relative;
font-size: 24px; // font-size: 24px;
.hover(); // .hover();
} // }
&:hover { // &:hover {
&:before { // &:before {
color: @color_text_primary; // color: @color_text_primary;
} // }
} // }
} // }
.forget { // .forget {
&:before { // &:before {
.icomoon-eject; // .icomoon-eject;
} // }
} // }
.settings { // .settings {
&:before { // &:before {
.icomoon-settings; // .icomoon-settings;
} // }
} // }
} // }
} }
.device-menu { .device-menu {
padding: 8px 0px; padding: 0px 24px 8px 19px;
padding-left: 28px;
// padding-left: 74px;
border-bottom: 1px solid @color_divider; border-bottom: 1px solid @color_divider;
background: @color_white; background: @color_white;
@ -267,11 +265,9 @@ aside {
&:before { &:before {
.icomoon-refresh; .icomoon-refresh;
// color: @color_text_secondary;
position: relative; position: relative;
font-size: 24px; font-size: 24px;
// margin-right: 12px; margin-right: 17px;
margin-right: 28px;
.hover(); .hover();
} }
@ -310,7 +306,7 @@ aside {
display: block; display: block;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
padding: 16px 0 16px 30px; padding: 16px 0 16px 24px;
white-space: nowrap; white-space: nowrap;
color: @color_text_primary; color: @color_text_primary;
height: 50px; height: 50px;
@ -378,14 +374,14 @@ aside {
&.coin { &.coin {
padding-left: 80px; padding-left: 60px;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
left: 30px; left: 24px;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
margin: auto 0; margin: auto 0;
@ -403,7 +399,7 @@ aside {
display: block; display: block;
width: 30px; width: 30px;
height: 30px; height: 30px;
right: 23px; right: 20px;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
margin: auto 0; margin: auto 0;
@ -449,22 +445,28 @@ aside {
} }
} }
&.ropsten:before { &.ethereum:before,
background-image: url('../images/ropsten-logo.png'); &.ethereum-classic:before,
&.ropsten:before,
&.rinkeby:before {
background-size: auto 20px; background-size: auto 20px;
background-position: 2px 0px;
} }
&.ethereum:before { &.ethereum:before {
background-image: url('../images/eth-logo.png'); background-image: url('../images/eth-logo.png');
background-size: auto 20px;
}
&.rinkeby:before {
background-image: url('../images/rinkeby-logo.png');
background-size: auto 20px;
} }
&.ethereum-classic:before { &.ethereum-classic:before {
background-image: url('../images/etc-logo.png'); background-image: url('../images/etc-logo.png');
background-size: auto 20px;
} }
&.ropsten:before {
background-image: url('../images/ropsten-logo.png');
}
&.rinkeby:before {
background-image: url('../images/rinkeby-logo.png');
}
&.btc:before { &.btc:before {
background-image: url('../images/btc-logo.png'); background-image: url('../images/btc-logo.png');
} }
@ -491,7 +493,7 @@ aside {
justify-content: space-between; justify-content: space-between;
color: @color_text_secondary; color: @color_text_secondary;
background: @color_gray_light; background: @color_gray_light;
padding: 8px 30px 8px 31px; padding: 8px 28px 8px 24px;
border-top: 1px solid @color_divider; border-top: 1px solid @color_divider;
border-bottom: 1px solid @color_divider; border-bottom: 1px solid @color_divider;
span { span {
@ -506,7 +508,7 @@ aside {
justify-content: space-between; justify-content: space-between;
color: @color_text_secondary; color: @color_text_secondary;
background: @color_gray_light; background: @color_gray_light;
padding: 8px 30px 8px 31px; padding: 8px 28px 8px 24px;
border-bottom: 1px solid @color_divider; border-bottom: 1px solid @color_divider;
} }
@ -541,6 +543,9 @@ aside {
color: @color_text_primary; color: @color_text_primary;
} }
} }
}
.wallet-settings {
} }