Popup more friendly for mobile

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 @@
   <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 @@
       </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>