From b4dbdb7ac4b57f55fc17ab9d4dbf4e0f1c9c59f9 Mon Sep 17 00:00:00 2001 From: pablovidal85 Date: Wed, 3 May 2017 12:40:19 +0200 Subject: [PATCH 1/3] Fix css transform for android 4.4.2 webview --- src/sass/views/feedback/complete.scss | 3 +++ src/sass/views/onboarding/onboard-disclaimer.scss | 1 + src/sass/views/tab-receive.scss | 10 ++++++++++ src/sass/views/walletDetails.scss | 3 +++ 4 files changed, 17 insertions(+) diff --git a/src/sass/views/feedback/complete.scss b/src/sass/views/feedback/complete.scss index 71b384cda..bb2e75ea6 100644 --- a/src/sass/views/feedback/complete.scss +++ b/src/sass/views/feedback/complete.scss @@ -56,6 +56,7 @@ padding: 50px 10px 30px; background-color: $v-subtle-gray; text-align: center; + -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; animation-name: slideUpFadeIn; @@ -76,10 +77,12 @@ @keyframes slideUpFadeIn { from { + -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } to { + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index c0441e304..33f308ef2 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -13,6 +13,7 @@ height: 100%; transition: transform 2.5s ease; &.shrink{ + -webkit-transform: scale(.8); transform: scale(.8); } &-container { diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 483f988c3..8d8b537fc 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -100,6 +100,7 @@ top:50%; &, &.next { left:100%; + -webkit-transform: translate(100%, -40%); transform: translate(100%, -40%); } &.next, &.prev { @@ -110,10 +111,12 @@ left:50%; } &.current { + -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); z-index: 3; } &.prev { + -webkit-transform: translate(-150%, -40%); transform: translate(-150%, -40%); } .item { @@ -152,13 +155,16 @@ left:50%; } &.current { + -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); } &.prev { + -webkit-transform: translate(-150%, -40%); transform: translate(-150%, -40%); } &.next { left:100%; + -webkit-transform: translate(100%, -40%); transform: translate(100%, -40%); } } @@ -170,6 +176,7 @@ button { width: 100%; top: 50%; + -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @@ -379,6 +386,7 @@ .bit-address { .item{ top: 40%; + -webkit-transform: translateY(-40%); transform: translateY(-40%); font-size:1rem; } @@ -417,6 +425,7 @@ position: relative; .card { opacity: 1; + -webkit-transform: scale(1); transform: scale(1); } &:before { @@ -445,6 +454,7 @@ margin: 1.5rem auto 0; position: relative; opacity: .5; + -webkit-transform:scale(.85); transform:scale(.85); transition:transform .2s ease; .item { diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index fe68b1d40..3ee4846f4 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -152,6 +152,7 @@ position: absolute; width: 100%; height: 500px; + -webkit-transform: translateY(-499px); transform: translateY(-499px); &.collapsible { @@ -161,6 +162,7 @@ position: absolute; width: 100%; height: 200px; + -webkit-transform: translateY(100px); transform: translateY(100px); } } @@ -180,6 +182,7 @@ } &__balance { + -webkit-transform: scale3d(1, 1, 1) translateY(45px); transform: scale3d(1, 1, 1) translateY(45px); } From b14efe2b2a66445db2d57227bb3f656731c849b8 Mon Sep 17 00:00:00 2001 From: pablovidal85 Date: Wed, 3 May 2017 12:47:32 +0200 Subject: [PATCH 2/3] Fix receive address for android 4.4.2 webview --- src/sass/views/tab-receive.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 8d8b537fc..88486c4af 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -42,11 +42,9 @@ } #bit-address { width: 100%; - align-self: flex-end; margin-top: auto; - justify-content: center; - align-content: center; - position: relative; + position: absolute; + bottom: 0; min-height: 40px; #next-address { color:$v-light-gray; @@ -218,9 +216,6 @@ transform: scale(.7); } } - #bit-address { - position: relative; - } } } } From 1140f0bd965fc1ade47365fc430016615faf0458 Mon Sep 17 00:00:00 2001 From: pablovidal85 Date: Wed, 3 May 2017 16:00:38 +0200 Subject: [PATCH 3/3] Fix css for small devices (max-width: 320px) --- src/sass/views/amount.scss | 24 +++++++++++++++++++++ src/sass/views/includes/walletActivity.scss | 3 +++ src/sass/views/tab-receive.scss | 16 ++++++++++++++ src/sass/views/walletDetails.scss | 3 +++ 4 files changed, 46 insertions(+) diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss index 7e5396f7f..627f905e8 100644 --- a/src/sass/views/amount.scss +++ b/src/sass/views/amount.scss @@ -32,6 +32,13 @@ padding-left: 48px; } } + @media(max-width: 320px) { + .bitcoin-address { + & > span:last-child { + margin-left: -2px; + } + } + } .send-gravatar { left: 11px; position: absolute; @@ -51,6 +58,9 @@ @media(max-height: 480px) { padding: 0px; } + @media(max-width: 320px) { + padding: 0px; + } .title { float: left; padding-top: 10px; @@ -78,6 +88,16 @@ @media(max-height: 480px) { top: 45px; } + @media(max-width: 320px) { + bottom: 276px; + top: 60px; + & > div { + display: inline-block; + } + & > div:first-child { + display: inherit; + } + } } } .amount-pane-no-recipient { @@ -147,6 +167,10 @@ position: relative; top: -3px; line-height: 1; + @media(max-width: 320px) { + line-height: 30px; + height: 30px; + } } &__results { &--minimize { diff --git a/src/sass/views/includes/walletActivity.scss b/src/sass/views/includes/walletActivity.scss index ffba46ecf..0d5fb0496 100644 --- a/src/sass/views/includes/walletActivity.scss +++ b/src/sass/views/includes/walletActivity.scss @@ -8,6 +8,9 @@ &-amount { float: right; font-size: 18px; + @media(max-width: 320px) { + text-align: right; + } } &-note { diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 88486c4af..09831a149 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -28,6 +28,9 @@ @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2) { height: 64vh; } + @media(max-width: 320px) { + height: 62vh; + } &-info { height: 100%; display: flex; @@ -35,6 +38,9 @@ justify-content: center; align-items: center; width: 100%; + @media(max-width: 320px) { + height: auto; + } } article { flex:1; @@ -128,6 +134,12 @@ @media(min-width:450px) { font-size:1rem; } + &.item-icon-left { + @media(max-width: 320px) { + padding-left: 48px; + text-overflow: initial; + } + } color:$v-light-gray; } } @@ -140,6 +152,10 @@ justify-content: center; flex: 1; z-index: 1; + @media(max-width: 320px) { + height: 260px; + margin-top: -50px; + } div { transition: all .4s ease; &.current, diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index 3ee4846f4..18baa3324 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -176,6 +176,9 @@ display: block; align-items: center; justify-content: center; + @media(max-width: 320px) { + padding-top: 60px; + } &.collapsible { margin-bottom: 10px;