Sidebar auto height (Depending on the number of items that have). Fix auto-refresh and show/hide wallets

css/src/main.css

@@ -147,14 +147,22 @@ header .alt-currency {
   float: right;
   background-color: #23C9A9;
   padding: 19px 12px;
+  color: #B6E9DF;
 }
 
-.col3 a.selected, .col3 a.selected:hover {
+.col3 a.selected {
   background-color: #213140;
+  color: #3C4E60;
+}
+
+.col3 a.selected:hover {
+  background-color: #213140;
+  color: #fff;
 }
 
 .col3 a:hover {
   background-color: #16A085;
+  color: #fff;
 }
 
 .off-canvas-wrap, .inner-wrap{
@@ -241,10 +249,6 @@ a:hover {
   line-height: 24px;
 }
 
-.sidebar a {
-  color: #fff;
-}
-
 .button.small.side-bar {
   padding: 0rem 0.4rem;
 }
@@ -400,6 +404,7 @@ a.button-setup.add-wallet {
   width: 125px;
   font-size: 14px;
   padding: .3rem 0.7rem;
+  color: #fff;
 }
 
 a.button-setup.add-wallet:hover {
@@ -521,6 +526,14 @@ a.button-setup {
   color: #fff;
 }
 
+.name-wallet i {
+  color: #B6E9DF;
+}
+
+.name-wallet i:hover {
+  color: #fff;
+}
+
 .box-livenet {
   background: #213140;
   padding: 0rem 0.5rem 0.2rem;
@@ -986,16 +999,25 @@ button.gray:focus,
   padding: 1.2rem 0.7rem;
   border-bottom: 1px solid #3A4E61;
   overflow-y: auto;
+  height: 160px;
+}
+
+.side-nav.wallets.medium {
   height: 280px;
 }
 
-.side-nav.wallets a {
-  color: #7A8C9E !important;
+.side-nav.wallets.large {
+  height: 380px;
+}
+
+.side-nav.wallets a.wallet-item, 
+.side-nav.wallets a.wallet-item:hover {
+  color: #7A8C9E;
   line-height: 20px;
 }
 
-.side-nav.wallets p {
-  color: #AAB1B9 !important;
+.side-nav.wallets .type-wallet {
+  color: #AAB1B9;
 }
 
 .side-nav .wallet-item {
@@ -1295,9 +1317,9 @@ a.text-warning:hover {color: #FD7262;}
   }
 }
 
-@media (max-height: 480px) {
+@media (max-height: 590px) {
   .side-nav.wallets {
-    height: 160px;
+    height: 180px !important;
   }
 }
 

views/includes/sidebar.html

@@ -30,8 +30,7 @@
       </div>
     </div>
     <div class="col3">
-      <a class="side-bar" 
-        ng-class="{'selected':walletSelection}" 
+      <a ng-class="{'selected':walletSelection}" 
         title="{{'Manual Update'|translate}}" 
         ng-click="toggleWalletSelection()"> 
         <span ng-show="!walletSelection">
@@ -45,15 +44,22 @@
   </header>
 
   <div ng-if="walletSelection">
-    <ul class="side-nav wallets" ng-show="wallets.0">
+    <div class="side-nav wallets" ng-show="!wallets.0">
+      <p class="size-12" translate>You do not have another wallets. Creates one more from link below.</p>
+      <div class="text-center">
+        <i class="fi-arrow-down"></i>
+      </div>
+    </div>
+    <ul class="side-nav wallets" ng-show="wallets.0"
+      ng-class="{'large':wallets.length > 4, 'medium':wallets.length > 2 && wallets.length < 5}">
       <li data-ng-repeat="item in wallets track by $index" class="nav-item" ng-if="item.id != $root.wallet.id">
         <div class="col1">
-          <div class="avatar-wallet">P</div>
+          <div class="avatar-wallet">{{(item.name || item.id) | limitTo: 1}}</div>
         </div>
         <div class="col2">
           <a class="size-12 wallet-item" ng-click="switchWallet(item.id)">
             <div class="oh">
-              <div class="right size-10">[ {{item.totalCopayers}} of {{item.requiredCopayers}} ]</div> 
+              <div class="right size-10 type-wallet">[ {{item.totalCopayers}} of {{item.requiredCopayers}} ]</div> 
               <div class="ellipsis name-wallet">{{item.name || item.id}}</div>
             </div>
             <div class="oh">