m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-27 12:56:01 +01:00
Code

Center tooltip on small screen size by using flexbox

Browse Source
This commit is contained in:
Dan 2017-08-29 13:43:43 -02:30
parent cd5861541c
commit b251d0f675
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/app/components/gas-tooltip.js
View File

@ -59,7 +59,12 @@ GasTooltip.prototype.render = function () {
const { position, title, children, className } = this.props
const { gasPrice, gasLimit } = this.state
return h('div', {}, [
return h('div', {
style: {
display: 'flex',
justifyContent: 'center',
}
}, [
h('div.gas-tooltip-close-area', {
onClick: this.onClose
}),

1
ui/app/css/itcss/components/send.scss
View File

@ -106,7 +106,6 @@
.customize-gas-tooltip-container {
position: absolute;
left: 76px;
bottom: 50px;
width: 237px;
height: 307px;

35
ui/app/send.js
View File

@ -225,6 +225,23 @@ SendTransactionScreen.prototype.render = function () {
]),
h('div.send-screen-input-wrapper', {}, [
this.state.tooltipIsOpen && h(GasTooltip, {
className: 'send-tooltip',
gasPrice,
gasLimit: gas,
onClose: this.closeTooltip,
onFeeChange: ({gasLimit, gasPrice}) => {
this.setState({
newTx: Object.assign(
this.state.newTx,
{
gas: gasLimit,
gasPrice,
}
),
})
}
}),
h('div.send-screen-gas-labels', {}, [
h('span', {}, [
@ -276,24 +293,6 @@ SendTransactionScreen.prototype.render = function () {
]),
]),
this.state.tooltipIsOpen && h(GasTooltip, {
className: 'send-tooltip',
gasPrice,
gasLimit: gas,
onClose: this.closeTooltip,
onFeeChange: ({gasLimit, gasPrice}) => {
this.setState({
newTx: Object.assign(
this.state.newTx,
{
gas: gasLimit,
gasPrice,
}
),
})
}
}),
]),
h('div.send-screen-input-wrapper', {}, [