Fixed public room name and users count alignement

Put data into a table to ease layout and manage long strings

2 files changed, 46 insertions, 25 deletions

diff --git a/webclient/app.css b/webclient/app.css

index 1b918f59e2..a277bd2a59 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -268,26 +268,38 @@ a:active  { color: #000; }
     font-weight: bold;
 }
 
-.publicRoomEntry {
+.publicTable {
     max-width: 480px;
-    margin-bottom: 5px;
-    border-bottom: 1px #ddd solid;
+    width: 100%;
+    border-collapse: collapse;
+}
+.publicTable tr {
+    width: 100%;
+}
+.publicTable td {
+    vertical-align: text-top;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.publicRoomEntry {
+    max-width: 430px;
 }
 
 .publicRoomJoinedUsers {
-    float: right;
+    width: 5em;
+    text-align: right;
+    font-size: 12px;
+    color: #888;
 }
 
 .publicRoomTopic {
     color: #888;
     font-size: 12px;
-    padding-right: 5px;
-    width: 15em;
-    float: right;
-    text-align: right;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    padding-bottom: 5px;
+    border-bottom: 1px #ddd solid;
 }
 
 #roomName {
diff --git a/webclient/home/home.html b/webclient/home/home.html

index 023ae1a40c..5a1e18e1de 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -24,21 +24,30 @@
 
     <h3>Public rooms</h3>
     
-    <div class="public_rooms" ng-repeat="room in public_rooms | orderBy:'room_display_name'">
-        <div class="publicRoomEntry">
-            <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}" 
-                ng-class="room.room_display_name.toLowerCase().indexOf('#matrix:') === 0 ? 'roomHighlight' : ''">
-                {{ room.room_display_name }}
-            </a>
-            <div ng-class="room.room_display_name.toLowerCase().indexOf('#matrix:') === 0 ? 'publicRoomJoinedUsers roomHighlight' : 'publicRoomJoinedUsers'"
-            ng-show="room.num_joined_members">
-                {{ room.num_joined_members }} {{ room.num_joined_members == 1 ? 'user' : 'users' }}
-            </div>
-            <div class="publicRoomTopic" ng-show="room.topic">
-                {{ room.topic }}
-            </div>
-        </div>
-    </div>
+    <table class="publicTable">
+        <tbody ng-repeat="room in public_rooms | orderBy:'room_display_name'"
+               class="publicRoomEntry"
+               ng-class="room.room_display_name.toLowerCase().indexOf('#matrix:') === 0 ? 'roomHighlight' : ''">
+            <tr>
+                <td class="publicRoomEntry">
+                    <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}"  >
+                        {{ room.room_display_name }}
+                    </a>
+                </td>
+                <td>
+                    <div class="publicRoomJoinedUsers"
+                         ng-show="room.num_joined_members">
+                        {{ room.num_joined_members }} {{ room.num_joined_members == 1 ? 'user' : 'users' }}
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2" class="publicRoomTopic">
+                    {{ room.topic }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
     <br/>
     
     <div>