Merge pull request #2399 from cmgustavo/feature/modal-mobile-styling

Popup more friendly for mobile

css/src/mobile.css

@@ -120,10 +120,25 @@
     padding: 1rem 0;
   }
 
+  .modal-mobile {
+    padding: 60px 0.5rem;
+  }
+
   .reveal-modal {
-    padding: 0.5rem;
+    padding: 0;
   } 
 
+  .reveal-modal .close-reveal-modal, dialog .close-reveal-modal {
+    padding: 0.8rem;
+    position: relative;
+    background: #E4E8EC;
+    top: 0;
+    right: 0;
+    line-height: 0;
+    color: #7A8C9E;
+    border-radius: 3px;
+  }
+
   header {
     background-color: #2C3E50;
     height: 120px;

index.html

@@ -97,7 +97,7 @@
               </section>
 
               <section class="middle tab-bar-section">
-                <h1 class="title ellipsis" ng-show="$root.wallet  && !$root.hideWalletNavigation">
+                <h1 class="title ellipsis" ng-show="$root.wallet  && !$root.hideWalletNavigation">
                   {{$root.wallet.getName()}}
                 </h1>
               </section>

js/controllers/walletForPayment.js

@@ -29,7 +29,7 @@ angular.module('copayApp.controllers').controller('walletForPaymentController',
 
   var modalInstance = $modal.open({
     templateUrl: 'views/modals/walletSelection.html',
-    windowClass: 'small',
+    windowClass: 'tiny',
     controller: ModalInstanceCtrl,
   });
 

views/modals/address-book.html

@@ -1,4 +1,7 @@
-<div class="row m10t">
+<nav class="tab-bar text-right hide-for-large-up">
+  <a ng-click="close()" class="p10 text-white">Close</a>
+</nav>
+<div class="row modal-mobile">
   <div class="large-12 columns"> 
     <h1 ng-show="!showForm">Address Book</h1>
     <h1 ng-show="showForm">Add a new entry</h1>
@@ -81,5 +84,5 @@ <h1 ng-show="showForm">Add a new entry</h1>
   <div class="large-12 columns" ng-show="!showForm">
     <a class="button primary expand" ng-click="toggleForm()"><i class="fi-plus"></i> Add entry</a>
   </div>
-  <a class="close-reveal-modal" ng-click="close()"><i class="fi-x size-18"></i></a>
+  <a class="close-reveal-modal show-for-large-up" ng-click="close()"><i class="fi-x size-18"></i></a>
 </div>

views/modals/paypro.html

@@ -1,11 +1,15 @@
-<div class="m20t text-center ">
+<nav class="tab-bar text-right hide-for-large-up">
+  <a ng-click="cancel()" class="p10 text-white">Close</a>
+</nav>
+<div class="modal-mobile">
+<div class="text-center">
   <div class="size-48">
   {{md.unitTotal}} {{$root.wallet.settings.unitName}}
   </div>
   <div class="size-18 m5t text-gray">
     {{ alternative }} {{ alternativeIsoCode }}
   </div>
-  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+  <a class="close-reveal-modal show-for-large-up" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>
 <div class="line-b m10v"></div>
 
@@ -28,6 +32,6 @@
 <div ng-if="md.expirationDate" class="m10v">
   <i>Expires:</i> {{md.expirationDate | amTimeAgo }}
 </div>
-
+</div>
 
 

views/modals/qr-address.html

@@ -1,4 +1,7 @@
-<div class="text-center m20t" ng-init="addr = address.address">
+<nav class="tab-bar text-right hide-for-large-up">
+  <a ng-click="cancel()" class="p10 text-white">Close</a>
+</nav>
+<div class="modal-mobile text-center" ng-init="addr = address.address">
   <qrcode size="220" data="{{addr}}"></qrcode>
 
   <div class="m10t"
@@ -15,5 +18,5 @@
       Copy to clipboard
     </button>
   </div>
-  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+  <a class="close-reveal-modal show-for-large-up" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>

views/modals/tx-details.html

@@ -1,3 +1,7 @@
+<nav class="tab-bar text-right hide-for-large-up">
+  <a ng-click="cancel()" class="p10 text-white">Close</a>
+</nav>
+<div class="modal-mobile">
 <div class="header-modal text-center">
   <div ng-if="btx.addressTo" class="m10v">
     <span class="ellipsis">
@@ -22,7 +26,7 @@
   <div class="size-18 m5t text-gray" ng-show="btx.alternativeAmount">
     {{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
   </div>
-  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+  <a class="close-reveal-modal show-for-large-up" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>
 
 <div ng-if="btx.ts || btx.createdTs " class="m20v line-b">
@@ -73,5 +77,5 @@
       See it on the blockchain <i class="icon-arrow-right2 vm"></i>
   </a>
 </div>
-
+</div>
 

views/modals/txp-details.html

@@ -1,3 +1,7 @@
+<nav class="tab-bar text-right hide-for-large-up">
+  <a ng-click="cancel()" class="p10 text-white">Close</a>
+</nav>
+<div class="modal-mobile">
 <div class="header-modal">
   <div class="row collapse" ng-repeat="out in tx.outs">
     <div class="small-10 columns">
@@ -23,7 +27,7 @@
     </div>
     </div>
   </div>
-  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+  <a class="close-reveal-modal show-for-large-up" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>
 
 <div class="m10v line-b size-14" ng-show="tx.comment">
@@ -105,4 +109,4 @@
     <span translate>Broadcast Transaction</span>
   </button>
 </div>
-
+</div>

views/modals/walletSelection.html

@@ -1,4 +1,7 @@
-<div ng-init="setWallets()">
+<nav class="tab-bar text-right hide-for-large-up">
+  <a ng-click="cancel()" class="p10 text-white">Close</a>
+</nav>
+<div class="modal-mobile" ng-init="setWallets()">
 
   <h1 class="line-b"> Select a wallet to make the payment</h1>
 
@@ -23,5 +26,5 @@ <h1 class="line-b"> Select a wallet to make the payment</h1>
       </div>
     </li>
   </ul>
-  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+  <a class="close-reveal-modal show-for-large-up" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>