aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorkumavis <kumavis@users.noreply.github.com>2017-08-09 06:56:02 +0800
committerGitHub <noreply@github.com>2017-08-09 06:56:02 +0800
commit7db1f30590c9dbd01456517ebf0a24e1f76ddd40 (patch)
tree96404f18a53d96a6fd6de059e0e70e8fe704784c /ui
parentcd1437fdd3fa897720733a5a5099e640bde5dfa2 (diff)
parent9d3b5348aad0715f62c5bc2c0f4b5d0982ee2634 (diff)
downloadtangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.tar
tangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.tar.gz
tangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.tar.bz2
tangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.tar.lz
tangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.tar.xz
tangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.tar.zst
tangerine-wallet-browser-7db1f30590c9dbd01456517ebf0a24e1f76ddd40.zip
Merge pull request #1877 from MetaMask/hotfix/mobile-buy-layout
Improve layout for legacy buy screen
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/buy-button-subview.js2
-rw-r--r--ui/app/components/shapeshift-form.js148
2 files changed, 80 insertions, 70 deletions
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 87084f92d..759eb15bd 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -143,7 +143,7 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
return h('div.flex-column', {
style: {
alignItems: 'center',
- margin: '50px',
+ margin: '20px 50px',
},
}, [
h('h3.text-transform-uppercase', {
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 76a265d63..901a4a956 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -33,10 +33,10 @@ ShapeshiftForm.prototype.renderMain = function () {
return h('.flex-column', {
style: {
- // marginTop: '10px',
+ position: 'relative',
padding: '25px',
paddingTop: '5px',
- width: '100%',
+ width: '90%',
minHeight: '215px',
alignItems: 'center',
overflowY: 'auto',
@@ -58,7 +58,9 @@ ShapeshiftForm.prototype.renderMain = function () {
},
}),
- h('.input-container', [
+ h('.input-container', {
+ position: 'relative',
+ }, [
h('input#fromCoin.buy-inputs.ex-coins', {
type: 'text',
list: 'coinList',
@@ -79,27 +81,31 @@ ShapeshiftForm.prototype.renderMain = function () {
style: {
fontSize: '12px',
color: '#F7861C',
- position: 'relative',
- bottom: '48px',
- left: '106px',
+ position: 'absolute',
},
}),
]),
- h('.icon-control', [
- h('i.fa.fa-refresh.fa-4.orange', {
- style: {
- bottom: '5px',
- left: '5px',
- color: '#F7861C',
- },
- onClick: this.updateCoin.bind(this),
- }),
+ h('.icon-control', {
+ style: {
+ position: 'relative',
+ },
+ }, [
+ // Not visible on the screen, can't see it on master.
+
+ // h('i.fa.fa-refresh.fa-4.orange', {
+ // style: {
+ // bottom: '5px',
+ // left: '5px',
+ // color: '#F7861C',
+ // },
+ // onClick: this.updateCoin.bind(this),
+ // }),
h('i.fa.fa-chevron-right.fa-4.orange', {
style: {
- position: 'relative',
- bottom: '26px',
- left: '10px',
+ position: 'absolute',
+ bottom: '35%',
+ left: '0%',
color: '#F7861C',
},
onClick: this.updateCoin.bind(this),
@@ -117,69 +123,73 @@ ShapeshiftForm.prototype.renderMain = function () {
},
}),
]),
+
h('.flex-column', {
style: {
+ marginTop: '1%',
alignItems: 'flex-start',
},
}, [
- this.props.warning ? this.props.warning && h('span.error.flex-center', {
- style: {
- textAlign: 'center',
- width: '229px',
- height: '82px',
- },
- },
- this.props.warning) : this.renderInfo(),
+ this.props.warning
+ ? this.props.warning
+ && h('span.error.flex-center', {
+ style: {
+ textAlign: 'center',
+ width: '229px',
+ height: '82px',
+ },
+ }, this.props.warning)
+ : this.renderInfo(),
+
+ this.renderRefundAddressForCoin(coin),
]),
- h(this.activeToggle('.input-container'), {
- style: {
- padding: '10px',
- paddingTop: '0px',
- width: '100%',
- },
- }, [
+ ])
+}
+
+ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) {
+ return h(this.activeToggle('.input-container'), {
+ style: {
+ marginTop: '1%',
+ },
+ }, [
- h('div', `${coin} Address:`),
+ h('div', `${coin} Address:`),
- h('input#fromCoinAddress.buy-inputs', {
- type: 'text',
- placeholder: `Your ${coin} Refund Address`,
- dataset: {
- persistentFormId: 'refund-address',
- },
- style: {
- boxSizing: 'border-box',
- width: '227px',
- height: '30px',
- padding: ' 5px ',
- },
- }),
+ h('input#fromCoinAddress.buy-inputs', {
+ type: 'text',
+ placeholder: `Your ${coin} Refund Address`,
+ dataset: {
+ persistentFormId: 'refund-address',
- h('i.fa.fa-pencil-square-o.edit-text', {
- style: {
- fontSize: '12px',
- color: '#F7861C',
- position: 'relative',
- bottom: '10px',
- right: '11px',
- },
- }),
- h('.flex-row', {
+ },
+ style: {
+ boxSizing: 'border-box',
+ width: '227px',
+ height: '30px',
+ padding: ' 5px ',
+ },
+ }),
+
+ h('i.fa.fa-pencil-square-o.edit-text', {
+ style: {
+ fontSize: '12px',
+ color: '#F7861C',
+ position: 'absolute',
+ },
+ }),
+ h('div.flex-row', {
+ style: {
+ justifyContent: 'flex-start',
+ },
+ }, [
+ h('button', {
+ onClick: this.shift.bind(this),
style: {
- justifyContent: 'flex-end',
+ marginTop: '1%',
},
- }, [
- h('button', {
- onClick: this.shift.bind(this),
- style: {
- marginTop: '10px',
- position: 'relative',
- bottom: '40px',
- },
- },
- 'Submit'),
- ]),
+ },
+ 'Submit'),
]),
])
}