sidebar + copayers

css/main.css

@@ -98,7 +98,6 @@ body, html{
 .sidebar {
   position: fixed;
   width: 250px;
-  padding: 20px;
   background-color: #2C3E50;
   color: #fff;
   line-height: 24px;
@@ -115,6 +114,9 @@ body, html{
 
 .sidebar ul.copayer-list li {
   margin-top: 15px;
+  font-weight: 100;
+  font-size: 12px;
+  color: #C9C9C9;
 }
 
 .sidebar ul.copayer-list img {
@@ -127,11 +129,11 @@ body, html{
 }
 
 .online {
-  border: 3px solid #1ABC9C;
+  border: 2px solid #1ABC9C;
 }
 
 .offline {
-  border: 3px solid gray;
+  border: 2px solid gray;
   opacity: 0.4;
 }
 
@@ -174,10 +176,12 @@ body, html{
 .p70l {padding-left: 70px;}
 .p5h {padding: 0 5px;}
 .p20h {padding: 0 20px;}
+.p20 {padding:20px;}
 .m30v {margin: 30px 0;}
 .m10h {margin:0 10px;}
 .m10v {margin:10px 0;}
 .m30a {margin: 30px auto;}
+.m-negative-l {margin-left: -0.9375rem;}
 .br100 {border-radius: 100%;}
 .lh {line-height: 0;}
 .oh {overflow:hidden;}
@@ -549,17 +553,21 @@ button[disabled].warning:focus,
 .side-nav li {
   font-size: 16px;
   line-height: 40px;
+  font-weight: 100;
 }
 
 .side-nav li a {
   color: #FFFFFF !important;
-  font-weight: 100;
 }
 
 .side-nav li.active a {
   background-color: #1ABC9C;
 }
 
+.side-nav li.active:hover a {
+  background-color: #1ABC9C;
+}
+
 .side-nav li:hover a {
   background-color: #3C4E60;
 }
@@ -620,4 +628,19 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   border-color: red;
 }
 
+.copayers h3 {
+  color: #fff;
+}
+
+.copayers {
+  width: 100%;
+  background-color: #213140;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 20px;
+  border-top: 1px solid #475065;
+}
+
+
 /*-----------------------------------------------------------------*/

views/includes/peer-list.html

@@ -1,9 +1,17 @@
-<div ng-controller="VideoController">
+<div ng-controller="VideoController" class="copayers">
-  Icon Copayers
+  <div>
-  {{$root.wallet.requiredCopayers}} of {{$root.wallet.totalCopayers}}
+    <h3>
+      <i class="fi-torsos-all size-24 m20r"></i>
+      Copayers
+      <small class="m15l">
+        {{$root.wallet.requiredCopayers}} of {{$root.wallet.totalCopayers}}
+      </small>
+    </h3>
+  </div>
+  
 
   <ul class="copayer-list" ng-repeat="copayer in copayers">
-    <li>
+    <li tooltip="ID: {{copayer.peerId}}" tooltip-placement="top">
       <video
         ng-if="hasVideo(copayer)"
         peer="{{copayer}}" avatar autoplay
@@ -11,15 +19,13 @@
         ng-src="{{getVideoURL(copayer)}}"></video>
 
       <img 
-        class="no-video"
+        class="br100 oh no-video m20r"
         ng-if="!hasVideo(copayer)"
         ng-class="isConnected(copayer) ? 'online' : 'offline'"
         src="./img/satoshi.gif"
         alt="{{copayer}}">
 
-      <span
+      <span>
-        tooltip="ID: {{copayer.peerId}}" 
-        tooltip-placement="bottom">
         <span ng-show="copayer.index == 0">you</span>
         <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
       </span>

views/includes/sidebar.html

@@ -1,5 +1,5 @@
 <div ng-controller="SidebarController">
-  <header class="text-center">
+  <header class="text-center p20">
     <a href="/" class="db">
       <img src="../img/logo-negative-beta.svg" alt="" width="100">
     </a>
@@ -39,14 +39,14 @@
         tooltip-placement="bottom">{{availableBalance || 0|noFractionNumber}} {{$root.unitName}}
       </span>
     </div>
-    <div class="m10v box-livenet">
+    <div class="m10t box-livenet">
       <small ng-if="$root.wallet.getNetworkName()=='livenet'">LIVENET</small>
       <small ng-if="$root.wallet.getNetworkName()=='testnet'">TESTNET</small>
     </div>
   </header>
   <ul class="side-nav">
     <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"> 
+      <a href="{{item.link}}" ng-click="toggleCollapse()" class="db p20h"> 
         <i class="size-24 m20r {{item.icon}}"></i> {{item.title}}
         <span class="label alert round" ng-if="item.link=='#/transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
       </a>