improve badges and room tile layout

ara4n · ara4n · commit a2ca5f284761 · 2015-07-17T00:12:53.000+01:00
diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css
@@ -29,24 +29,35 @@ 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 {
     border-radius: 20px;
     background-color: #dbdbdb;
 }
 
+.mx_RoomTile_nameBadge {
+    display: table;
+    width: 100%;
+    height: 50px;
+}
+
 .mx_RoomTile_name {
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;
     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
@@ -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>
         );
     }
