aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorChi Kei Chan <chikeichan@gmail.com>2017-10-25 16:08:14 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-25 16:08:14 +0800
commit0d522139ba7c5372e0ef4219a69a4b8e8f83706a (patch)
tree2dc7f1f1d1e49846838728ecc213ed54878cd138
parente263ae942170945c489e48c506fe11f3218976d4 (diff)
downloadtangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.tar
tangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.tar.gz
tangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.tar.bz2
tangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.tar.lz
tangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.tar.xz
tangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.tar.zst
tangerine-wallet-browser-0d522139ba7c5372e0ef4219a69a4b8e8f83706a.zip
Fix gas input styling on mobile view
-rw-r--r--ui/app/components/customize-gas-modal/index.js7
-rw-r--r--ui/app/components/modals/modal.js7
-rw-r--r--ui/app/css/itcss/components/confirm.scss4
-rw-r--r--ui/app/css/itcss/components/send.scss30
4 files changed, 34 insertions, 14 deletions
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 710ee24c0..e5bfcfc63 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -198,7 +198,7 @@ CustomizeGasModal.prototype.render = function () {
})
return h('div.send-v2__customize-gas', {}, [
- h('div', {
+ h('div.send-v2__customize-gas__content', {
}, [
h('div.send-v2__customize-gas__header', {}, [
@@ -241,8 +241,9 @@ CustomizeGasModal.prototype.render = function () {
]),
h('div.send-v2__customize-gas__revert', {
- onClick: () => console.log('Revert'),
- }, ['Revert']),
+ // onClick: () => console.log('Revert'),
+ }, ['']),
+ // }, ['Revert']),
h('div.send-v2__customize-gas__buttons', [
h('div.send-v2__customize-gas__cancel', {
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 88deb2bb0..e15dd6c1b 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -162,10 +162,9 @@ const MODALS = {
h(CustomizeGasModal, {}, []),
],
mobileModalStyle: {
- width: '355px',
- height: '598px',
- // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
- top: '5%',
+ width: '100vw',
+ height: '100vh',
+ top: '0',
transform: 'none',
left: '0',
right: '0',
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 03da5acb6..4a8232e39 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -85,8 +85,10 @@
background: $athens-grey;
position: absolute;
transform: rotate(45deg);
- left: 178px;
top: 71px;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
}
.confirm-screen-title {
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 458434de4..a8d46067b 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -274,6 +274,7 @@
color: #9b9b9b;
font-size: .8em;
padding: 1px 4px;
+ cursor: pointer;
}
.token-gas {
@@ -474,6 +475,7 @@
@media screen and (max-width: $break-small) {
height: 59px;
+ width: 100vw;
}
}
@@ -484,10 +486,13 @@
position: absolute;
transform: rotate(45deg);
left: 178px;
- top: 65px;
+ top: 75px;
@media screen and (max-width: $break-small) {
top: 46px;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
}
}
@@ -706,8 +711,8 @@
flex-flow: column;
@media screen and (max-width: $break-small) {
- width: 355px;
- height: 598px;
+ width: 100vw;
+ height: 100vh;
}
&__header {
@@ -717,6 +722,10 @@
align-items: center;
justify-content: space-between;
font-size: 22px;
+
+ @media screen and (max-width: $break-small) {
+ flex: 0 0 auto;
+ }
}
&__title {
@@ -732,14 +741,19 @@
margin-right: 19.25px;
}
+ &__content {
+ display: flex;
+ flex-flow: column nowrap;
+ height: 100%;
+ }
+
&__body {
- height: 248px;
display: flex;
+ margin-bottom: 24px;
@media screen and (max-width: $break-small) {
- width: 355px;
- height: 470px;
flex-flow: column;
+ flex: 1 1 auto;
}
}
@@ -751,6 +765,10 @@
justify-content: space-between;
font-size: 22px;
position: relative;
+
+ @media screen and (max-width: $break-small) {
+ flex: 0 0 auto;
+ }
}
&__buttons {