diff options
| -rw-r--r-- | webclient/app.css | 22 | ||||
| -rw-r--r-- | webclient/room/room-controller.js | 3 | ||||
| -rw-r--r-- | webclient/room/room.html | 20 |
3 files changed, 32 insertions, 13 deletions
diff --git a/webclient/app.css b/webclient/app.css index 6a9ea25b33..fd548c117b 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -52,11 +52,16 @@ h1 { /*** Participant list ***/ -.usersTable { +.usersTableWrapper { float: right; width: 120px; + height: 100%; + overflow-y: auto; +} + +.usersTable { + width: 100%; border-collapse: collapse; - margin-bottom: 150px; } .usersTable td { @@ -105,18 +110,29 @@ h1 { background-color: #FFCC00; } +/*** Room page ***/ + +/* Limit the height of the page content to 100% of the viewport height minus the + height of the header and the footer. + The two divs containing the messages list and the users list will then scroll- + overflow separetely. + */ +.room .page { + height: calc(100vh - 198px); +} /*** Message table ***/ .messageTableWrapper { width: auto; + height: 100%; margin-right: 140px; + overflow-y: auto; } .messageTable { width: 100%; border-collapse: collapse; - margin-bottom: 100px; } .messageTable td { diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index f3836c536b..e54751ef6d 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -33,7 +33,8 @@ angular.module('RoomController', []) } $scope.messages.push(chunk); $timeout(function() { - window.scrollTo(0, document.body.scrollHeight); + var objDiv = document.getElementsByClassName("messageTableWrapper")[0]; + objDiv.scrollTop = objDiv.scrollHeight; },0); } else if (chunk.room_id == $scope.room_id && chunk.type == "m.room.member") { diff --git a/webclient/room/room.html b/webclient/room/room.html index 3439f1a786..276c3caa5a 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -6,15 +6,17 @@ {{ room_alias || room_id }} </div> - <table class="usersTable"> - <tr ng-repeat="(name, info) in members"> - <td class="userAvatar"> - <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/> - <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/> - <div class="userName">{{ info.displayname || name }}</div> - </td> - <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'away' ? 'away' : '')" /> - </table> + <div class="usersTableWrapper"> + <table class="usersTable"> + <tr ng-repeat="(name, info) in members"> + <td class="userAvatar"> + <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/> + <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/> + <div class="userName">{{ info.displayname || name }}</div> + </td> + <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'away' ? 'away' : '')" /> + </table> + </div> <div class="messageTableWrapper"> <table class="messageTable"> |