Center tooltip on small screen size by using flexbox

feature/default_network_editable
Dan 7 years ago
parent cd5861541c
commit b251d0f675
  1. 7
      ui/app/components/gas-tooltip.js
  2. 1
      ui/app/css/itcss/components/send.scss
  3. 35
      ui/app/send.js

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

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

@ -225,6 +225,23 @@ SendTransactionScreen.prototype.render = function () {
]), ]),
h('div.send-screen-input-wrapper', {}, [ 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('div.send-screen-gas-labels', {}, [
h('span', {}, [ 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', {}, [ h('div.send-screen-input-wrapper', {}, [

Loading…
Cancel
Save