From 6c8993fcaba5d1e9e1db865ea8038582adf8d44d Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Tue, 22 Jul 2014 10:54:12 -0300
Subject: [PATCH] Fixes send form

---
 css/main.css                   |  23 ++--
 views/modals/address-book.html |   2 +-
 views/send.html                | 236 ++++++++++++++++++---------------
 3 files changed, 145 insertions(+), 116 deletions(-)

diff --git a/css/main.css b/css/main.css
index 78ee064e3..10aebab50 100644
--- a/css/main.css
+++ b/css/main.css
@@ -245,12 +245,18 @@ a:hover {
   color: #C0392B;
 }
 
+.input-note {
+  margin-top: -10px;
+  display: block;
+  margin-bottom: 1rem;
+}
+
 .box-note {
-  text-align: center;
-  clear: both;
   font-style: italic;
   color: gray;
-  margin-bottom: 10px;
+  background-color: #EDEDF5;
+  padding: 1.5rem;
+  width: 400px;
 }
 
 .button-setup a {
@@ -321,6 +327,10 @@ a:hover {
 .oh {overflow:hidden;}
 .lh {line-height: 0;}
 
+.small {
+  font-size: 60%;
+  line-height: inherit;
+}
 
 .line-dashed-setup-v {
   border-left: 1px dashed #415970;
@@ -785,11 +795,6 @@ button[disabled].white:focus,
   padding: 0.2rem 0.4rem;
 }
 
-.send-bar {
-  background-color: #EDEDF5;
-  padding: 1.5rem;
-}
-
 .has-error {
   color: #C0392A;
 }
@@ -802,7 +807,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   border-color: red;
 }
 
-.copayers h3,h4 {
+.copayers h3, .copayers h4 {
   color: #fff;
   font-weight: 100;
 }
diff --git a/views/modals/address-book.html b/views/modals/address-book.html
index 8dc679230..de1995435 100644
--- a/views/modals/address-book.html
+++ b/views/modals/address-book.html
@@ -1,4 +1,4 @@
-<h3>Add Address Book Entry</h3>
+<h2>Add Address Book Entry</h2>
 <form name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
   <label for="newaddress">Address
     <small ng-hide="!addressBookForm.newaddress.$pristine || newaddress">required</small>
diff --git a/views/send.html b/views/send.html
index 4182273ae..c2e285616 100644
--- a/views/send.html
+++ b/views/send.html
@@ -1,132 +1,156 @@
 <div class="send" data-ng-controller="SendController">
   <div ng-show='$root.wallet.isReady()'>
-    <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
-      <h3>{{title}}</h3>
-      <div class="large-7 columns">
+    <h1>{{title}}</h1>
+    <div class="large-6 columns">
+      <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
         <div class="row">
-          <h4 class="large-2 medium-3 columns text-right">To address <small class="text-gray">(*)</small> </h4>
-          <div class="large-8 medium-7 small-10 columns pr m15b" for="address">
-            <input style="margin:0;" type="text" id="address" name="address" ng-disabled="loading"
-            placeholder="Send to" ng-model="address" valid-address required>
-            <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
-            <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
-            <div>
-              <small class="is-valid" ng-show="!sendForm.address.$invalid && address"> Valid</small>
-              <small class="has-error" ng-show="sendForm.address.$invalid && address"> Not valid </small>
-            </div>
-          </div>
-          <div class="large-2 small-2 columns" ng-hide="showScanner || !isHttp">
-            <a class="postfix button secondary" ng-click="openScanner()"><i class="fi-camera"></i></a>
-          </div>
-          <div class="small-2 columns" ng-show="showScanner && isHttp">
-            <a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
-          </div>
-        </div> <!-- end of to address -->
-        <div id="scanner" class="row" ng-if="showScanner">
-          <div class="text-centered">
-            <canvas id="qr-canvas" width="200" height="150"></canvas>
-            <div ng-show="isMobile">
-              <div id="file-input-wrapper" class="btn btn-primary">
-                <span class="pull-left text-centered">
-                  <i class="glyphicon glyphicon-refresh icon-rotate"></i>
-                  Get QR code
-                </span>
-                <input id="qrcode-camera" type="file" capture="camera" accept="image/*">
+          <div class="large-12 columns">
+            <div class="row collapse">
+              <label for="address">To address
+                <small ng-hide="!sendForm.address.$pristine || address">required</small>
+                <small class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
+                <small class="has-error" ng-show="sendForm.address.$invalid && address">
+                  not valid</small>
+              </label>
+              <div class="small-10 columns">
+                <input type="text" id="address" name="address" ng-disabled="loading"
+                placeholder="Send to" ng-model="address" valid-address required>
+                <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
+                <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
+              </div>
+              <div class="small-2 columns" ng-hide="showScanner || !isHttp">
+                <a class="postfix button secondary" ng-click="openScanner()"><i class="fi-camera"></i></a>
+              </div>
+              <div class="small-2 columns" ng-show="showScanner && isHttp">
+                <a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
               </div>
             </div>
-            <div ng-hide="isMobile">
-              <video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
+            <div id="scanner" class="row" ng-if="showScanner">
+              <div class="text-centered">
+                <canvas id="qr-canvas" width="200" height="150"></canvas>
+                <div ng-show="isMobile">
+                  <div id="file-input-wrapper" class="btn btn-primary">
+                    <span class="pull-left text-centered">
+                      <i class="glyphicon glyphicon-refresh icon-rotate"></i>
+                      Get QR code
+                    </span>
+                    <input id="qrcode-camera" type="file" capture="camera" accept="image/*">
+                  </div>
+                </div>
+                <div ng-hide="isMobile">
+                  <video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
+                </div>
+              </div>
             </div>
           </div>
-        </div> 
+        </div>
 
         <div class="row">
-          <h4 class="large-2 medium-3 text-right columns">Amount <small class="text-gray">(*)</small></h4>
-          <div class="large-8 medium-7 columns m15b">
-            <input style="margin:0;" type="number" id="amount" ng-disabled="loading"
-            name="amount" placeholder="Amount" ng-model="amount"
-            min="0.0001" max="10000000000" enough-amount required
-            autocomplete="off"
-            >
-            <a class="small input-note" title="Send all funds"
-              ng-show="$root.availableBalance > 0" 
-              ng-click="topAmount(sendForm)">
-              Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
-            </a>
-            <div for="amount">
-              <small class="is-valid" ng-show="!sendForm.amount.$invalid">Valid</small>
-              <small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount">Not valid</small>
-              <small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
-              <small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
-              <small class="icon-input" ng-show="sendForm.amount.$invalid && amount"><i class="fi-x"></i></small>
-            </div>                      
+          <div class="large-6 medium-6 columns">
+            <div class="row collapse">
+              <label for="amount">Amount
+                <small ng-hide="!sendForm.amount.$pristine">required</small>
+                <small class="is-valid" ng-show="!sendForm.amount.$invalid && !sendForm.amount.$pristine">Valid</small>
+                <small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount">
+                  Not valid
+                </small>
+                <small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
+              </label>
+              <div class="small-9 columns">
+                <input type="number" id="amount" ng-disabled="loading"
+                name="amount" placeholder="Amount" ng-model="amount"
+                min="0.0001" max="10000000000" enough-amount required
+                autocomplete="off"
+                >
+                <small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
+                <small class="icon-input" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount"><i class="fi-x"></i></small>
+                <a class="small input-note" title="Send all funds"
+                  ng-show="$root.availableBalance > 0" 
+                  ng-click="topAmount(sendForm)">
+                  Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
+                </a>                      
+              </div>
+              <div class="small-3 columns">
+                <span class="postfix">{{$root.unitName}}</span>
+              </div>
+            </div>
           </div>
-          <div class="large-2 small-3 columns">
-            <span class="postfix">{{$root.unitName}}</span>
-          </div>
-        </div> <!-- end of amount -->
+        </div>
 
         <div class="row" ng-show="wallet.totalCopayers > 1">
-          <h4 class="large-2 medium-3 columns text-right" for="comment">Note
-          </h4>
-          <div class="large-10 medium-9 columns m15b">
-            <textarea style="margin:0; height: 100px;" id="comment" ng-disabled="loading" name="comment" placeholder="Leave a private message to your copayers" ng-model="commentText" ng-maxlength="100"></textarea>
-            <small class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
+          <div class="large-12 columns">
+            <div class="row collapse">
+              <label for="comment">Note
+                <small ng-hide="!sendForm.comment.$pristine">optional</small>
+                <small class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
+              </label>
+              <div class="large-12 columns">
+                <textarea id="comment" ng-disabled="loading"
+                  name="comment" placeholder="Leave a private message to your copayers" ng-model="commentText" ng-maxlength="100"></textarea>
+              </div>
+            </div>
           </div>
-        </div> <!-- end of note -->
-      </div> <!-- end of col left -->
+        </div>
 
-      <div class="send-bar large-4 columns left">
+        <div class="row">
+          <div class="large-5 columns">
+            <button type="submit" class="button secondary expand text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
+              Send
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div class="large-6 columns">
+      <div class="box-note">
         <h6>Send to</h6>
         <p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">
-          {{address}}&nbsp;
+        {{address}}&nbsp;
         </p>
         <h6>Total amount for this transaction:</h6>
         <p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}">
-          <b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
-          <small>
-            {{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC <br/>
-            Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
-          </small>
+        <b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
+        <small>
+          {{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC <br/>
+          Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
+        </small>
         </p>
+        <div ng-show="wallet.totalCopayers > 1">
         <h6>Note</h6>
-        <p ng-class="{'hidden': !commentText}">{{commentText}}&nbsp;</p>
-        <div>
-          <button type="submit" class="button secondary expand text-center m0" ng-disabled="sendForm.$invalid || loading" loading="Sending">
-            Send
-          </button>
-        </div>
+        <p ng-class="{'hidden': !commentText}">{{commentText}}</p>
+      </div>
       </div>
-    </form>
-
-    <div class="large-12 columns line-dashed">
-      <h3>Address Book</h3>
-      <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
-      <table ng-show="showAddressBook()">
-        <thead>
-          <tr>
-            <th>Label</th>
-            <th>Address</th>
-            <th>Creator</th>
-            <th>Date</th>
-            <th>&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-        <tr 
-          ng-repeat="(addr, info) in $root.wallet.addressBook" 
-          ng-class="{'addressbook-disabled': info.hidden}">
-          <td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
-          <td width="100" class="ellipsis">{{addr}}</td>
-          <td>{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
-          <td><time>{{info.createdTs | amCalendar}}</time></td>
-          <td><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
-              'Enable' : 'Disable'}}</a></td>
-        </tr>
-        </tbody>
-      </table>
-      <button class="m10t button tiny secondary radius text-center" ng-click="openAddressBookModal()">Add New Entry</button>
     </div>
+
+      <div class="large-12 columns line-dashed">
+        <h3>Address Book</h3>
+        <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
+        <table ng-show="showAddressBook()">
+          <thead>
+            <tr>
+              <th>Label</th>
+              <th>Address</th>
+              <th>Creator</th>
+              <th>Date</th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody>
+          <tr 
+            ng-repeat="(addr, info) in $root.wallet.addressBook" 
+            ng-class="{'addressbook-disabled': info.hidden}">
+            <td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
+            <td width="100" class="ellipsis">{{addr}}</td>
+            <td>{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
+            <td><time>{{info.createdTs | amCalendar}}</time></td>
+            <td><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
+                'Enable' : 'Disable'}}</a></td>
+          </tr>
+          </tbody>
+        </table>
+        <button class="button tiny secondary text-center" ng-click="openAddressBookModal()">Add New Entry</button>
+      </div>
   </div>
 </div>