[ux] add proper styling for idle timestamp

clientapp/templates.js

@@ -51,7 +51,7 @@ exports.includes.contactListItem = function anonymous(locals) {
             "class": "avatar"
         }, {
             src: true
-        }) + '/><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</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 class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : 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></li>");
     }
     return buf.join("");
 };

clientapp/templates/includes/contactListItem.jade

@@ -1,6 +1,8 @@
 li.contact
   img.avatar(src=contact.avatar)
-  .name=contact.displayName
+  .user
+    span.name=contact.displayName
+    span.idleTime=contact.idleSince
   .unread=contact.unreadCount
   .status=contact.status
-  .idleTime=contact.idleSince
+  

public/css/app/roster.styl

@@ -69,7 +69,7 @@
     &:hover
       background: $sidebarActive
 
-    &.online, &.chat, &.dnd, &.away, &.xa
+    &.online:not(.idle), &.chat, &.dnd, &.away, &.xa
 
       &:after
         content: ''
@@ -118,13 +118,18 @@
         -webkit-animation: pulsate 1.5s infinite ease-in
         -moz-animation: pulsate 1.5s infinite ease-in
 
-    &.paused, &.idle
+    &.paused
       &:after
         background: $textSecondary
 
     &.idle
+      padding-right: 15px
       .name
         color: $textSecondary
+        width: 60%
+
+      .user
+        width: 95%
 
     img
       opacity: 1
@@ -139,13 +144,16 @@
       avatar()
       noselect()
 
-    .name
+    .user
       margin-left: 40px
       line-height: 30px
       color: white
+      width: 70%
+
+    .name
+      display: inline-block
       text-overflow: ellipsis
       overflow: hidden
-      width: 70%
 
     .status
       color: $textSecondary
@@ -174,6 +182,8 @@
       background: rgba(0, 174, 239, .8)
 
     .idleTime
+      display: inline-block
+      margin-left: 5px
       font-size: 10px
       color: darken($textSecondary, 50%)
 

public/css/otalk.css

@@ -394,8 +394,8 @@ h3 {
 #bookmarks li:hover {
   background: #1f2d49;
 }
-#roster li.online:after,
-#bookmarks li.online:after,
+#roster li.online:not(.idle):after,
+#bookmarks li.online:not(.idle):after,
 #roster li.chat:after,
 #bookmarks li.chat:after,
 #roster li.dnd:after,
@@ -466,14 +466,21 @@ h3 {
   -moz-animation: pulsate 1.5s infinite ease-in;
 }
 #roster li.paused:after,
-#bookmarks li.paused:after,
-#roster li.idle:after,
-#bookmarks li.idle:after {
+#bookmarks li.paused:after {
   background: #b7b7b7;
 }
+#roster li.idle,
+#bookmarks li.idle {
+  padding-right: 15px;
+}
 #roster li.idle .name,
 #bookmarks li.idle .name {
   color: #b7b7b7;
+  width: 60%;
+}
+#roster li.idle .user,
+#bookmarks li.idle .user {
+  width: 95%;
 }
 #roster li img,
 #bookmarks li img {
@@ -502,14 +509,18 @@ h3 {
   -ms-user-select: none;
   user-select: none;
 }
-#roster li .name,
-#bookmarks li .name {
+#roster li .user,
+#bookmarks li .user {
   margin-left: 40px;
   line-height: 30px;
   color: #fff;
+  width: 70%;
+}
+#roster li .name,
+#bookmarks li .name {
+  display: inline-block;
   text-overflow: ellipsis;
   overflow: hidden;
-  width: 70%;
 }
 #roster li .status,
 #bookmarks li .status {
@@ -547,6 +558,8 @@ h3 {
 }
 #roster li .idleTime,
 #bookmarks li .idleTime {
+  display: inline-block;
+  margin-left: 5px;
   font-size: 10px;
   color: #5c5c5c;
 }