Merge pull request #1068 from bechi/bugs/sidebar

Bugs/sidebar

css/main.css

@@ -108,6 +108,10 @@ body, html{
   color: #2C3E50;
 }
 
+header {
+  padding: 15px 20px 5px;
+}
+
 .off-canvas-wrap, .inner-wrap{
     height:100%;   
 }
@@ -437,7 +441,7 @@ a:hover {
 
 .line-sidebar {
   border-top: 1px solid #34495E;
-  margin: 1rem 0;
+  margin: 0.7rem 0;
 }
 
 .line-sidebar-t {
@@ -1122,6 +1126,10 @@ a.text-warning:hover {color: #FD7262;}
 .btn-copy.zeroclipboard-is-hover { color: #000; }
 .btn-copy.zeroclipboard-is-active { opacity: 1; }
 
+.copayer-list-small-height {
+  display: none;
+}
+
 @media only screen and (min-width: 40.063em) {
   dialog.tiny, .reveal-modal.tiny {
     width: 50%;
@@ -1129,6 +1137,45 @@ a.text-warning:hover {color: #FD7262;}
   }
 }
 
+@media (max-height: 610px) {
+  .copayer-list {
+    display: none;
+  }
+
+  .copayer-list-small-height {
+    display: block;
+  }
+
+  .sidebar .copayer-list-small-height {
+    list-style-type: none;
+    padding:0; margin:0;
+  }
+
+  .sidebar .copayer-list-small-height li {
+    margin-top: 15px;
+    font-weight: 100;
+    font-size: 12px;
+    color: #C9C9C9;
+  }
+
+  .sidebar .copayer-list-small-height img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .copayers {
+    padding: 10px 20px;
+  }
+
+  .side-bar h3 {
+    margin-top: 0;
+  }
+
+  .side-nav li {
+    line-height: 30px;
+  }
+}
+
 .wide-page {
   background-color: #2C3E50;
   margin: 10% 0;

views/includes/peer-list.html

@@ -30,4 +30,24 @@
       <span class="btn-copy" clip-copy="copayer.peerId"></span>
     </li>
   </ul>
+  <div class="copayer-list-small-height" ng-repeat="copayer in copayers">
+    <span class="left" class="has-tip" tooltip-placement="top" tooltip="{{copayer.nick}}">
+      <video
+        ng-if="hasVideo(copayer)"
+        peer="{{copayer}}" avatar autoplay
+        ng-class="isConnected(copayer) ? 'online' : 'offline'"
+        ng-src="{{getVideoURL(copayer)}}"></video>
+
+      <img 
+        class="br100 oh no-video m20r"
+        ng-if="!hasVideo(copayer)"
+        ng-class="isConnected(copayer) ? 'online' : 'offline'"
+        src="./img/satoshi.gif"
+        alt="{{copayer}}">
+
+      <!-- <span ng-show="copayer.index == 0">Me</span>
+      <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
+      <span class="btn-copy" clip-copy="copayer.peerId"></span> -->
+    </span>
+  </div>
 </div>

views/includes/sidebar.html

@@ -1,5 +1,5 @@
 <div ng-controller="SidebarController">
-  <header class="p20">
+  <header>
     <div class="text-center">
       <a href="#!/receive" class="db">
         <img src="img/logo-negative-beta.svg" alt="" width="100">