diff options
| author | Emmanuel ROHEE <erohee@amdocs.com> | 2014-09-12 16:46:20 +0200 |
|---|---|---|
| committer | Emmanuel ROHEE <erohee@amdocs.com> | 2014-09-12 16:46:20 +0200 |
| commit | a2cd942a951d1f8cba4fda1b38ec29171253ab03 (patch) | |
| tree | 3d25ddf25a64e9f22e081c1b132c332fe6e451d4 | |
| parent | Some words about glare (diff) | |
| download | synapse-a2cd942a951d1f8cba4fda1b38ec29171253ab03.tar.xz | |
Fixed public room name and users count alignement
Put data into a table to ease layout and manage long strings
| -rwxr-xr-x | webclient/app.css | 32 | ||||
| -rw-r--r-- | webclient/home/home.html | 39 |
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> |