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

View File

@ -70,4 +70,9 @@ matrixWebClient
$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 class="page">
<div class="wrapper">
{{ feedback }}
@ -47,5 +48,6 @@
<br/>
</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);
$scope.state.events_from = response.data.end;
$scope.feedback = "";
for (var i = 0; i < response.data.chunk.length; i++) {
var chunk = response.data.chunk[i];
if (chunk.room_id == $scope.room_id && chunk.type == "m.room.message") {
@ -68,10 +70,12 @@ angular.module('RoomController', [])
$timeout(shortPoll, 0);
}
}, function(response) {
$scope.feedback = "Can't stream: " + JSON.stringify(response);
$scope.feedback = "Can't stream: " + response.data;
if (response.status == 403) {
$scope.stopPoll = true;
}
if ($scope.stopPoll) {
console.log("Stopping polling.");
}

View File

@ -1,6 +1,7 @@
<div ng-controller="RoomController" data-ng-init="onInit()" class="room">
<div class="page">
<div class="wrapper">
<div class="roomName">
{{ room_alias || room_id }}
@ -12,7 +13,8 @@
<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>
<!-- 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 class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" />
</table>
@ -44,6 +46,7 @@
</table>
</div>
</div>
</div>
<div class="controlPanel">
@ -53,7 +56,7 @@
<td width="1">
{{ state.user_id }}
</td>
<td width="*">
<td width="*" style="min-width: 100px">
<input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
</td>
<td width="1">
@ -86,6 +89,4 @@
</div>
</div>
</div>

View File

@ -1,6 +1,7 @@
<div ng-controller="RoomsController" class="rooms">
<div class="page">
<div class="wrapper">
<div>
<form>
@ -77,4 +78,5 @@
{{ feedback }}
</div>
</div>
</div>