Merge pull request #1295 from bechi/bugs/ui-mobile

Bugs/ui mobile

css/src/main.css

@@ -368,6 +368,7 @@ a:hover {
 .pr {position: relative;}
 .pa {position: absolute;}
 .m0 {margin: 0;}
+.p0 {padding: 0 !important;}
 .db {display: block;}  
 .size-12 { font-size: 12px; }      
 .size-14 { font-size: 14px; }
@@ -923,8 +924,8 @@ button, .button, p {
 
 .addresses .list-addr i {
   position: absolute;
-  top: -25px;
-  left: 6px;
+  top: -15px;
+  left: 0;
   cursor: pointer;
 }
 
@@ -1194,5 +1195,10 @@ a.text-warning:hover {color: #FD7262;}
   padding: 50px;
 }
 
+.collapse {
+  margin: auto;
+  max-width: 100%;
+}
+
 
 /*-----------------------------------------------------------------*/

css/src/mobile.css

@@ -102,6 +102,14 @@
     border-right: 1px solid #425568;
   }
 
+  .right-small {
+    border-left: 1px solid #425568;
+  }
+
+  .right-small a {
+    color: white;
+  }
+
   .panel .secret {
     padding-top: 0.5rem;
     display: block;
@@ -123,6 +131,10 @@
     height: 200px;
   }
 
+  .addresses .panel {
+    padding: 1rem 0.8rem;
+  }
+
   .btn-copy {
     display: none;
   }

index.html

@@ -19,6 +19,9 @@
           <section class="left-small">
             <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
           </section>
+          <section ng-controller="SidebarController" class="right-small text-center">
+            <a href="#" ng-click="signout()"><i class="size-24 fi-power"></i></a>
+          </section>
 
           <section class="middle tab-bar-section">
             <h1 class="right">

views/addresses.html

@@ -7,30 +7,29 @@
     
     <div class="large-12 medium-12" ng-if="!!(addresses|removeEmpty).length">
       <div class="large-12 medium-12" ng-init="showAll=0">
-        <ul>
-          <li class="panel radius oh" ng-repeat="addr in addresses|removeEmpty|limitAddress:showAll" ng-click="openAddressModal(addr)">
-
-            <div class="large-10 medium-9 small-8 column" >
-              <div class="ellipsis list-addr">
-                <i class="fi-thumbnails size-48 show-for-large-up">&nbsp;</i>
-                <span>
-                  <contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+          <div class="panel radius oh" ng-repeat="addr in addresses|removeEmpty|limitAddress:showAll" ng-click="openAddressModal(addr)">
+            <div class="row collapse">
+              <div class="large-10 medium-9 small-8 column" >
+                <div class="ellipsis list-addr">
+                  <i class="fi-thumbnails size-48 show-for-large-up">&nbsp;</i>
+                  <span>
+                    <contact address="{{addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
+                  </span>
+                  <span class="btn-copy" clip-copy="addr.address"> </span>
+                  <small class="label" ng-if="addr.isChange">change</small>
+                </div>
+              </div>
+              
+              <div class="large-2 medium-3 small-4 column text-right">
+                <span ng-if="$root.updatingBalance">
+                  <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+                </span>
+                <span class="size-12" ng-if="!$root.updatingBalance">
+                  {{addr.balance || 0|noFractionNumber}} {{$root.unitName}}
                 </span>
-                <span class="btn-copy" clip-copy="addr.address"> </span>
-                <small class="label" ng-if="addr.isChange">change</small>
               </div>
             </div>
-            
-            <div class="large-2 medium-3 small-4 column text-right">
-              <span ng-if="$root.updatingBalance">
-                <i class="fi-bitcoin-circle icon-rotate spinner"></i>
-              </span>
-              <span class="size-12" ng-if="!$root.updatingBalance">
-                {{addr.balance || 0|noFractionNumber}} {{$root.unitName}}
-              </span>
-            </div>
-          </li>
-        </ul>
+          </div>
 
         <a class="secondary radius" ng-click="showAll=!showAll" ng-show="(addresses|removeEmpty).length != (addresses|removeEmpty|limitAddress).length">
           <span ng-if="!showAll">Show all</span>

views/includes/sidebar-mobile.html

@@ -6,36 +6,33 @@
       </a>
       <div ng-include="'views/includes/version.html'"></div>
     </div>
-    <div class="line-sidebar-b"></div>
-    <div class="founds size-12 text-center box-founds p10t">
-      <div class="m10b">
-        Balance
-        <span ng-if="$root.updatingBalance">
-          <i class="fi-bitcoin-circle icon-rotate spinner"></i>
-        </span>
-        <span ng-if="!$root.updatingBalance"
-          data-options="disable_for_touch:true"
-          tooltip="{{totalBalanceBTC |noFractionNumber:8}} BTC"
-          tooltip-trigger="mouseenter"
-          tooltip-placement="bottom">{{totalBalance || 0
-          |noFractionNumber}} {{$root.unitName}} 
-        </span>
-      </div> 
-      <div>
-        Locked 
-        <span ng-if="$root.updatingBalance">
-          <i class="fi-bitcoin-circle icon-rotate spinner"></i>
-        </span>
-        <span ng-show="!$root.updatingBalance"
-          data-options="disable_for_touch:true"
-          tooltip="{{lockedBalanceBTC |noFractionNumber:8}} BTC"
-          tooltip-trigger="mouseenter"
-          tooltip-placement="bottom">{{lockedBalance || 0|noFractionNumber}} {{$root.unitName}}
-        </span> &nbsp;<i class="fi-info medium" tooltip="Balance locked in pending transaction proposals" tooltip-placement="bottom"></i>
-      </div>
-      <div class="line-sidebar-b"></div>
-    </div>
   </header>
+  <div class="line-sidebar-b"></div>
+  <div class="founds size-12 box-founds p15" ng-disabled="$root.loading" ng-click="refresh()">
+    <p class="text-gray">
+      <span>{{$root.wallet.getName()}}</span>
+      <span class="size-12 right">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</span>
+    </p>
+    <div class="line-sidebar-t">
+      Balance
+      <span class="gray small side-bar right" title="Manual Refresh"><i class="size-16 fi-refresh"></i></span>
+      <span ng-if="$root.updatingBalance">
+        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+      </span>
+      <span ng-if="!$root.updatingBalance">{{totalBalance || 0
+        |noFractionNumber}} {{$root.unitName}} 
+      </span>
+    </div> 
+    <div class="m10t" ng-show="lockedBalance">
+      Locked 
+      <span ng-if="$root.updatingBalance">
+        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+      </span>
+      <span ng-show="!$root.updatingBalance">{{lockedBalance || 0|noFractionNumber}} {{$root.unitName}}
+      </span> &nbsp;<i class="fi-info medium" tooltip="Balance locked in pending transaction proposals" tooltip-placement="bottom"></i>
+    </div>
+  </div>
+  <div class="line-sidebar-t p0"></div>
   <ul class="off-canvas-list">
     <li data-ng-repeat="item in menu" ui-route="{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
       <a href="#!/{{item.link}}" ng-click="toggleCollapse()" class="db p20h"> 

views/includes/sidebar.html

@@ -28,7 +28,7 @@
         tooltip-trigger="mouseenter"
         tooltip-placement="bottom">{{totalBalance || 0 |noFractionNumber}} {{$root.unitName}}
       </span>
-      <br>
+      <div class="m10t" ng-show="lockedBalance">
       Locked &nbsp;
       <span ng-if="$root.updatingBalance">
         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
@@ -41,6 +41,7 @@
         tooltip-trigger="mouseenter"
         tooltip-placement="bottom">{{lockedBalance || 0|noFractionNumber}} {{$root.unitName}}
       </span> &nbsp;<i class="fi-info medium" tooltip="Balance locked in pending transaction proposals" tooltip-placement="bottom"></i>
+      </div>
     </div>
     <div class="line-sidebar"></div>
   </header>

views/send.html

@@ -8,9 +8,10 @@
     <div ng-show="txs.length != 0" class="large-12 line-dashed" style="padding: 0;"></div>
 
     <h1>{{title}}</h1>
+    <div class="row collapse m0">
     <div class="large-6 columns">
       <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
-        <div class="row">
+        <div class="row collapse">
           <div class="large-12 columns">
             <div class="row collapse">
               <label for="address">To address
@@ -52,8 +53,8 @@
           </div>
         </div>
 
-        <div class="row">
-          <div class="large-6 medium-6 columns">
+        <div class="row collapse">
+          <div class="large-5 medium-5 columns">
             <div class="row collapse">
               <label for="amount">Amount
                 <small ng-hide="!sendForm.amount.$pristine">required</small>
@@ -101,7 +102,7 @@
           </div>
         </div>
 
-        <div class="row" ng-show="wallet.isShared()">
+        <div class="row collapse" ng-show="wallet.isShared()">
           <div class="large-12 columns">
             <div class="row collapse">
               <label for="comment">Note
@@ -116,8 +117,8 @@
           </div>
         </div>
 
-        <div class="row">
-          <div class="large-5 medium-3 small-4 columns">
+        <div class="row collapse">
+          <div class="large-5 medium-6 small-12 columns">
             <button type="submit" class="button primary expand text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
               Send
             </button>
@@ -125,6 +126,7 @@
         </div>
       </form>
     </div>
+  </div><!--  end of row -->
 
     <div class="large-6 columns show-for-large-up" ng-show="!!$root.merchant">
       <div class="send-note">

views/transactions.html

@@ -30,14 +30,14 @@
           No transactions yet.
         </div>
         <div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
-          <div class="last-transactions-header">
-            <div class="large-8 medium-7 small-3 columns ellipsis">
+          <div class="last-transactions-header size-14">
+            <div class="large-8 medium-7 small-4 columns ellipsis">
               <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank">
                 {{btx.txid}} 
               </a> 
               <span class="btn-copy" clip-copy="btx.txid"></span>
             </div>
-            <div class="large-4 medium-5 small-9 columns text-right">
+            <div class="large-4 medium-5 small-8 columns text-right">
               <div data-ng-show="btx.firstSeenTs">
                 first seen at
                 <time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>
@@ -49,7 +49,7 @@
             </div>
           </div>
           <div class="last-transactions-content">
-            <div class="large-5 medium-5 small-5 columns">
+            <div class="large-5 medium-5 small-12 columns">
               <div ng-repeat="vin in btx.vinSimple">
                 <small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
                 <p class="ellipsis text-gray size-12">
@@ -57,10 +57,13 @@
                 </p>
               </div>
             </div>
-            <div class="large-1 medium-1 small-1 columns text-center">
+            <div class="large-1 medium-1 hide-for-small-only columns text-center">
               <i class="fi-arrow-right"></i>
             </div>
-            <div class="large-6 medium-6 small-6 columns">
+            <div class="show-for-small-only small-12 columns text-center">
+              <i class="fi-arrow-down"></i>
+            </div>
+            <div class="large-6 medium-6 small-12 columns">
               <div ng-repeat="vout in btx.voutSimple">
                 <small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
                 <p class="ellipsis text-gray size-12">
@@ -70,9 +73,13 @@
             </div>
           </div>
           <div class="last-transactions-footer">
-            <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
-            <div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
-            <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
+            <div class="large-6 medium-6 small-6 columns">
+              <p class="size-12"> Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</p>
+              <p class="size-12">Confirmations: {{btx.confirmations || 0}}</p>
+            </div>
+            <div class="large-6 medium-6 small-6 columns text-right">
+              <p class="label size-14">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</p>
+            </div>
           </div>
         </div>
       </div>