From e0ccb14ab52ee8b13a22244708c289b958d7a5a3 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Wed, 26 Nov 2014 18:50:58 -0300
Subject: [PATCH] fixes importants ux issues

---
 css/src/main.css                   |  2 +-
 css/src/mobile.css                 | 31 ++++++++++++++++----
 views/copayers.html                | 12 +++++---
 views/create.html                  |  6 +++-
 views/history.html                 | 46 +++++++++++++++++++++---------
 views/homeWallet.html              |  6 +++-
 views/import.html                  |  6 +++-
 views/includes/sidebar-mobile.html |  2 +-
 views/join.html                    |  6 +++-
 views/more.html                    | 34 +++++++++++++---------
 views/profile.html                 |  7 +++--
 views/receive.html                 | 10 +++++--
 views/send.html                    |  8 ++++--
 13 files changed, 125 insertions(+), 51 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index 36b20f2ff..5d64de9fd 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -330,7 +330,7 @@ a:hover {
 
 .main {
   margin-left: 250px;
-  padding: 100px 1.5rem;
+  padding: 85px 1.5rem;
   background-color: #F8F8FB;
 }
 
diff --git a/css/src/mobile.css b/css/src/mobile.css
index c799d0c1e..2430b98aa 100644
--- a/css/src/mobile.css
+++ b/css/src/mobile.css
@@ -7,7 +7,7 @@
 @media (max-width: 1024px) {
 
   .logo-setup {
-    margin: 20px 0;
+    margin: 0;
     padding: 2rem 0;
   }
 
@@ -24,11 +24,11 @@
   }
 
   .main {
-    height: 100%;
+    height: 92%;
     margin-top: 40px;
     margin-left: 0;
     margin-bottom: -40px;
-    padding: 20px 0 90px 0;
+    padding: 20px 0 80px 0;
   }
 
   .tab-bar {
@@ -48,6 +48,16 @@
     background: #2C3E50;
   }
 
+  header {
+    height: 45px;
+    line-height: 110%;
+  }
+
+  .col3 a {
+    height: 45px;
+    padding: 12px 5px;
+  }
+
   .left-off-canvas-menu {
     background: #E4E8EC;
     line-height: 24px;
@@ -60,6 +70,14 @@
   .page{
     height:100%;   
   }
+
+  .avatar-wallet {
+    margin-top: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 0.35rem 0.65rem;
+  }
+
   
   .copayers {
     position: relative;
@@ -87,6 +105,7 @@
 
   .tab-bar h1 {
     font-weight: 100;
+    text-align: center;
   }
 
   ul.off-canvas-list li a {
@@ -134,11 +153,11 @@
   }
 
   .left-small {
-    border-right: 1px solid #425568;
+    border-right: none;
   }
 
   .right-small {
-    border-left: 1px solid #425568;
+    border-left: none;
   }
 
   .right-small a {
@@ -189,7 +208,7 @@
     padding: 0;
     height: 100%;
     left: 0;
-    top: 56px;
+    top: 45px;
   }
 
   ul.off-canvas-list li a:hover {
diff --git a/views/copayers.html b/views/copayers.html
index da633dee2..b01b23165 100644
--- a/views/copayers.html
+++ b/views/copayers.html
@@ -1,10 +1,14 @@
 <div ng-controller="CopayersController">
   <div ng-if='$root.wallet && $root.wallet.isReady()' ng-init="goToWallet()"></div>
 
-  <h1 translate  class="hide-for-large-up">
-    Waiting copayers for {{$root.wallet.getName()}} 
-    <small>{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</small>
-  </h1>
+  <div class="row hide-for-large-up">
+    <div class="medium-12 small-12 columns">
+      <h1 translate>
+        Waiting copayers for {{$root.wallet.getName()}} 
+        <small>{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</small>
+      </h1>
+    </div>
+  </div>
   <div class="row">
     <div class="large-12 columns">
       <div ng-if="!$root.wallet.isReady()">
diff --git a/views/create.html b/views/create.html
index f6aabee3f..8eb69a1bf 100644
--- a/views/create.html
+++ b/views/create.html
@@ -11,7 +11,11 @@
     </div>
   </div>
   <div class="setup" ng-show="!loading && !$root.starting">
-    <h1 class="hide-for-large-up">{{$root.title}}</h1>
+    <div class="row hide-for-large-up">
+      <div class="medium-12 small-12 columns">
+        <h1>{{$root.title}}</h1>
+      </div>
+    </div>
     <form name="setupForm" ng-submit="create(setupForm)" novalidate>
       <div class="row">
         <div class="large-12 columns">
diff --git a/views/history.html b/views/history.html
index cb396e489..682bf6de6 100644
--- a/views/history.html
+++ b/views/history.html
@@ -1,20 +1,32 @@
 <div class="transactions" data-ng-controller="HistoryController" data-ng-init="update()">
   <div ng-show='$root.wallet.isReady()'>
-    <h1 class="hide-for-large-up">{{$root.title}}</h1> 
-    <div ng-if="loading" class="m20b">
-      <i class="fi-bitcoin-circle icon-rotate spinner"></i> 
-      <span translate>Loading...</span>
-    </div>
-    <div ng-if="!blockchain_txs[0].txid && !loading">
-      <em><strong translate>No transactions yet.</strong></em>
+    <div class="row">
+      <div class="large-12 medium-12 small-12 columns">
+        <h1 class="hide-for-large-up">{{$root.title}}</h1> 
+        <div ng-if="loading" class="m20b">
+          <i class="fi-bitcoin-circle icon-rotate spinner"></i> 
+          <span translate>Loading...</span>
+        </div>
+        <div ng-if="!blockchain_txs[0].txid && !loading">
+          <em><strong translate>No transactions yet.</strong></em>
+        </div>
+      </div>
     </div>
     <div class="row" ng-if="blockchain_txs[0].txid">
       <div class="large-12 columns">
         <div class="panel" 
-          ng-repeat="btx in blockchain_txs | orderBy:'-ts'" ng-click="btx.showDetails = !btx.showDetails">
+          ng-repeat="btx in blockchain_txs | orderBy:'-ts'">
           <div class="row size-14">
-            <div class="large-2 medium-2 small-12 columns">
-              <div class="tx-date">
+            <div class="large-2 medium-2 small-12 columns" ng-click="btx.showDetails = !btx.showDetails">
+              <div class="tx-date oh">
+                <div class="right hide-for-large-only">
+                  <span ng-show="!btx.showDetails">
+                    <i class="icon-arrow-down2"></i>
+                  </span>
+                  <span ng-show="btx.showDetails">
+                    <i class="icon-arrow-up2"></i>
+                  </span>
+                </div>
                 <time 
                   class="hastip"
                   ng-if="btx.ts"
@@ -61,7 +73,7 @@
             </div>
 
             <div class="large-1 columns show-for-large-up text-gray text-right" ng-init="btx.showDetails = false">
-              <a>
+              <a ng-click="btx.showDetails = !btx.showDetails">
                 <i ng-if="!btx.showDetails" class="icon-arrow-down4"></i>
                 <i ng-if="btx.showDetails" class="icon-arrow-up4"></i>
               </a>
@@ -105,8 +117,15 @@
             </div>
           </div>
         </div>
-        <div class="line-white"></div>
-        <div class="right size-12">
+      </div>
+    </div>
+    <div ng-show="blockchain_txs[0].txid">
+      <div class="line-white"></div>
+      <div class="row">
+        <div class="large-9 columns">
+          <pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
+        </div>
+        <div class="large-3 columns m5t text-right size-12 show-for-large-only">
           <div ng-if="generating">
             <i class="fi-bitcoin-circle icon-rotate spinner"></i> 
             <span translate>Generating file...</span>
@@ -118,7 +137,6 @@
             </a>
           </div>
         </div>
-        <pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
       </div>
     </div>
   </div>
diff --git a/views/homeWallet.html b/views/homeWallet.html
index 1c317b6fa..a54e8b905 100644
--- a/views/homeWallet.html
+++ b/views/homeWallet.html
@@ -1,6 +1,10 @@
 <div class="home-wallet" ng-controller="HomeWalletController">
   <div ng-show='$root.wallet.isReady()'>
-    <h1 translate  class="hide-for-large-up">Home</h1>
+    <div class="row hide-for-large-up">
+      <div class="medium-12 small-12 columns">
+        <h1 translate>Home</h1>
+      </div>
+    </div>
 
     <div class="row">
       <div class="large-12 columns">
diff --git a/views/import.html b/views/import.html
index 73c2787f6..c03d31f67 100644
--- a/views/import.html
+++ b/views/import.html
@@ -12,7 +12,11 @@
   </div>
 
   <div ng-show="!loading">
-    <h1 class="hide-for-large-up">{{$root.title}}</h1>
+    <div class="row hide-for-large-up">
+      <div class="large-12 medium-12 small-12 columns">
+        <h1>{{$root.title}}</h1>
+      </div>
+    </div>
     <div class="row">
       <div class="large-12 columns">
         <div class="panel">
diff --git a/views/includes/sidebar-mobile.html b/views/includes/sidebar-mobile.html
index 4805b5665..4cf4e45a2 100644
--- a/views/includes/sidebar-mobile.html
+++ b/views/includes/sidebar-mobile.html
@@ -38,7 +38,7 @@
       <div class="side-nav wallets text-center off-canvas-list" ng-show="!wallets[0]">
         <p class="size-12 text-gray m10t" translate>You do not have another wallets.</p>
         <a href="#!/create" class="db button secondary tiny" title="Create new wallet">
-        <i class="m20r fi-plus"></i> {{'Create new wallet' | translate }} </a>
+        <i class="m10r fi-plus"></i> {{'Create new wallet' | translate }} </a>
       </div>
       <ul class="side-nav wallets off-canvas-list" ng-show="wallets[0]"
         ng-click="toggleWalletSelection()">
diff --git a/views/join.html b/views/join.html
index 194343317..734f81d5e 100644
--- a/views/join.html
+++ b/views/join.html
@@ -12,7 +12,11 @@
     </div>
 
   <div ng-show="!loading">
-    <h1 class="hide-for-large-up">{{$root.title}}</h1>
+    <div class="row hide-for-large-up">
+      <div class="large-12 medium-12 small-12 columns">
+        <h1>{{$root.title}}</h1>
+      </div>
+    </div>
       <div class="row">
         <div class="large-12 columns">
         <form name="joinForm" ng-submit="join(joinForm)" novalidate>
diff --git a/views/more.html b/views/more.html
index eb9e73441..8d5940974 100644
--- a/views/more.html
+++ b/views/more.html
@@ -1,7 +1,11 @@
 <div class="backup" ng-controller="MoreController">
-  <h1 class="hide-for-large-up">{{$root.title}}</h1>
-  <div class="row">
-    <form name="settingsForm">
+  <div class="row hide-for-large-up">
+    <div class="large-12 medium-12 small-12 columns">
+      <h1>{{$root.title}}</h1>
+    </div>
+  </div>
+  <form name="settingsForm">
+    <div class="row">
       <div class="large-6 medium-6 columns">
         <fieldset>
           <legend translate>Wallet Unit</legend>
@@ -16,20 +20,22 @@
           </select>
         </fieldset>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
     
   <div class="line-dashed-h m20b"></div>
   
-  <div class="m20b">
-    <a class="size-12" ng-click="hideAdv=!hideAdv">
-      <i class="fi-widget m3r"></i>
-      <span translate ng-hide="!hideAdv">Show</span> 
-      <span translate ng-hide="hideAdv">Hide</span> 
-      <span translate>advanced options</span> 
-      <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-      <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-    </a>
+  <div class="m20b row">
+    <div class="large-12 columns">
+      <a class="size-12" ng-click="hideAdv=!hideAdv">
+        <i class="fi-widget m3r"></i>
+        <span translate ng-hide="!hideAdv">Show</span> 
+        <span translate ng-hide="hideAdv">Hide</span> 
+        <span translate>advanced options</span> 
+        <i ng-if="hideAdv" class="icon-arrow-down4"></i>
+        <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
+      </a>
+    </div>
   </div>
 
   <div ng-hide="hideAdv" class="row">
diff --git a/views/profile.html b/views/profile.html
index 0fb7db5a4..4cc0f0fd6 100644
--- a/views/profile.html
+++ b/views/profile.html
@@ -1,6 +1,9 @@
 <div class="backup" ng-controller="ProfileController">
-  <h1 class="hide-for-large-up">{{$root.title}}</h1>
-
+  <div class="row hide-for-large-up">
+    <div class="large-12 medium-12 small-12 columns">
+      <h1>{{$root.title}}</h1>
+    </div>
+  </div>
   <div class="row">
     <div class="large-12 columns">
       <div class="panel">
diff --git a/views/receive.html b/views/receive.html
index 50a11468e..eee7ba1d3 100644
--- a/views/receive.html
+++ b/views/receive.html
@@ -1,8 +1,12 @@
 <div class="addresses" ng-controller="ReceiveController">
   <div ng-show='$root.wallet.isReady()'>
-    <h1 class="hide-for-large-up">{{$root.title}}</h1> 
-    <div ng-show="!addresses[0]">
-        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+    <div class="row">
+      <div class="large-12 medium-12 small-12 columns">
+        <h1 class="hide-for-large-up">{{$root.title}}</h1> 
+        <div ng-show="!addresses[0]">
+          <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+        </div>
+      </div>
     </div>
     <div class="row">
       <div class="large-12 columns" ng-if="!!(addresses|removeEmpty).length">
diff --git a/views/send.html b/views/send.html
index fcc11a7bf..61ea1a389 100644
--- a/views/send.html
+++ b/views/send.html
@@ -9,9 +9,13 @@
           ng-include="'views/includes/transaction.html'"></div>
       </div>
     </div>
-    <div ng-show="$root.txps.length != 0" class="line-dashed-h m20b"></div>
 
-    <h1 class="hide-for-large-up">{{$root.title}}</h1>
+    <div class="row">
+      <div class="large-12 medium-12 small-12 columns">
+        <div ng-show="$root.txps.length != 0" class="line-dashed-h m20b"></div>
+        <h1 class="hide-for-large-up">{{$root.title}}</h1>
+      </div>
+    </div>
     <div class="row">
       <div class="large-12 columns">
           <div class="panel">