completely change the CSS to be an entirely 'position: absolute' layout rather than top-to-bottom. makes the overscroll much more predictable and sane and not dependent on CSS expressions.

This commit is contained in:
Matthew Hodgson 2014-08-14 02:13:14 +01:00
parent aebe5ce08a
commit 6c2db18be1
6 changed files with 46 additions and 29 deletions

View File

@ -11,21 +11,33 @@ h1 {
/*** Overall page layout ***/ /*** Overall page layout ***/
.page { .page {
max-width: 1280px; position: absolute;
top: 80px;
bottom: 100px;
left: 0px;
right: 0px;
margin: 20px;
margin: 20px;
}
.wrapper {
margin: auto; margin: auto;
margin-bottom: 80px ! important; max-width: 1280px;
padding-left: 20px; height: 100%;
padding-right: 20px;
} }
.roomName { .roomName {
max-width: 1280px;
width: 100%;
text-align: right; text-align: right;
top: -40px;
position: absolute;
font-size: 16pt; font-size: 16pt;
margin-bottom: 10px; margin-bottom: 10px;
} }
.controlPanel { .controlPanel {
position: fixed; position: absolute;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
background-color: #f8f8f8; background-color: #f8f8f8;
@ -70,8 +82,9 @@ h1 {
.userAvatar { .userAvatar {
width: 80px; width: 80px;
height: 80px; height: 100px;
position: relative; position: relative;
background-color: #000;
} }
.userAvatar .userAvatarImage { .userAvatar .userAvatarImage {
@ -81,7 +94,7 @@ h1 {
.userAvatar .userAvatarGradient { .userAvatar .userAvatarGradient {
position: absolute; position: absolute;
bottom: 0px; bottom: 20px;
} }
.userAvatar .userName { .userAvatar .userName {
@ -91,7 +104,6 @@ h1 {
bottom: 0px; bottom: 0px;
font-size: 8pt; font-size: 8pt;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all;
} }
.userPresence { .userPresence {
@ -110,27 +122,18 @@ h1 {
background-color: #FFCC00; 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 - 220px);
}
/*** Message table ***/ /*** Message table ***/
.messageTableWrapper { .messageTableWrapper {
width: auto;
height: 100%; height: 100%;
margin-right: 140px; margin-right: 140px;
overflow-y: auto; overflow-y: auto;
width: auto;
} }
.messageTable { .messageTable {
margin: auto;
max-width: 1280px;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
@ -180,6 +183,8 @@ h1 {
height: 32px; height: 32px;
display: inline-table; display: inline-table;
max-width: 90%; max-width: 90%;
word-wrap: break-word;
word-break: break-all;
} }
.emote { .emote {
@ -217,12 +222,10 @@ h1 {
/******************************/ /******************************/
.header { .header {
margin-top: 12px ! important;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
height: 60px;
} }
.header-buttons { .header-buttons {

View File

@ -70,4 +70,9 @@ matrixWebClient
$timeout(function() { element[0].focus() }, 0); $timeout(function() { element[0].focus() }, 0);
} }
}; };
}]); }])
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);

View File

@ -1,5 +1,6 @@
<div ng-controller="LoginController" class="login"> <div ng-controller="LoginController" class="login">
<div class="page"> <div class="page">
<div class="wrapper">
{{ feedback }} {{ feedback }}
@ -47,5 +48,6 @@
<br/> <br/>
</div>
</div> </div>
</div> </div>

View File

@ -42,6 +42,8 @@ angular.module('RoomController', [])
console.log("Got response from "+$scope.state.events_from+" to "+response.data.end); console.log("Got response from "+$scope.state.events_from+" to "+response.data.end);
$scope.state.events_from = response.data.end; $scope.state.events_from = response.data.end;
$scope.feedback = "";
for (var i = 0; i < response.data.chunk.length; i++) { for (var i = 0; i < response.data.chunk.length; i++) {
var chunk = response.data.chunk[i]; var chunk = response.data.chunk[i];
if (chunk.room_id == $scope.room_id && chunk.type == "m.room.message") { if (chunk.room_id == $scope.room_id && chunk.type == "m.room.message") {
@ -68,10 +70,12 @@ angular.module('RoomController', [])
$timeout(shortPoll, 0); $timeout(shortPoll, 0);
} }
}, function(response) { }, function(response) {
$scope.feedback = "Can't stream: " + JSON.stringify(response); $scope.feedback = "Can't stream: " + response.data;
if (response.status == 403) { if (response.status == 403) {
$scope.stopPoll = true; $scope.stopPoll = true;
} }
if ($scope.stopPoll) { if ($scope.stopPoll) {
console.log("Stopping polling."); console.log("Stopping polling.");
} }

View File

@ -1,6 +1,7 @@
<div ng-controller="RoomController" data-ng-init="onInit()" class="room"> <div ng-controller="RoomController" data-ng-init="onInit()" class="room">
<div class="page"> <div class="page">
<div class="wrapper">
<div class="roomName"> <div class="roomName">
{{ room_alias || room_id }} {{ room_alias || room_id }}
@ -12,7 +13,8 @@
<td class="userAvatar"> <td class="userAvatar">
<img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/> <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"/> <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/>
<div class="userName">{{ info.displayname || name }}</div> <!-- FIXME: does allowing <wbr/> to be unescaped introduce HTML injections from user IDs and display names? -->
<div class="userName" ng-bind-html="info.displayname || (name.substr(0, name.indexOf(':')) + '<wbr/>' + name.substr(name.indexOf(':'))) | to_trusted"></div>
</td> </td>
<td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" /> <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" />
</table> </table>
@ -44,6 +46,7 @@
</table> </table>
</div> </div>
</div>
</div> </div>
<div class="controlPanel"> <div class="controlPanel">
@ -53,7 +56,7 @@
<td width="1"> <td width="1">
{{ state.user_id }} {{ state.user_id }}
</td> </td>
<td width="*"> <td width="*" style="min-width: 100px">
<input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/> <input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
</td> </td>
<td width="1"> <td width="1">
@ -85,7 +88,5 @@
<button ng-click="leaveRoom()">Leave</button> <button ng-click="leaveRoom()">Leave</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,7 +1,8 @@
<div ng-controller="RoomsController" class="rooms"> <div ng-controller="RoomsController" class="rooms">
<div class="page"> <div class="page">
<div class="wrapper">
<div> <div>
<form> <form>
<input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" /> <input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" />
@ -77,4 +78,5 @@
{{ feedback }} {{ feedback }}
</div> </div>
</div>
</div> </div>