Merge pull request #1723 from bechi/temp

first animation on wallet selection

css/src/main.css

@@ -1086,12 +1086,28 @@ button.gray:focus,
   text-transform: uppercase;
 }
 
-.side-nav.wallets {
-  background-color: #213140 ;
+.side-nav.wallets li {
   padding: 1.2rem 0.7rem;
+}
+
+.side-nav.wallets {
+  z-index: 9999;
+  background-color: #213140 ;
   border-bottom: 1px solid #3A4E61;
   overflow-y: auto;
-  height: 160px;
+  position: absolute;
+  height: 0%;
+  width: 100%;
+  padding: 0;
+  -webkit-transition: height 250ms ease-in;
+    -moz-transition: height 250ms ease-in;
+    -o-transition: height 250ms ease-in;
+    -ms-transition: height 250ms ease-in;
+    transition: height 250ms ease-in;
+}
+
+.side-nav.wallets.open {
+  height: 100%;
 }
 
 .side-nav.wallets.medium {
@@ -1371,12 +1387,6 @@ a.text-warning:hover {color: #FD7262;}
   }
 }
 
-@media (max-height: 590px) {
-  .side-nav.wallets {
-    height: 180px !important;
-  }
-}
-
 @media (max-height: 380px) {
   .sidebar-footer {
     display: none;

views/includes/sidebar.html

@@ -44,15 +44,15 @@
 
   </div>
 
-  <div ng-if="walletSelection">
-    <ul class="side-nav wallets" ng-show="wallets.0"
+  <div>
+    <ul class="side-nav wallets" ng-class="{'open': walletSelection}" 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">
+      <li data-ng-repeat="item in wallets track by $index" class="nav-item" ng-if="item.id != $root.wallet.id" ng-click="switchWallet(item.id)">
         <div class="col1">
           <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)">
+          <a class="size-12 wallet-item" >
             <div class="oh">
               <div class="right size-10 type-wallet">[ {{item.requiredCopayers}} of {{item.totalCopayers}} ]</div> 
               <div class="ellipsis name-wallet">{{item.name || item.id}}</div>