From a2ca5f28476194d2185b7abfba46683c53b85312 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 16 Jul 2015 22:39:38 +0100
Subject: [PATCH] improve badges and room tile layout

---
 skins/base/css/molecules/RoomTile.css  | 17 ++++++++++++++---
 skins/base/views/molecules/RoomTile.js |  9 ++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css
index 6e19395e..b258ea33 100644
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@@ -29,8 +29,8 @@ limitations under the License.
     padding-top: 3px;
     padding-bottom: 3px;
     vertical-align: middle;
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
 }
 
 .mx_RoomTile_avatar img {
@@ -38,6 +38,12 @@ limitations under the License.
     background-color: #dbdbdb;
 }
 
+.mx_RoomTile_nameBadge {
+    display: table;
+    width: 100%;
+    height: 50px;
+}
+
 .mx_RoomTile_name {
     display: table-cell;
     vertical-align: middle;
@@ -45,8 +51,13 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
+.mx_RoomTile_badgeCell {
+    display: table-cell;
+    vertical-align: middle;
+    width: 26px;
+}
+
 .mx_RoomTile_badge {    
-    float: right;
     background-color: #80cef4;
     color: #fff;
     border-radius: 26px;
diff --git a/skins/base/views/molecules/RoomTile.js b/skins/base/views/molecules/RoomTile.js
index 00d16cf0..44709577 100644
--- a/skins/base/views/molecules/RoomTile.js
+++ b/skins/base/views/molecules/RoomTile.js
@@ -43,10 +43,17 @@ module.exports = React.createClass({
         else if (this.props.unread) {
             badge = <div className="mx_RoomTile_badge">1</div>;
         }
+        var nameCell;
+        if (badge) {
+            nameCell = <div className="mx_RoomTile_nameBadge"><div className="mx_RoomTile_name">{name}</div><div className="mx_RoomTile_badgeCell">{badge}</div></div>;
+        }
+        else {
+            nameCell = <div className="mx_RoomTile_name">{name}</div>;
+        }
         return (
             <div className={classes} onClick={this.onClick}>
                 <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div>
-                <div className="mx_RoomTile_name">{name}{ badge }</div>
+                { nameCell }
             </div>
         );
     }