From c3e510cc7c964d9e6c16961b564ab190a0239778 Mon Sep 17 00:00:00 2001
From: Javier <javier@bitpay.com>
Date: Tue, 9 Aug 2016 11:22:12 -0300
Subject: [PATCH] flex view

---
 public/views/modals/inputAmount.html | 113 +++++++++++++++------------
 src/css/ionic-migration.css          |   8 --
 src/sass/main.scss                   |  33 +++++---
 3 files changed, 82 insertions(+), 72 deletions(-)

diff --git a/public/views/modals/inputAmount.html b/public/views/modals/inputAmount.html
index a43f55ab9..48e38ad29 100644
--- a/public/views/modals/inputAmount.html
+++ b/public/views/modals/inputAmount.html
@@ -10,89 +10,100 @@
       <button class="button black" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</button>
       <button class="button" ng-style="{'background-color':color}" ng-show="!showAlternativeAmount">{{unitName}}</button>
     </div>
-    <div class="buttons m3t" ng-if="specificAmount" ng-click="init()">
-      <button class="button right" ng-style="{'background-color':color}"><span translate>Cancel</span></button>
+    <div class="right-small m10r" ng-if="specificAmount">
+      <a ng-click="init()">
+        <span class="text-close" translate>Cancel</span>
+      </a>
     </div>
   </ion-header-bar>
 
-  <div>
-    <div class="row content" ng-show="!specificAmount">
-      <div class="send-amount col">
-        <div class="text-light text-black m15t" ng-class="{'size-28': smallFont, 'size-36' : !smallFont}">{{amount || '-'}}</div>
-        <div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">{{globalResult}} [{{amountResult || '0.00'}} {{alternativeIsoCode}}]</div>
-        <div class="size-17 text-light text-black" ng-show="showAlternativeAmount">{{globalResult}} [{{alternativeResult || '0.00'}} {{unitName}}]</div>
-      </div>
+  <ion-pane>
+    <ion-content scroll="false" ng-show="!specificAmount">
+      <section class="main-container">
+        <div class="row header">
+          <div class="col text-center">
+            <div class="text-light text-black m15t" ng-class="{'size-28': smallFont, 'size-36': !smallFont}">{{amount || '-'}}</div>
+            <div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">{{globalResult}} [{{amountResult || '0.00'}} {{alternativeIsoCode}}]</div>
+            <div class="size-17 text-light text-black" ng-show="showAlternativeAmount">{{globalResult}} [{{alternativeResult || '0.00'}} {{unitName}}]</div>
+          </div>
+        </div>
 
-      <div class="calculator-keyboard m10b col">
-        <div class="button-content text-center df">
-          <div class="col col-25 col-offset-50">
+        <div class="row button-row">
+          <div class="col-25 col-offset-50">
             <button class="button expand button-stable" ng-click="resetAmount()">AC</button>
           </div>
-          <div class="col col-25">
+          <div class="col-25">
             <button class="button expand text-center" ng-style="{'background-color':index.backgroundColor}"
               ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount">
               <span>Ok</span>
             </button>
           </div>
         </div>
-        <div class="button-content text-center df">
+
+        <div class="row button-row">
           <button class="button expand button-light" ng-click="pushDigit('7')">7</button>
           <button class="button expand button-light" ng-click="pushDigit('8')">8</button>
           <button class="button expand button-light" ng-click="pushDigit('9')">9</button>
           <button class="button expand button-stable" ng-click="pushOperator('/')">/</button>
         </div>
-        <div class="button-content text-center df">
+
+        <div class="row button-row">
           <button class="button expand button-light" ng-click="pushDigit('4')">4</button>
           <button class="button expand button-light" ng-click="pushDigit('5')">5</button>
           <button class="button expand button-light" ng-click="pushDigit('6')">6</button>
           <button class="button button-amount expand button-stable" ng-click="pushOperator('x')">x</button>
         </div>
-        <div class="button-content text-center df">
+
+        <div class="row button-row">
           <button class="button expand button-light" ng-click="pushDigit('1')">1</button>
           <button class="button expand button-light" ng-click="pushDigit('2')">2</button>
           <button class="button expand button-light" ng-click="pushDigit('3')">3</button>
           <button class="button expand button-stable" ng-click="pushOperator('+')">+</button>
         </div>
-        <div class="button-content text-center df">
+
+        <div class="row button-row">
           <button class="button expand button-light" ng-click="pushDigit('.')">.</button>
           <button class="button expand button-light" ng-click="pushDigit('0')">0</button>
           <button class="button expand button-light" ng-click="removeDigit()"><</button>
           <button class="button expand button-stable" ng-click="pushOperator('-')">-</button>
         </div>
-      </div>
-    </div>
+      </section>
+    </ion-content>
 
-    <div class="modal-content m20b" ng-show="specificAmount">
-      <h4 class="title m10l" translate>QR Code</h4>
-      <ul class="no-bullet size-14 m0">
-        <li class="line-b p10 oh text-center">
-          <qrcode size="220" data="bitcoin:{{addr + '?amount=' + specificAmount}}"></qrcode>
-          <div class="m10t text-center" ng-show="isCordova">
-            <span class="button outline dark-gray tiny round"
-              ng-click="shareAddress('bitcoin:' + addr + '?amount=' + specificAmount)">
-              <i class="fi-share"></i>
-              <span translate>Share address</span>
+    <ion-content ng-show="specificAmount" ng-style="{'background-color':'#f6f7f9'}">
+      <section class="modal-content m20b">
+        <h4 class="title m10l" translate>QR Code</h4>
+        <ul class="no-bullet size-14 m0">
+          <li class="line-b p10 oh text-center">
+            <qrcode size="220" data="bitcoin:{{addr + '?amount=' + specificAmount}}"></qrcode>
+            <div class="m10t text-center" ng-show="isCordova">
+              <span class="button outline dark-gray tiny round"
+                ng-click="shareAddress('bitcoin:' + addr + '?amount=' + specificAmount)">
+                <i class="fi-share"></i>
+                <span translate>Share address</span>
+              </span>
+            </div>
+          </li>
+        </ul>
+
+        <h4 class="title m10l" translate>Details</h4>
+        <ul class="no-bullet size-14 m0">
+          <li class="line-b p10 oh">
+            <span class="text-gray" translate>Address</span>:
+            <span class="right">
+              <span class="text-gray enable_text_select">{{address}}</span>
             </span>
-          </div>
-        </li>
-      </ul>
-
-      <h4 class="title m10l" translate>Details</h4>
-      <ul class="no-bullet size-14 m0">
-        <li class="line-b p10 oh">
-          <span class="text-gray" translate>Address</span>:
-          <span class="right">
-            <span class="text-gray enable_text_select">{{address}}</span>
-          </span>
-        </li>
-        <li class="line-b p10 oh">
-          <span class="text-gray" translate>Amount</span>:
-          <span class="right">
-            {{specificAmount}} {{unitName}}
-            <span class="label gray radius">{{specificAlternativeAmount}} {{alternativeIsoCode}}</span>
-          </span>
-        </li>
-      </ul>
-    </div>
-  </div>
+          </li>
+          <li class="line-b p10 oh">
+            <span class="text-gray" translate>Amount</span>:
+            <span class="right">
+              {{specificAmount}} {{unitName}}
+              <span class="label gray radius">{{specificAlternativeAmount}} {{alternativeIsoCode}}</span>
+            </span>
+          </li>
+        </ul>
+        <div class="extra-margin-bottom"></div>
+      </section>
+    </ion-content>
+  </ion-pane>
 </ion-modal-view>
diff --git a/src/css/ionic-migration.css b/src/css/ionic-migration.css
index 4b666e7a8..5cad5b720 100644
--- a/src/css/ionic-migration.css
+++ b/src/css/ionic-migration.css
@@ -16,14 +16,6 @@
 	display: inherit;
 }
 
-.df {
-	display: flex;
-}
-
-.button-content {
-	margin-bottom: -15px;
-}
-
 .behind {
 	z-index: -1;
 }
diff --git a/src/sass/main.scss b/src/sass/main.scss
index e4b4ce837..b99e5f2c3 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -282,6 +282,26 @@ a {
   }
 }
 
+.main-container {
+  display: -webkit-flex;
+  -webkit-flex-direction: column;
+  height: 100%;
+}
+
+.main-container > .row {
+  -webkit-flex: 1;
+}
+
+.header {
+  -webkit-flex: 1.5 !important;
+  -webkit-align-items: center;
+}
+
+.button-row {
+  -webkit-align-items: center;
+  margin-bottom: -30px;
+}
+
 .box-setup-footer {
   overflow: hidden;
   margin-top: 1rem;
@@ -1580,19 +1600,6 @@ input.ng-invalid-match {
   margin-bottom: 25px;
 }
 
-.send-amount {
-  width: 100%;
-  text-align: center;
-  padding-top: 7%;
-  color: #fff;
-  height: 30%;
-}
-
-.calculator-keyboard {
-  width: 100%;
-  height: 70%;
-}
-
 .alternative-amount {
   height: 25px;
   text-align: center;