[ux] make vertical alignment work properly in roster

clientapp/templates.js

@@ -46,12 +46,12 @@ exports.includes.bareMessage = function anonymous(locals) {
 exports.includes.contactListItem = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li class="contact"><img' + jade.attrs({
+        buf.push('<li class="contact"><div class="wrap"><img' + jade.attrs({
             src: contact.avatar,
             "class": "avatar"
         }, {
             src: true
-        }) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></li>");
+        }) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></div></li>");
     }
     return buf.join("");
 };

clientapp/templates/includes/contactListItem.jade

@@ -1,4 +1,5 @@
 li.contact
+  .wrap
     img.avatar(src=contact.avatar)
     .user
       span.name=contact.displayName

public/css/app/roster.styl

@@ -50,18 +50,26 @@
 
 #roster,
 #bookmarks    
+
   li
+    display: table
     list-style-type: none
     padding: 7px 35px 7px 10px
     margin: 0px
     position: relative
-    min-height: 30px
+    min-height: 40px
     font-size: $fontSmall
     color: #fff
     cursor: pointer
     transition: all .3s ease-in 0
     -webkit-transition: all .3s ease-in 0
     -moz-transition: all .3s ease-in 0
+    width: 100%
+    borderbox()
+
+    .wrap
+      display: table-cell
+      vertical-align: middle
 
     .unread:not(:empty)
       display: block
@@ -146,7 +154,6 @@
 
     .user
       margin-left: 40px
-      line-height: 30px
       color: white
       width: 70%
 
@@ -163,9 +170,6 @@
       margin: 0
       margin-left: 40px
 
-      &:not(:empty)
-        margin-top: -8px
-
     .unread
       display: none
       color: white

public/css/otalk.css

@@ -371,11 +371,12 @@ h3 {
 }
 #roster li,
 #bookmarks li {
+  display: table;
   list-style-type: none;
   padding: 7px 35px 7px 10px;
   margin: 0px;
   position: relative;
-  min-height: 30px;
+  min-height: 40px;
   font-size: 12px;
   color: #fff;
   cursor: pointer;
@@ -385,6 +386,15 @@ h3 {
   -moz-transition: all 0.3s ease-in 0;
   -webkit-transition: all 0.3s ease-in 0;
   -moz-transition: all 0.3s ease-in 0;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#roster li .wrap,
+#bookmarks li .wrap {
+  display: table-cell;
+  vertical-align: middle;
 }
 #roster li .unread:not(:empty),
 #bookmarks li .unread:not(:empty) {
@@ -512,7 +522,6 @@ h3 {
 #roster li .user,
 #bookmarks li .user {
   margin-left: 40px;
-  line-height: 30px;
   color: #fff;
   width: 70%;
 }
@@ -531,10 +540,6 @@ h3 {
   margin: 0;
   margin-left: 40px;
 }
-#roster li .status:not(:empty),
-#bookmarks li .status:not(:empty) {
-  margin-top: -8px;
-}
 #roster li .unread,
 #bookmarks li .unread {
   display: none;