add style on Sidebar-mobile

views/includes/sidebar-mobile.html

@@ -1,24 +1,39 @@
 <div ng-controller="SidebarController">
-  <header class="text-center">
-    <div class="text-white m10v">
-      <img src="img/logo-negative-beta.svg" alt="" width="80">
-      <div ng-include="'views/includes/version.html'"></div>
-    </div>
-
-  </header>
-  <div ng-if="$root.wallet" class="founds box-founds p15" ng-disabled="$root.loading">
+  <header>
     <div class="m10b" ng-click="toggleWalletSelection()">
-      <span>{{$root.wallet.getName()}} 
-        {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}
-      </span>
-      <a class="right text-gray">
-        <span ng-show="!walletSelection">
-          <i class="fi-arrow-down"></i>
-        </span>
-        <span ng-show="walletSelection">
-          <i class="fi-arrow-up"></i>
-        </span> 
-      </a>
+      <div class="col1">
+        <div class="avatar-wallet">{{$root.wallet.getName() | limitTo: 1}}</div>
+      </div>
+      <div class="col2" ng-class="{'col2_full':!wallets.0}">
+        <div class="oh m5t m10r"> 
+          <div class="right size-10 text-white">[ {{$root.wallet.requiredCopayers}} of {{$root.wallet.totalCopayers}} ]</div>
+          <div class="name-wallet">
+            <div class="ellipsis">{{$root.wallet.getName()}}</div>
+          </div> 
+        </div>
+        <div class="founds size-12">
+          <span ng-if="!$root.wallet.isReady()">Waiting for copayers...</span>
+          <div ng-if="$root.wallet.isReady()">
+            <span ng-if="$root.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
+            <div ng-if="$root.wallet && !$root.updatingBalance" data-options="disable_for_touch:true">
+              <b class="m5r">{{totalBalance || 0 |noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
+              <span ng-if="alternativeBalanceAvailable" class="alt-currency">{{totalBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}</span>
+              <span ng-if="!alternativeBalanceAvailable" class="alt-currency">N/A</span>
+            </div> 
+          </div>
+        </div>
+      </div>
+      <div class="col3" ng-if="wallets.0">
+        <a ng-class="{'selected':walletSelection}" 
+          ng-click="toggleWalletSelection()"> 
+          <span ng-show="!walletSelection">
+            <i class="icon-arrow-down2"></i>
+          </span>
+          <span ng-show="walletSelection">
+            <i class="icon-arrow-up2"></i>
+          </span> 
+        </a>
+      </div>
     </div>
     <div ng-if="walletSelection">
       <div class="side-nav wallets" ng-show="!wallets.0">
@@ -53,6 +68,8 @@
         </li>
       </ul>
     </div>
+  </header>
+  <!-- <div ng-if="$root.wallet" class="founds box-founds p15" ng-disabled="$root.loading">
     <div class="line-t" ng-show="!walletSelection" ng-click="refresh()">
       <a class="side-bar text-gray right" title="Manual Refresh"><i class="fi-refresh"></i></a>
       <span ng-if="$root.updatingBalance">
@@ -71,14 +88,18 @@
         {{lockedBalance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}
       </span>
     </div>
-  </div>
+  </div> -->
 
-  <div class="line-t p0"></div>
-  <ul class="off-canvas-list" ng-show="!walletSelection">
-    <li>
-      <a href="#!/more" class="db p20h nav-item" title="Settings">
-        <i class="size-24 m20r fi-widget"></i> {{'Settings' | translate }} </a>
-    </li>
+  <a href="#!/profile" class="large-2 medium-2 columns text-center m30v" title="Profile">
+    <div class="photo-container">
+      <img gravatar-src="'{{username}}'" gravatar-size="35">
+    </div>
+    <p class="text-black m5"> bechilandia@gmail.com </p>
+    <span class="db p20h text-gray size-10" >
+      <i class="fi-torso"></i> {{'ViewProfile' | translate }} 
+    </span>
+  </a>
+  <ul class="off-canvas-list columns" ng-show="!walletSelection">
     <li>
       <a href="#!/create" class="db p20h nav-item" title="Create new wallet">
         <i class="size-24 m20r fi-plus"></i> {{'Create new wallet' | translate }} </a>
@@ -89,17 +110,19 @@
     </li>
     <li>
     <a href="#!/import" class="db p20h nav-item" title="Import wallet">
-      <i class="size-24 m20r fi-download"></i> {{'Import wallet' | translate }} </a>
+      <i class="size-24 m20r fi-download"></i> {{'Import a wallet' | translate }} </a>
     </li>
     <li>
-      <a href="#!/profile" class="db p20h nav-item" title="Profile">
-        <i class="size-24 m20r fi-torso"></i> {{'Profile' | translate }} </a>
+      <a href="#!/more" class="db p20h nav-item" title="Settings">
+        <i class="size-24 m20r fi-widget"></i> {{'Settings' | translate }} </a>
     </li>
     <li>
       <a href="#!/" class="db p20h nav-item" title="Close"
         ng-click="signout()"><i class="size-24 m20r fi-power"></i> {{'Close'|translate}}</a>
     </li>
   </ul>
-
+  <div class="text-gray size-10 text-center m20t columns">
+    <div ng-include="'views/includes/version.html'"></div>
+  </div>
 </div>