From 337b56258e8f4fba539527774e7f31aee43430c4 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Wed, 12 Oct 2016 13:54:02 -0400 Subject: [PATCH 01/11] improved slider card design --- src/sass/views/includes/wallets.scss | 23 ++++++++++++++++++----- www/views/includes/wallets.html | 7 +++++-- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index cf2626745..a9894ecf3 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -1,15 +1,12 @@ .wallets { .slides { .swiper-container { - width: 75% !important; + width: 85% !important; overflow: visible; } .card { - padding: .7rem; - padding-left: .25rem; - padding-right: .25rem; - border-radius: .25rem; max-width: 350px; + box-shadow:$subtle-box-shadow; @media (min-width: 500px) { & { width: 350px; @@ -17,6 +14,22 @@ margin: 1.5rem auto 0; } } + .item{ + padding:.7rem 1.5rem; + span{ + clear:both; + width: 100%; + display: inline-block; + &.wallet-name{ + margin-top:10px; + margin-bottom:5px; + font-size:14px; + } + } + .big-icon-svg{ + & > .bg{padding:.3rem;width: 50px;height:50px;} + } + } } .swiper-slide { width: 100% !important; diff --git a/www/views/includes/wallets.html b/www/views/includes/wallets.html index ad96481e6..6de2c5a5b 100644 --- a/www/views/includes/wallets.html +++ b/www/views/includes/wallets.html @@ -1,12 +1,15 @@
- +
- {{wallet.name || wallet.id}} + {{wallet.name || wallet.id}} + + {{wallet.status.availableBalanceStr}} + {{wallet.m}}-of-{{wallet.n}} From 6df046c315cf37bd6eb841250bfc9d79de65f8e6 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Thu, 13 Oct 2016 11:44:31 -0400 Subject: [PATCH 02/11] updated styles for wallet slider --- src/sass/views/includes/wallets.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index a9894ecf3..ae1d52c83 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -7,6 +7,7 @@ .card { max-width: 350px; box-shadow:$subtle-box-shadow; + padding:0; @media (min-width: 500px) { & { width: 350px; @@ -15,7 +16,7 @@ } } .item{ - padding:.7rem 1.5rem; + padding:.6rem; span{ clear:both; width: 100%; @@ -23,7 +24,7 @@ &.wallet-name{ margin-top:10px; margin-bottom:5px; - font-size:14px; + font-size:13px; } } .big-icon-svg{ @@ -50,13 +51,14 @@ } &.swiper-slide-prev, &.swiper-slide-next { - opacity: .2; + opacity: .3; + transform: scale(.8); } &.swiper-slide-prev { - left: -5%; + left: 10vw; } &.swiper-slide-next { - left: 4%; + left: -10vw; } } } From e0046c7d02dcfc67192272cf2c7aad2705153bd8 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Thu, 13 Oct 2016 12:17:19 -0400 Subject: [PATCH 03/11] increase address height --- src/sass/views/tab-receive.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 0192e213f..eddb75335 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -10,8 +10,10 @@ .border-top{ border-top:1px solid rgb(228,228,228); } + .scroll{height:100%;} #address { background: #fff; + height:70%; .incomplete { padding: 50px; height: 350px; From 4124e68e74f85b04881fbd2bb3cfd11d254a6616 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Thu, 13 Oct 2016 14:28:41 -0400 Subject: [PATCH 04/11] polish for iPhone5 and iPhone 6 --- src/sass/views/tab-receive.scss | 25 ++++++++++++++++++---- www/views/tab-receive.html | 38 +++++++++++++++++---------------- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index eddb75335..8c548e518 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -13,7 +13,13 @@ .scroll{height:100%;} #address { background: #fff; - height:70%; + height:80%; + article{height: 100%;position: relative;} + #wallet-info{ + position: absolute; + bottom:0; + width:100%; + } .incomplete { padding: 50px; height: 350px; @@ -44,7 +50,6 @@ display: inline-block; font-size: .7rem; } - &-gen-address {} } .qr { padding: 50px 0 20px 0; @@ -58,6 +63,17 @@ padding: 10px; } } + @media (max-height: 600px){ + &{ + height: 77%; + .qr{ + padding:6.5vh 0 2vh; + div{ + transform: scale(.7); + } + } + } + } } #wallets { position: relative; @@ -68,10 +84,11 @@ height: 0; border-style: solid; border-width: 0 20px 20px 20px; - border-color: transparent transparent #f5f5f5 transparent; + border-color: transparent transparent rgb(242,242,242) transparent; top: -9px; position: absolute; - left: 45%; + left: 50%; + transform: translateX(-50%); } } #first-time-tip { diff --git a/www/views/tab-receive.html b/www/views/tab-receive.html index 02f20c7a4..6f70e0fd1 100644 --- a/www/views/tab-receive.html +++ b/www/views/tab-receive.html @@ -59,26 +59,28 @@
-
-
-
- - Share +
+
+
+
+ + Share +
+
-
-
- - Next Address -
-
-
-
-
-
- - ... - {{addr}} +
+
+
+ + ... + {{addr}} +
From 9e5debc1b6c491eb4b34521df9162f0b9b8e0b2d Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Thu, 13 Oct 2016 14:54:54 -0400 Subject: [PATCH 05/11] created responsive view for iPhone 5 through 7 plus --- src/sass/views/tab-receive.scss | 4 ++-- www/views/tab-receive.html | 38 ++++++++++++++++----------------- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 8c548e518..404e67e25 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -15,7 +15,7 @@ background: #fff; height:80%; article{height: 100%;position: relative;} - #wallet-info{ + #bit-address{ position: absolute; bottom:0; width:100%; @@ -52,7 +52,7 @@ } } .qr { - padding: 50px 0 20px 0; + padding: 13vh 0 5vh 0; } .backup { background-color: orange; diff --git a/www/views/tab-receive.html b/www/views/tab-receive.html index 6f70e0fd1..7649e9b0c 100644 --- a/www/views/tab-receive.html +++ b/www/views/tab-receive.html @@ -59,28 +59,26 @@
-
-
-
-
- - Share -
+
+
+
+ + Share
-
-
-
-
- - ... - {{addr}} -
+ +
+
+
+
+ + ... + {{addr}}
From 207f5db0eb8ce03d280d0130c4aa7c6be9178495 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Fri, 14 Oct 2016 09:42:46 -0400 Subject: [PATCH 06/11] finished receive view styling for phone sizes --- src/sass/views/includes/wallets.scss | 12 ++++++++ src/sass/views/tab-receive.scss | 43 ++++++++++++++++++++++++---- www/views/includes/wallets.html | 2 +- www/views/tab-receive.html | 2 +- 4 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index ae1d52c83..dcb81f835 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -3,6 +3,15 @@ .swiper-container { width: 85% !important; overflow: visible; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + @media (max-height: 600px){ + &{ + transform: translate(-50%, -58%); + } + } } .card { max-width: 350px; @@ -17,6 +26,9 @@ } .item{ padding:.6rem; + &.noBalance{ + padding:.6rem 1rem 1.7rem; + } span{ clear:both; width: 100%; diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 404e67e25..50129fb9c 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -13,8 +13,19 @@ .scroll{height:100%;} #address { background: #fff; - height:80%; - article{height: 100%;position: relative;} + height: calc(100vh - 33vh); + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex-flow: column; + @media(max-height: 600px){ + height: calc(100vh - 36vh); + } + article{ + flex:1; + width: 100%; + } #bit-address{ position: absolute; bottom:0; @@ -52,26 +63,41 @@ } } .qr { - padding: 13vh 0 5vh 0; + padding: calc(100vh - 85vh) 0 calc(100vh - 96vh); + @media(max-height: 700px){ + padding: calc(100vh - 90vh) 0 calc(100vh - 96vh); + } + div{ + display: flex; + justify-content: center; + align-items: center; + } + } + .share{ + flex:1; + max-width: 120px; + .item{ + i{left:25px;} + } } .backup { background-color: orange; color: #fff; position: absolute; - top: 5px; + top: 0; i { padding: 10px; } } @media (max-height: 600px){ &{ - height: 77%; .qr{ - padding:6.5vh 0 2vh; + padding:6vh 0 0; div{ transform: scale(.7); } } + #bit-address{position: realtive;} } } } @@ -89,6 +115,7 @@ position: absolute; left: 50%; transform: translateX(-50%); + z-index: 2; } } #first-time-tip { @@ -131,6 +158,10 @@ border-right: 1px solid rgb(228, 228, 228); padding-right: 10px; } + .wallets{ + position: relative; + height: calc(100vh - 83vh); + } } @keyframes fadeIn { diff --git a/www/views/includes/wallets.html b/www/views/includes/wallets.html index 6de2c5a5b..0b0deb799 100644 --- a/www/views/includes/wallets.html +++ b/www/views/includes/wallets.html @@ -2,7 +2,7 @@
-
+
diff --git a/www/views/tab-receive.html b/www/views/tab-receive.html index 7649e9b0c..ae66023d0 100644 --- a/www/views/tab-receive.html +++ b/www/views/tab-receive.html @@ -60,7 +60,7 @@
-
+
-
- From f283c70e0aaf22b1122e53af8dfa35e228adf3af Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Fri, 14 Oct 2016 16:30:54 -0400 Subject: [PATCH 11/11] loading first wallet before view enter, added conditional to ignore change in wallet function calls if wallet is the same --- src/js/controllers/tab-receive.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/js/controllers/tab-receive.js b/src/js/controllers/tab-receive.js index f2cd4472a..cdd2c8057 100644 --- a/src/js/controllers/tab-receive.js +++ b/src/js/controllers/tab-receive.js @@ -74,6 +74,10 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi $log.debug('No wallet provided'); return; } + if (wallet == $scope.wallet) { + $log.debug('No change in wallet'); + return; + } $scope.wallet = wallet; $log.debug('Wallet changed: ' + wallet.name); $timeout(function() { @@ -83,5 +87,7 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi $scope.$on("$ionicView.beforeEnter", function(event, data) { $scope.wallets = profileService.getWallets(); + $scope.wallet = $scope.wallets[0]; + $scope.setAddress(); }); });