From 176115be4ec79d1164755b46c72c67a07fc7cf58 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Sat, 21 Sep 2013 18:47:44 +0200
Subject: [PATCH] [ux] don't let usernames overflow, improve undread marker

---
 public/css/app/roster.styl | 28 ++++++++++++++-------------
 public/css/otalk.css       | 39 ++++++++++++++++++++------------------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index 4bfe42b..315b21a 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -128,26 +128,28 @@
       margin-left: 30px
       line-height: 20px
       color: white
+      text-overflow: ellipsis
+      overflow: hidden
+      width: 70%
 
     .status
-      color: #ccc
-      font-size: $fontSmall
-      font-style: italic
-      font-weight: 600
-      margin: 0px
-      margin-left: 40px
+      color: $textSecondary
+      font-size: $fontSmall-2px
+      margin: 0
+      margin-left: 30px
+
+      &:not(:empty)
+        margin-top: -5px
 
     .unread
       display: none
       color: white
-      padding-left: 5px
-      padding-right: 5px
-      roundall: 11px
+      padding: 0 5px
+      roundall(20px)
       position: absolute
-      top: 20px
-      left: 20px
+      top: 10px
+      right: 15px
       text-align: center
       font-weight: bold
-      background-color: red
-      border: 1px solid white
+      background: $activeBlue
 
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 45c3964..8487370 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -413,35 +413,38 @@ td {
   margin-left: 30px;
   line-height: 20px;
   color: #fff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 70%;
 }
 #roster li .status,
 #bookmarks li .status {
-  color: #ccc;
-  font-size: 12px;
-  font-style: italic;
-  font-weight: 600;
-  margin: 0px;
-  margin-left: 40px;
+  color: #b7b7b7;
+  font-size: $fontSmall-2px;
+  margin: 0;
+  margin-left: 30px;
+}
+#roster li .status:not(:empty),
+#bookmarks li .status:not(:empty) {
+  margin-top: -5px;
 }
 #roster li .unread,
 #bookmarks li .unread {
   display: none;
   color: #fff;
-  padding-left: 5px;
-  padding-right: 5px;
-  -moz-border-radius: 11px;
-  -webkit-border-radius: 11px;
-  -khtml-border-radius: 11px;
-  -o-border-radius: 11px;
-  -border-radius: 11px;
-  border-radius: 11px;
+  padding: 0 5px;
+  -moz-border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -khtml-border-radius: 20px;
+  -o-border-radius: 20px;
+  -border-radius: 20px;
+  border-radius: 20px;
   position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 10px;
+  right: 15px;
   text-align: center;
   font-weight: bold;
-  background-color: #f00;
-  border: 1px solid #fff;
+  background: #00aeef;
 }
 .page.chat {
   padding-top: 0px;