Merge pull request #459 from jamal-jackson/feature/recieve_view_polish

receive view polish on mobile

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();
   });
 });

src/sass/views/includes/wallets.scss

@@ -1,15 +1,23 @@
 .wallets {
   .slides {
     .swiper-container {
-      width: 75% !important;
+      width: 85% !important;
       overflow: visible;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      @media (max-height: 600px){
+        &{
+          transform: translate(-50%, -58%);
+        }
+      }
     }
     .card {
-      padding: .7rem;
-      padding-left: .25rem;
-      padding-right: .25rem;
-      border-radius: .25rem;
       max-width: 350px;
+      box-shadow:$subtle-box-shadow;
+      padding:0;
+      border-radius: 6px;
       @media (min-width: 500px) {
         & {
           width: 350px;
@@ -17,6 +25,23 @@
           margin: 1.5rem auto 0;
         }
       }
+      .item{
+        padding: calc(100vh - 99vh) calc(100vw - 93vw) calc(100vh - 97vh) calc(100vw - 95vw);
+        i{left:auto;}
+        span{
+          clear:both;
+          width: 100%;
+          display: inline-block;
+          &.wallet-name{
+            margin-top:10px;
+            margin-bottom:5px;
+            font-size:13px;
+          }
+        }
+        .big-icon-svg{
+          & > .bg{padding:.3rem;width: 40px;height:40px;}
+        }
+      }
     }
     .swiper-slide {
       width: 100% !important;
@@ -37,13 +62,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;
       }
     }
   }

src/sass/views/tab-receive.scss

@@ -10,8 +10,30 @@
   .border-top{
     border-top:1px solid rgb(228,228,228);
   }
+  .scroll{height:100%;}
   #address {
     background: #fff;
+    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;
+      width:100%;
+      #next-address{
+        color:$light-gray;
+      }
+    }
     .incomplete {
       padding: 50px;
       height: 352px;
@@ -42,20 +64,47 @@
         display: inline-block;
         font-size: .7rem;
       }
-      &-gen-address {}
     }
     .qr {
-      padding: 50px 0 20px 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;
+      }
+    }
+    #qr-options{
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-content: center;
+      .item{
+        i{left:25px;}
+      }
     }
     .backup {
       background-color: orange;
       color: #fff;
       position: absolute;
-      top: 5px;
+      top: 0;
       i {
         padding: 10px;
       }
     }
+    @media (max-height: 600px){
+      &{
+        .qr{
+          padding:6vh 0 0;
+          div{
+            transform: scale(.7);
+          }
+        }
+        #bit-address{position: realtive;}
+      }
+    }
   }
   #wallets {
     position: relative;
@@ -66,10 +115,12 @@
       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%);
+      z-index: 2;
     }
   }
   #first-time-tip {
@@ -112,6 +163,10 @@
     border-right: 1px solid rgb(228, 228, 228);
     padding-right: 10px;
   }
+  .wallets{
+    position: relative;
+    height: calc(100vh - 83vh);
+  }
 }
 
 @keyframes fadeIn {