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

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

@ -80,8 +80,10 @@ const Aside = (props: Props): React$Element<typeof StickyContainer | string> =>
<StickyContainer location={ location } devices={ props.deviceDropdownOpened.toString() }>
<DeviceSelect {...props} />
{ menu }
<div className="help">
<a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
<div className="sticky-bottom">
<div className="help">
<a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
</div>
</div>
</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 aside: ?HTMLElement = this.aside;
if (!wrapper || !aside) return;
const helpButton: ?HTMLElement = wrapper.querySelector('.help');
if (!helpButton) return;
const bottom: ?HTMLElement = wrapper.querySelector('.sticky-bottom');
if (!bottom) return;
const viewportHeight: number = getViewportHeight();
const helpButtonBounds = helpButton.getBoundingClientRect();
const bottomBounds = bottom.getBoundingClientRect();
const asideBounds = aside.getBoundingClientRect();
const wrapperBounds = wrapper.getBoundingClientRect();
@ -58,7 +57,7 @@ export default class StickyContainer extends PureComponent<Props> {
wrapper.classList.add('fixed');
let maxTop : number= 1;
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');
if (!bottomOutOfBounds && !topOutOfBounds) {
this.topOffset += scrollDirection === 'down' ? - distanceScrolled : distanceScrolled;
@ -80,10 +79,10 @@ export default class StickyContainer extends PureComponent<Props> {
wrapper.classList.remove('fixed-bottom');
} else {
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');
}
} else if (helpButtonBounds.bottom < viewportHeight) {
} else if (bottomBounds.bottom < viewportHeight) {
wrapper.classList.add('fixed-bottom');
}
}

133
src/styles/aside.less
View File

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